MANILENA DOT COM » Blog Archive » Blogger Template 3

Blogger Template 3 - Psychedelic Party

I’ve been doing a lot of templates lately… I’m publishing them one by one and this is the first of the series.

You can view the live demo here.

Highlight the XML Code in the text box and copy and replace your current blogger code.

<?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html expr:dir='data:blog.languageDirection' xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'> <head> <b:include data='blog' name='all-head-content'/> <b:skin><![CDATA[/* /* Variable definitions ==================== <Variable name="bgcolor" description="Page Background Color" type="color" default="#E5A" value="#EEF0BF"> <Variable name="textcolor" description="Text Color" type="color" default="#000" value="#000000"> <Variable name="linkcolor" description="Link Color" type="color" default="#EA0437" value="#FD1009"> <Variable name="pagetitlecolor" description="Blog Title Color" type="color" default="#fff" value="#FD1009"> <Variable name="descriptioncolor" description="Blog Description Color" type="color" default="#FEF" value="#7e0804"> <Variable name="titlecolor" description="Post Title Color" type="color" default="#fff" value="#fd1009"> <Variable name="bordercolor" description="Border Color" type="color" default="#ffc" value="#D8E42B"> <Variable name="sidebarcolor" description="Sidebar Title Color" type="color" default="#000" value="#1B703A"> <Variable name="sidebartextcolor" description="Sidebar Text Color" type="color" default="#333" value="#000000"> <Variable name="visitedlinkcolor" description="Visited Link Color" type="color" default="#fff" value="#fd1009"> <Variable name="bodyfont" description="Text Font" type="font" default="normal normal 100% Georgia, Serif" value="normal normal 99% Verdana, sans-serif"> <Variable name="headerfont" description="Sidebar Title Font" type="font" default="normal normal 78% 'Trebuchet MS',Trebuchet,Arial,Verdana,Sans-serif" value="normal bold 78% Verdana, sans-serif"> <Variable name="pagetitlefont" description="Blog Title Font" type="font" default="normal normal 300% Gigi" value="normal bold 359% Trebuchet, Trebuchet MS, Arial, sans-serif"> <Variable name="descriptionfont" description="Blog Description Font" type="font" default="normal normal 90% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal bold 99% Trebuchet, Trebuchet MS, Arial, sans-serif"> <Variable name="postfooterfont" description="Post Footer Font" type="font" default="normal normal 78% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif" value="normal normal 86% 'Trebuchet MS', Trebuchet, Arial, Verdana, Sans-serif"> <Variable name="startSide" description="Start side in blog language" type="automatic" default="left" value="left"> <Variable name="endSide" description="End side in blog language" type="automatic" default="right" value="right"> */ body { background:$bgcolor; margin:0; color:$textcolor; font:x-small Georgia Serif; font-size/* */:/**/small; font-size: /**/small; text-align: center; } a:link { color:$linkcolor; text-decoration:none; } a:visited { color:$visitedlinkcolor; text-decoration:none; } a:hover { color:$titlecolor; text-decoration:underline; } a img { border-width:0; } /* Header ———————————————– */ #header-wrapper { width:745px; height:300px; margin:0 auto 10px; border:3px solid $bordercolor; background-image: url(http://img360.imageshack.us/img360/209/psychedelic1je8.jpg); } #header-inner { background-position: center; margin-$startSide: auto; margin-$endSide: auto; } #header { margin: 5px; border: 0px solid $bordercolor; text-align: left; color:$pagetitlecolor; } #header h1 { margin:5px 5px 0; padding:15px 20px .25em; line-height:1.2em; text-transform:normal; letter-spacing:.2em; font: $pagetitlefont; } #header a { color:$pagetitlecolor; text-decoration:none; } #header a:hover { color:$pagetitlecolor; } #header .description { margin-right: 300px; padding:0 20px 15px; max-width:600px; text-transform:uppercase; letter-spacing:.2em; line-height: 1.4em; font: $descriptionfont; color: $descriptioncolor; } #header img { margin-$startSide: auto; margin-$endSide: auto; } /* Outer-Wrapper ———————————————– */ #outer-wrapper { width: 750px; margin:0 auto; padding:10px; text-align:$startSide; font: $bodyfont; } #main-wrapper { width: 500px; border:3px solid $bordercolor; background-image:url(http://img360.imageshack.us/img360/9153/psychedelicside1dg8.jpg); float: left; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #sidebar-wrapper { width: 225px; margin-right: 0px; border:3px solid $bordercolor; background-image:url(http://img360.imageshack.us/img360/9153/psychedelicside1dg8.jpg); float: right; word-wrap: break-word; /* fix for long text breaking sidebar float in IE */ overflow: hidden; /* fix for long non-text content breaking IE sidebar float */ } #footer-wrapper { width: 725px; margin:0 auto; text-align:center; font: $descriptionfont; } /* Headings ———————————————– */ h2 { margin:1.5em 0 .75em; font:$headerfont; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color:$sidebarcolor; } /* Posts ———————————————– */ h2.date-header { margin:1.5em 0 .5em; margin-left: 10px; margin-right: 10px; } .post { margin:.5em 0 1.5em; margin-left: 10px; margin-right: 10px; border-bottom:1px dotted $bordercolor; padding-bottom:1.5em; } .post h3 { margin:.25em 0 0; margin-left: 10px; margin-right: 10px; padding:0 0 4px; font-size:140%; font-weight:normal; line-height:1.4em; color:$titlecolor; } .post h3 a, .post h3 a:visited, .post h3 strong { display:block; text-decoration:none; color:$titlecolor; font-weight:normal; } .post h3 strong, .post h3 a:hover { color:$textcolor; } .post-body { margin:0 .75em; line-height:1.6em; } .post-body blockquote { line-height:1.3em; } .post-footer { margin: .75em 0; color:$sidebarcolor; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; line-height: 1.4em; } .comment-link { margin-$startSide:.6em; } .post img { padding:4px; border:1px solid $bordercolor; } .post blockquote { margin:1em 20px; } .post blockquote p { margin:.75em 0; } /* Comments ———————————————– */ #comments h4 { margin:1em 0; font-weight: bold; line-height: 1.4em; text-transform:uppercase; letter-spacing:.2em; color: $sidebarcolor; } #comments-block { margin:1em 0 1.5em; line-height:1.6em; } #comments-block .comment-author { margin:.5em 0; } #comments-block .comment-body { margin:.25em 0 0; } #comments-block .comment-footer { margin:-.25em 0 2em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block .comment-body p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; } .feed-links { clear: both; margin-left: 10px; margin-right: 10px; line-height: 2.5em; } #blog-pager-newer-link { float: $startSide; } #blog-pager-older-link { float: $endSide; } #blog-pager { text-align: center; } /* Sidebar Content ———————————————– */ .sidebar { color: $sidebartextcolor; margin-left: 10px; margin-right: 10px; line-height: 1.5em; } .sidebar ul { list-style:none; margin:0 0 0; padding:0 0 0; } .sidebar li { margin:0; padding-top:0; padding-$endSide:0; padding-bottom:.25em; padding-$startSide:15px; text-indent:-25px; line-height:1.5em; } .sidebar .widget, .main .widget { border-bottom:1px dotted $bordercolor; margin:0 0 1.5em; padding:0 0 1.5em; } .main .Blog { border-bottom-width: 0; } /* Profile ———————————————– */ .profile-img { float: $startSide; margin-top: 0; margin-$endSide: 5px; margin-bottom: 5px; margin-$startSide: 0; padding: 4px; border: 1px solid $bordercolor; } .profile-data { margin:0; text-transform:uppercase; letter-spacing:.1em; font: $postfooterfont; color: $sidebarcolor; font-weight: bold; line-height: 1.6em; } .profile-datablock { margin:.5em 0 .5em; } .profile-textblock { margin: 0.5em 0; line-height: 1.6em; } .profile-link { font: $postfooterfont; text-transform: uppercase; letter-spacing: .1em; } /* Footer ———————————————– */ #footer { width:660px; clear:both; margin:0 auto; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; text-align: center; } ]]></b:skin> </head> <body> <div id='outer-wrapper'> <div id='wrap2'>  <a href='#main'>skip to main </a> | <a href='#sidebar'>skip to sidebar</a> <div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='Psychedelic Party (Header)' type='Header'/> </b:section> </div> <div id='content-wrapper'> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/> </div> <div id='main-wrapper'> <b:section class='main' id='main' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> <div id='sidebar-wrapper'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Profile2' locked='false' title='About Me' type='Profile'/> <b:widget id='BlogArchive2' locked='false' title='Blog Archive' type='BlogArchive'/> </b:section> </div> <div class='clear'> </div> </div>  <div id='footer-wrapper'> <b:section class='footer' id='footer'/> <a href='http://www.manilena.com'>designed by Manilena.com </a> </div> </div> </div>  </body> </html>

Tags: Blogger Template

This entry was posted on Thursday, December 11th, 2008 at 1:46 am and is filed under 3. DigiScraps, 9. Website Designs, 9.1.a. Green, 9.2 Two-Column. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.

Blogger Template 3 - Psychedelic Party

Leave a Reply