Tuesday, June 22, 2010

Post Date Customization - Blogger SOS - Part II

Share
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!

14 comments:

Bruno said...

Kweeel :D Many people will like this :) A wife who codes :D

Johana Hill said...

Hahaha Bruno I try my best! A wife who cleans and codes...but doesn't cook! ;p

// krissy ♥ said...

Your layout is so pretty, it's like I don't want to leave anymore! :D

Harini said...

If you remember i said that i liked your previous template but now i think i m wrong. The more time i spend here the more i like it :).

Annah said...

I have always said I LOVE really plain and simple layouts. I LOVE THIS. I don't like all the flowers, butterflies and graphics all over the place. DRIVES ME CRAZY!

Kanwalful said...

You're so awesome Johana. I LOVE this template. I wish I could kidnap you and make you make me a new template everyday!

Also, I don't get this html shit. So I'll take the next hour understanding what you've written above and still not be able to do it =P

Leetid said...

Thanks for sharing!

Love the new layout.

MKL said...

OMG, you're as awesome like me ;) I spent so many hours to find a way how to make a second link bar below the one, that came with the template. Took me a while, but I'm persistent. And so are you :)

Carina the Blogarina said...

And how fun that you decided to stay with some pink ;)

Johana Hill said...

Thank you Krissy, Harini, Leetid and Annah. ;p

Kanwal I'll do another one for you as soon as I get free time and inspired! ;p

MKL Yes! I NEED to know...you know? ;p

Carina Pink is beautiful, eh? ;p

Gnetch said...

Ahhh!!! I love this! Thank you! I'll try to have a blog makeover this weekend!!!

ChinkyGirLMeL said...

I do need a blog makeover, but I'm staying away from all those codes. Last time I changed my blog layout everything disappeared. hehee

Lady Mel said...

Johanna, I am going to try your code on my blog. I think another blog makeover is in the making. Something with social media icons to the right of the page, but that's another story.

Guess what? I nominated you as one of my recipients of the Super Comments Award! Claim your reward on my blog. :)

<3

Christina Brown

Sweta said...

Oh!Absolutely ADORE the template.I love how you're a DIY girl too :) Can you bug you with some questions?


(please say yes,I have the bombs read ;)) Classy and pink and soothing=Le LOVE!

Post a Comment