How To Stylize Date Header in Blogger

If you ever wanted to add a unique style on your blog’s date header then today’s tutorial’s just for you. Courtesy of Ataul (from Free Blogging Tricks), this tutorial will teach you how to change your posts’ date header’s color and font style. It’s actually pretty simple as it only involves adding a few lines of CSS code and a bit of editing as well to make any desired adjustments or changes to the attributes.
By the time you’re finished, your new customized date header will be displayed floating on the left side of your post and partially out of the structure like a banner.
So how do you do it? Follow the instructions below.

• Log in to your Blogger dashboard and head over to the ‘Template’ page.
• NOTE: Before you continue, it’d be best to backup your template first. You can do so by clicking on the ‘Backup / Restore’ button on the upper right corner of your screen while you’re on the ‘Template’ page.
• Click on ‘Edit HTML’
• Using ‘Ctrl+F’, search for .date-header (or date.header)
• Copy/paste the code below right after it:

background:white;

 border-bottom: 1px solid #000000;

 font-size:12px;

 margin-left:<strong>-</strong>105px;

 padding:3px 3px 3px 3px;

 width:90px;

 word-wrap:break-word;

 float:left;

 }    

It should then look something like this:

 .date-header span {

 background:<strong>#FFD465</strong>;

 border-bottom: <strong>2px solid #cc0000</strong>;

 color:<strong>#000000</strong>;

 font-size:<strong>12px</strong>;

 margin-left:<strong>-105px</strong>;

 padding:3px 3px 3px 3px;

 width:90px;

 word-wrap:break-word;

 float:<strong>left</strong>;}   

To customize the style according to your preference, replace the highlighted portions of the code.

To change the background, change #FFD465

To change the border style:

Delete –bottom if you want border all around.

Change 2px to a higher value for thicker border.

Change solid to dotted, if want a dotted line.

Change #cc0000 with hex code of your preferred border color.

To increase/decrease the distance between the date and blog post, change -105px to a higher/lower value.

To adjust float, change left to right.

And that’s it! You’re done.