Welcome to my site | Layouts and Templates for Blogger and Xanga

Xanga Layouts

To use any of theese Xanga Layouts, copy and paste any code bellow any preview into your Xanga. Preview the layout, then once you get there and if you like it, click on Back to Xanga Layouts page and copy the code bellow that layout you like. Don't know how to do that? Dont understand? Then let me know and leave me a comment on the Xanga Layout you want, or email me.

Feel free to use any of the Xanga Layouts, comment on the one you use.

Awesome Background Layouts

Reality Eclipse (click to preview)

<body style=

"border-left: #B333CC 5pt solid;

border-right: #B333CC 5pt solid;

border-bottom:#D864B1 5pt solid;

border-top:#D864B1 5pt solid;">
<center><a href="http://www.freewebs.com/loras-designs" target="_new">Loras Designs</a><br><br>

background-repeat: repeat;
 background-attachment: fixed;
 background-position: center;
 
  scrollbar-arrow-color:#B333CC;
 
  scrollbar-track-color: #000;
 
  scrollbar-shadow-color: #000000;
 
  scrollbar-face-color: #B333CC;
 
  scrollbar-highlight-color: #957AFF;
 
  scrollbar-darkshadow-color: #3333ff;
 
  scrollbar-3dlight-color: #000000;
 
  background-color: black;
  }
.blogbody b, .standard b, p b, strong {
/* edits bolded text in your entry */
 
 font-weight: bold;
 
 color: #B333CC;
 
 text-transform: bold;
 
 font: bold 8pt arial;
}
.blogbody u, .standard u,  {
 
 text-decoration: underline;
 
 font-weight: regular;
 
 color: #957AFF;
 
 text-transform: underline;
 
 font: underline 8pt arial;
 
 border-bottom: 1xp dashed #957AFF;
 }

.blogbody i, .standard i, em {
text-decoration: italic;
color: #B333CC;
text-transform: italic;
font: italic 8pt arial;
}
.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {
/* edits main text */
  font:normal 8pt arial;
  line-height:11px;
  color: #B333CC;
  letter-spacing:0px;
  text-align:center;
  }

table.footer TD {
/* this makes the footer at the bottom centered */
/* leave it alone unless you know what to do*/
  text-align: center;
  }
div.blogheader, .caption {
/* edits the dates */
  font-family: times new roman;
  text-transform:lowercase;
  font-size:19px;
 font-weight:normal;
 line-height: 23px;
 letter-spacing: 1px;
  color: #9900ff;
  border-top: 5px inset #B333CC;
  border-right: 1px groove #B333CC;
  border-left: 5px inset #B333CC;
  border-bottom: 5px groove #B333CC;
  background-color: transparent;
  text-align: center;
  width:360px;
  }
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edits all links */
 color: #B333CC;
 font: normal 8pt arial;
 line-height: 11px;
 font-weight: regular;
 text-decoration: none;
 }
a:visited, a.footernav:visited,  {
/* edits the links that the user has visited */
 color: #B333CC;
 font:normal 8pt arial;
 line-height:11px;
 font-weight:normal;
 text-decoration: none;
 }
a:hover {
/* edits when user mouseovers the links */
 color: black;
 font:bold 11px terminal;
 background: #B333CC;
 background-image: url();
 line-height:11px;
 letter-spacing:0px;
 text-transform:uppercase;
 text-decoration:none;
  }
input, select, textarea, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
  border: 4px solid #D864B1;
  font:normal 8pt arial;
  background-color: black;
  letter-spacing:0px;
  font: normal 8pt arial;
  color: #B300FF;
  }
table.left {
/* this edits the menu module */
  border: 4px inset #D864B1;
  width:170px;
  color: white;
   background-color: #000000;
text-align: center;
  }
table.blogbody {
/* this edits the other the place where the  blog is */
  border: 7px double #D864B1;
  background-color: #000000;
  width:360px;
  }
table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
 
  background-color: #000000;
font:normal 14px arial;
  letter-spacing: 1px;
 text-transform:lowercase;
 text-align: center;
  color: #B300FF;
  border: none;
  }
table.left TD {
/* on your menu module, this edits the body part of it */
  background-color: #000000;
  border-top: 6px double #D864B1;
  color: #B300FF;
text-align: center;
  }
table.search TD, table.search, table.announcements {
/* border of search bar (if you have it) */
 background-color: black;
 border: 2px solid #D864B1;
 }
table.search TD, table.announcements TH {
/* this should be left alone */
/* unless you know what to do */
 border: 2px solid #D864B1;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */

width: 550px;
  font-weight:bold;
 }
hr {
/* horizontal divider */
 border: 3px solid #D864B1;
 }
