Post Date Customization - Blogger SOS - Part II

I was very pleased with the response about my new blog layout.  I'm totally in love with it and I should tell you that I've worked on the layout for a while now.

Some days, I browse for hours, until inspiration strikes.  And it's not easy since I LOVE colors.  If I could integrate each and every color in my blog template, believe me, I would.  But anyway, remember (readers who've been reading since the beginning of The Mercurial Wife) the post Blogger SOS - Part I?  I know I said I would help anyone with template customization.  Again, I'm not really good at it but I try.

And today, I decided I would share one of the tricks I've used on this layout - the date header.  Have you noticed that it's not displayed the traditional way?  For months, I've been searching for the code and finally, I got it.  Before you try this hack, please do a back-up of your Blogger template (Click on Download Full Template)

1.  Log in on Blogger.
2.  Click on Design.
3.  Press Ctrl+f and search for

    ]]></b:skin> 

4.  Just above it, paste the following CSS code

.post-month { 
     background:#eee;
     float:left;
     font-size:15px;
     font-family:Verdana, Arial, Helvetica, sans-serif;
     text-align: center;
     width: 80px;
     height: 63px;
     color:#000;
     padding-top:5px;
     padding-bottom:0px;
     text-transform:uppercase;
     margin:-6px 7px 0 -10px;
}

.post-date {
    font-size:14px;
    font-weight:bold;
    text-align: center;
    color:#222;
}

.post-year{
    font-size:12px;
    font-weight:bold;
    text-align: center;
    color:#f0efeb;
}

5. Click on Save
6. Click on Expand Widget templates.
7. Ctrl+F and search for

<div class='post hentry'>

8. Paste the following just below it

<!-- calendar script-->
<div class='post-content'>
<div class='post-month'>
<script type='text/javascript'>
       var timestamp = &quot;<data:post.dateHeader/>&quot;;
       if (timestamp != &#39;&#39;) {
               var timesplit = timestamp.split(&quot;,&quot;);
               var date_yyyy = timesplit[2];
               var timesplit = timesplit[1].split(&quot; &quot;);
               var date_dd = timesplit[2];
               var date_mmm = timesplit[1].substring(0, 3);
       }
</script>
<script type='text/javascript'>document.write(date_mmm);</script>                <div class='post-date'><script type='text/javascript'>document.write(date_dd);</script></div>
<div class='post-year'><script type='text/javascript'>document.write(date_yyyy);</script>
</div>
</div></div>
<!-- end of cal script--> 

9. Save.
10. Ctrl+f and search for

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

11.  Replace with

<!--<h2 class='date-header'><span><data:post.dateHeader/></span></h2>-->

12.  Save.
13.  Go to date settings and select the third option - Monday, June 21, 2010.
14. Save and voila!

 You can edit the CSS section (see in red) to your heart's content! Any problems, let me know. ;p

Enjoy!