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 = "<data:post.dateHeader/>"; if (timestamp != '') { var timesplit = timestamp.split(","); var date_yyyy = timesplit[2]; var timesplit = timesplit[1].split(" "); 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!