.search, .searchbarborder, .footer, hr, banner{ display: none; }
</style>

Song of the Night (click to preview)

<center><a
href="http://www.freewebs.com/loras-designs" target="_new">Loras
Designs</a><br><Br>
</script>
<style type="text/css">
body {
background-color: #000000;
background-image:url(http://www.gfy.ku.dk/~flyvholm/Bands%20from%20horizon.jpg);
background-position: top left;
background-attachment:fixed;
background-repeat:no-repeat;
scrollbar-arrow-color: #0aaa00;
scrollbar-track-color: #000;
scrollbar-shadow-color: #228822;
scrollbar-face-color: #000;
scrollbar-highlight-color: #0aaa00;
scrollbar-darkshadow-color: #0aaa00;
scrollbar-3dlight-color: #0aaa00; }
.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p
{
/* edits main text */
font:normal 11px arial;
line-height:13px;
color:#33CC66;
letter-spacing:0px;
text-align:justify;
}
table.footer TD {
/* this makes the footer at the bottom centered */
/* leave it alone unless you know what to do*/
text-align: left;
}
div.blogheader, .caption {
/* edits the dates */
font-family: impact;
text-transform:normal;
font-size:16px;
line-height:35px;
font-weight: normal;
filter: alpha (opacity=100, finishopacity=0, style=3);
height: 1px;
background-color:#000000;
color:green;
letter-spacing:1px;
text-align: center;
background-image: url();
}
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edits all links */
color:#0aaa00;
text-decoration: none;
}
a:visited, a.footernav:visited, {
/* edits the links that the user has visited */
color:#0aaa00; text-decoration: none;
}
a:hover {
/* edits when user mouseovers the links */
color:#228822;
cursor: crosshair;
text-decoration: none;
}
input, select, textarea, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
border: 3px double #0aaa00;
font:normal 11px arial;
background-color: #000000;
letter-spacing:0px;
color: #228822;
}
table.left { /* this edits the menu module */
border: 3px double #10e000;
width:170px;
background-color: #000000;
}
table.blogbody {
/* this edits the other the place where the blog is */
border: 3px double #10e000;
background-color:#000000;
width:400px;
}
table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-image:
url(http://p4.xanga.com/4c/bc/4cbcf0994ce22a6b877d304898470ff514683491.gif);
background-color: #000000;
font: bold 11px arial;
text-transform: uppercase;
color: #0aaa00;
border: 3px double #0aaa00;
}
table.left TD {
/* on your menu module, this edits the body part of it */
background-image:
url(http://p4.xanga.com/4c/bc/4cbcf0994ce22a6b877d304898470ff514683491.gif);
background-color: #000000;
border: 3px double #0aaa00;
color: #33CC66;
}
table.search TD, table.search, table.announcements {
/* border of search bar (if you have it) */
background-color: #000000; border: 3px double #10e000;
}
table.search TD, table.announcements TH {
/* this should be left alone */
/* unless you know what to do */
border: 0px solid #228822;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 500px;
}
hr {
/* horizontal divider */
border: 1px solid #ffffff;
}
</style>
<BODY style="border-bottom: #0aaa00
20t solid; border-top: #0aaa00
20t solid; border-left: #228822
20t solid; border-right: #228822
20t solid"></TBODY>

<script language=JavaScript>

</SCRIPT>

Moon in the Dark Waters (click to preview)

<center>

<form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="#">Navigation</option>
<option value="#">---------------------</option>
<option value="http://xanga.com">Xanga</option>
<option value="http://www.xanga.com/private/home.aspx">Private</option>
<option value="http://www.xanga.com/CLAF/default.asp">Look&Feel</option>
<option value="http://www.xanga.com/Private/SubscribeTo.aspx?user=YOURXANGA">Subscribe</option>
<option value="http://www.xanga.com/Private/subs.aspx">My Subscriptions</option>
<option value="http://www.freewebs.com/loras-designs">Layout maker here</option>
<option value="http://www.xanga.com/Private/feedback.aspx">Feedback</option>
<option value="#">---------------------</option>
<option value="http://www.xanga.com/signin.aspx">Sign in</option>
<option value="http://www.xanga.com/logout.aspx">Log out</option>
</select>

.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {
/* edits main text */
 font:normal 11px arial;
 line-height:10px;
 color: white;
 letter-spacing:0px;
 text-align:justify;
 }
table.footer TD {
/* this makes the footer at the bottom centered */
/* leave it alone unless you know what to do*/
 text-align: center;
 }
div.blogheader, .caption {
/* edits the dates */
font-family: arial;
text-transform: uppercase;
font-size:8pt;
font-weight: bold;
line-height: 8pt;
color: #003399;
letter-spacing: -1px;
background-color: transparent;
text-align: center;
border: none;
border-bottom: 3px solid #003399;
width: 330px;
}
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edits all links */
 color: #fff;
 font:normal 11px arial;
 text-decoration: none;
 }
