Blogger Templates, Part 1

May 10, 2008

I had been missing from the website design scene for a long time now and it was quite a struggle to come back and do Blogger templates. I scratched about a couple of designs since they all didn’t feel right. Since I’ve moved to WordPress, I haven’t really been aware of the many changes Blogger has done with they way they do templates and so I had to relearn those tricks. But like riding a bicycle, you don’t really forget everything alltogether.

I’m going back to what this website was originally supposed to offer – website designs.

This is the first one:

13 Months of Sunshine is also a fluid 2-column, white background template. It’s also Firefox and IE-friendly.

You can view the live demo here

Highlight the XML code in the box, copy and replace your current XML template 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[/* *********************************************** Template Name: 13 Months of Sunshine Designer: Manilena Dot Com http://www.manilena.com *********************************************** */ * { margin: 0px; padding: 0px;} body { background: #ffffff; margin: 0px; padding: 0px; font: x-small Georgia, Serif; color: #000000; font-size/* */:/**/small; font-size: /**/small; } a img { border-width:0; } #container a:link { color:#3c7ad1; text-decoration:none; } #container a:visited { color:#3c7ad1; text-decoration:none; } #container a:hover { color:#004685; text-decoration:dotted; } #container a img { margin:3px; padding: 2px; } /* Whole Page Settings */ #container { background: url("http://img230.imageshack.us/img230/1888/13monthstitlezy5.jpg") no-repeat top left; width: 98%; margin: 0px; padding: 0px; text-align:left; } #post-part { margin: 10px; word-wrap: break-word; overflow: hidden; } #entry-part { margin:0; padding:0; } #sidebar-container { width: 350px; float: left; padding: 0px; word-wrap: break-word; overflow: hidden; } #sidebar { font-family: Tahoma; background: #ffffff; width: 285px; font-size: 11px; margin: 0px; padding: 10px 20px; } /* Header Settings */ #header { width: 770px; height: 385px; margin: 0px; padding: 0px; text-align: center; } .Header h1 { width: 350px; margin:0px 0px 0px 385px; text-align: center; padding: 65px 0 0 0px; color:#fc5106; line-height: 1.0em;; font-size: 50px; font-weight: bold; font-family: Curlz MT, Cursive, Fantasy; } .Header h1 a:link, .Header h1 a:visited { color:#fb3200; text-decoration:none; } .Header h1 a:hover { color:#ffc300; } .Header .description { width: 300px; margin:0px 0px 0px 435px; padding: 2px 0px; font-size: 15px; color: #fc5106; font-weight: bold; } h2 { margin:1.5em 0 .75em; line-height: 1.4em; } /* Entries */ h2.date-header { background: url('http://img123.imageshack.us/img123/8826/13monthsdatemf1.gif') no-repeat top left; padding: 12px 0px 0px 38px; font-weight: bold; font-family: Arial; text-transform: uppercase; margin: 0px; height: 36px; font-size: 11px; text-align: left; color: #000000; } .post { margin:.5em 0 1.5em; } .post h3 { background: #122456; border-bottom: 1px solid #70664f; margin: 0px; padding: 8px; font-family: Georgia; font-size: 20px; font-weight: normal; color:#ffffff; } .post h3 a, .post h3 strong { display:block; font-weight:bold; text-decoration:none; color:#ffffff; } .post-body { font-family: Tahoma; padding-top:12px; font-size: 11px; text-align: justify; } .post p { margin:0 0 .75em;line-height:1.6em; } .post-footer { background: #8bb0ff; color:#ffffff; margin:5px 0px 5px 0px; line-height: 13px; border-bottom: 1px solid #326101; padding: 2px 9px; } .comment-link { margin-left:.4em; } .post-footer .post-timestamp, post-footer .post-author { color:#ffffff; } .comment-link strong { font-size:130%; } .comment-link { margin-left:.4em; } .post img { padding:4px; border: 2px dotted #96b8ff; } /* Comments */ #comments { padding: 8px; background: #e9f69e; } #comments h4 { margin:1em 0; font-weight: bold; line-height: 1.6em; text-transform:uppercase; letter-spacing:.2em; color: #446e02; font: bold 78% Georgia Serif; } #comments h4 strong { font-size:130%; } #comments-block { margin:1em 0 1.5em;line-height:1.4em; padding: 3px; border-top: 1px solid #fff; } #comments-block dt { margin:6px 0px; } #comments-block dd { margin:.25em 20px 0; } #comments-block dd.comment-timestamp { margin:-.25em 20px 1.5em; line-height: 1.4em; text-transform:uppercase; letter-spacing:.1em; } #comments-block dd p { margin:0 0 .75em; } .deleted-comment { font-style:italic; color:gray; } .feed-links { background: url('http://img131.imageshack.us/img131/390/13monthsfootjv9.gif') no-repeat top left; height: 35px; font-family: Georgia; font-size: 12px; padding: 10px 0px 0px 35px; text-align: left; margin: 5px 0px; } #blog-pager-newer-link { float: left; } #blog-pager-older-link { float: right; } #blog-pager { background: #f1f5ff; padding: 6px; text-align: center; } .comment-footer { font: 78%/1.4em Georgia , Serif; } /* Sidebar Settings */ .sidebar h2 { color:#4782dc; font-size: 11px; padding: 0px; font-family: Georgia; margin: 0px; border-bottom: 1px solid #70664f; } .sidebar .widget, .entry-part .widget { color:#666; font-size: 11px; margin: 0px; padding: 10px 20px; } .entry-part .Blog { padding: 0px 20px; margin: 0px; } .sidebar ul { font-size: 11px; list-style:none; margin: 2px 3px; padding: 0px; } .sidebar li { margin:2px 3px; padding: 4px 0px; font-size: 11px; border-bottom: 1px solid #dbd6c8; } .sidebar p { color:#666; line-height:1.5em; } /* About */ .profile-datablock { margin:.5em 0 .5em; } .profile-data { margin:0; font-weight: bold; line-height: 1.6em; text-transform:uppercase; letter-spacing:.1em; } .profile-img { float: right; margin: 0px 6px; padding: 2px; border: 2px dotted #fff199; } .profile-textblock { margin:.5em 0 .5em; } .profile-link { font:78%/1.4em Georgia,Serif; text-transform:uppercase; letter-spacing:.1em; } /* Footer */ #footer-wrapper { background: #122456; width:100%; color: #ffffff; font-size: 10px; margin:0px; padding:20px 0px; text-align: center; clear: both; } #footer-wrapper p { margin: 5px 25px; } #footer-wrapper p a:link, #footer-wrapper p a:visited { color: #ffffff; } ]]></b:skin> </head> <body> <div id='container'> <b:section class='header' id='header' maxwidgets='1'> <b:widget id='Header1' locked='true' title='13 Months of Sunshine (Header)' type='Header'/> </b:section> <div id='crosscol-wrapper' style='text-align:center'> <b:section class='crosscol' id='crosscol' showaddelement='no'/> </div> <div id='sidebar-container'> <b:section class='sidebar' id='sidebar' preferred='yes'> <b:widget id='Profile1' locked='false' title='About Me' type='Profile'/> <b:widget id='LinkList1' locked='false' title='Blogroll' type='LinkList'/> <b:widget id='BlogArchive1' locked='false' title='Previous Posts' type='BlogArchive'/> </b:section> </div> <div id='post-part'> <b:section class='entry-part' id='entry-part' showaddelement='no'> <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/> </b:section> </div> </div> <div id='footer-wrapper'> Template Designed by <a href='http://www.manilena.com'>Manilena Dot Com</a> </div> </body></html>

Posted in Cooking Wonders, Website Design - Two-Column, Website Design - White, Website Designs |

Tags: Blogger Templates

Red:

May 11, 2008 at 9:26 am

do you have any black background template? its supposedly economical and earth-friendly. thanks…

Earth-friendly, red?? Really?? Wow, I didnt know that. Yup, I’ve got one in the making right now. I’ll be posting it soon.

hazel:

May 12, 2008 at 6:54 am

yehey, your templates are back! i actually missed them while revamping my blog a while back.

YEP, YEP, Hazel, they’re back!! I’m really planning on really going full-steam ahead with them this time.

Jet:

May 30, 2008 at 11:23 pm

I love the 13 months of sunshine! hmmm…

hehehe.. bakit napapa-hmmmm ka dyan, ateng?

kharen:

June 4, 2008 at 12:19 pm

how and where can i view your creations from the very beginning you made an superb templates?

Hi Kharen,

I took out all the blogger templates I used to do. They don’t fit the new blogspot technology anymore. But I’m making new ones. You can view my past templates here:

http://www.manilena.com/website-designs/a-new-template-and-every-other-one/

Hope everything is fine with you