a:visited, a.footernav:visited,  {
/* edits the links that the user has visited */
 color: #fff;
 font:normal 11px arial;
 line-height:10px;
 text-decoration: none;
 }
a:hover {
/* edits when user mouseovers the links */
 color: #003399;
letter-spacing: -1px;
 font:bold 10px arial;
 text-transform: none;
 text-decoration: none;
 }
input, select, textarea, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
 border: 3px solid #003399;
 font:normal 11px arial;
 font-weight: itialic;
 color: #0033cc;
 background-color: #000;
 letter-spacing:0px;
 }

table.left {
/* this edits the menu module */
 border: 6px double #003399;
font-weight: normal;
 width:200px;
  background-color: transparent;
  background-image: url(http://c.myspace.com/Groups/00007/99/15/7775199_m.gif);
 background-repeat: repeat;

}
table.blogbody {
/* this edits the other the place where the  blog is */
  background-color: transparent;
  background-image: url(http://c.myspace.com/Groups/00007/99/15/7775199_m.gif);
 background-repeat: repeat;
border:none;
border-top: 4px double #003399;
 width:330px;
 }
table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
font-family: arial;
text-transform: uppercase;
font-size:8pt;
font-weight: bold;
line-height: 8pt;
color: #003399;
letter-spacing: -1px;
background-color: transparent;
text-align: center;
border: none;
border-bottom: 2px solid #003399;
 }
table.left TD {
/* on your menu module, this edits the body part of it */
 background-color: transparent;
border: 2px double #003399;
border-top: 3px solid #003399;
 }
table.search TD, table.search, table.announcements {
/* border of search bar (if you have it) */
 background-color: transparent;
 border: 1px solid #003399;
 }
table.search TD, table.announcements TH {
/* this should be left alone */
/* unless you know what to do */
 border: 2px solid #003399;
 }
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
 width: 500px;
 }
hr {
/* horizontal divider */
 border: 1px solid #003399;
 }
table.navigation, table.footer {display: none;}</style>

Simple Tree (click to preview)

<center><A href="http://www.freewebs.com/loras-designs">Loras Designs</A>
<STYLE>
body {
background-color: #ffffff;
background-image:url(http://photos1.blogger.com/blogger/7377/1979/1600/tree.jpg);
background-attachment:fixed;
background-repeat:no-repeat;
background-position: bottom left;
scrollbar-arrow-color:#000;
scrollbar-track-color:#fff;
scrollbar-shadow-color:#000;
scrollbar-highlight-color:#fff;
scrollbar-face-color:#000;
scrollbar-darkshadow-color:#fff;
scrollbar-3dlight-color:#000;
}
.left, .blogbody, table.footer, .standard, td, p {
/* edits main text */
font:normal 11px arial;
color: #000;
letter-spacing:0px;
text-align:left;
}
table.footer TD {
/* this makes the footer at the bottom centered */
/* leave it alone unless you know what to do*/
text-align: center;
}
div.blogheader, .caption {
/* edits the dates */
font-family:arial;
text-transform: lowercase;
background-image: url(http://photos1.blogger.com/blogger/7377/1979/400/tree.1.jpg);
background-color: #fff;
font-size:25px;
font-weight: normal;
line-height: 22px;
letter-spacing: -1px;
color: #000;
text-align: center;
padding: 3px;
width: 290px;
border:2px double #000;
}
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edits all links */
color: #000;
letter-spacing: 0px;
text-transform: uppercase;
background-color: #fff;
font:normal 9px arial;
line-height:9px;
text-decoration: none;
}
a:visited, a.footernav:visited, {
/* edits the links that the user has visited */
color: #000;
letter-spacing: 0px;
text-transform: uppercase;
background-color: #fff;
font:normal 9px arial;
line-height:9px;
text-decoration: none;
}
a:hover {
/* edits when user mouseovers the links */
font:italic 9px arial;
line-height:9px;
text-decoration:underline;
cursor: nw-resize;
color: #fff;
letter-spacing: 0px;
text-transform: uppercase;
background-color: #000;
}
input, select, textarea, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
border: 1px solid #000;
font:normal 11px arial;
background-color: #fff;
letter-spacing:0px;
color: #000;
}
table.blogbody {
/* this edits the other the place where the blog is */
border: 5px double #000;
width: 300px;
background-color: #fff;

}
table.left {
/* this edits the menu module */
border: 4px solid #000;
width: 170px;
}
table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
background-image: url(http://photos1.blogger.com/blogger/7377/1979/400/tree.1.jpg);
background-color: #fff;
font: normal 15px arial;
text-transform:uppercase;
text-align:center;
color: #000;
border:2px solid #000;
letter-spacing:-1px;
line-height:20px;
}
table.left TD {
/* on your menu module, this edits the body part of it */
font:11pxarial;
color: black;
text-align:left;
border-top: 2px double #000;
width: 150px;
background-color: #fff;
}
table.search TD, table.search, table.announcements {
/* border of search bar (if you have it) */
background-color: #fff;
border: 2px solid #000;
}
table.search TD, table.announcements TH {
/* this should be left alone */
/* unless you know what to do */
border: 1px solid #000;
}
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
width: 500px;
}
hr {
/* horizontal divider */
border: 1px solid black;
}
</style>

Lonely Road (click to preview)

<center>

<form name="jump">
<select name="menu" onChange="location=document.jump.menu.options[document.jump.menu.selectedIndex].value;" value="GO">
<option value="#">Navigation</option>
<option value="http://xanga.com">Xanga</option>
<option value="http://www.xanga.com/CLAF/default.asp">Look&Feel</option>
<option 
value="http://www.xanga.com/Private/SubscribeTo.aspx?user=YOURXANGA">Subscribe</option>
<option value="http://www.xanga.com/Private/subs.aspx">My Subscriptions</option>
<option value="http://www.freewebs.com/loras-designs">Layout maker here</option>
value="http://www.xanga.com/signin.aspx">Sign in</option>
<option value="http://www.xanga.com/logout.aspx">Log out</option>
</select>

.left, .blogbody, table.footer, .standard, .leftmodulefontcolor, td, p {
/* edits main text */
 font:normal 11px arial;
 line-height:10px;
 color: #FFFF61;
 letter-spacing:0px;
 text-align:justify;
 }
table.footer TD {
/* this makes the footer at the bottom centered */
/* leave it alone unless you know what to do*/
 text-align: center;

}
div.blogheader, .caption {
/* edits the dates */
font-family: arial;
text-transform: uppercase;
font-size:8pt;
font-weight: bold;
line-height: 8pt;
color: #267373;
letter-spacing: -1px;
background-color: #FFFF61;
text-align: center;
border: none;
border-bottom: 1px solid #267373;
width: 330px;
}
a:link, .footernav.link, a.footernav:link, a.footernav:active {
/* edits all links */
 color: #FFFF61;
 font:normal 11px arial;
 text-decoration: none;
 }
a:visited, a.footernav:visited,  {
/* edits the links that the user has visited */
 color: #FFFF61;
 font:normal 11px arial;
 line-height:10px;
 text-decoration: none;
 }
a:hover {
/* edits when user mouseovers the links */
 color: #339999;
letter-spacing: -1px;

font:bold 14px arial;
 text-transform: none;
 text-decoration: none;
 }
input, select, textarea, .textfield, .button {
/* this edits the buttons, dropdowns, etc. */
 border: 3px solid #FFFF61;
 font:normal 11px arial;
 background-color: #267373;
 letter-spacing:0px;
 }
table.left {
/* this edits the menu module */
 border: 6px double #FFFF61;
font-weight: normal;
 width:200px;
  background-color: #267373;
 }
table.blogbody {
/* this edits the other the place where the  blog is */
 background-color: #267373;
border:none;
border-top: 4px double #FFFF61;
 width:330px;
 }
table.left th {
/* on your menu module, this edits the title part of it */
/* like BLOGRINGS, POSTING CALENDAR, etc */
font-family: arial;
text-transform: uppercase;
font-size:8pt;
font-weight: bold;
line-height: 8pt;
color: #FFFF61;
letter-spacing: -1px;
background-color: #267373;
text-align: center;
border: none;
border-bottom: 2px solid #FFFF61;
 }
table.left TD {
/* on your menu module, this edits the body part of it */
 background-color: #267373;
border:2px #FFFF61;
border-top: 2px solid #FFFF61;
 }
table.search TD, table.search, table.announcements {
/* border of search bar (if you have it) */
 background-color: #339999;
 border: 3px solid #267373;
 }
table.search TD, table.announcements TH {
/* this should be left alone */
/* unless you know what to do */
 border: 2px solid #339999;
 }
table.navigation, table.main, table.footer {
/* the width of your blog with modules */
 width: 500px;
 }
hr {
/* horizontal divider */
 border: 1px solid #339999;
 }
table.navigation, table.footer {display: none;}</style>