Home » Blogger Tutorials, Tricks and Hacks » Blogger Graphics / Effects Tricks » How To Stylize Date Header in Blogger

Welcome to our AllBlogTools.com v.3 new version, We are still in beta, please contact us to report an error.

|| View All Tutorials ||

How To Stylize Date Header in Blogger

How To Stylize Date Header in Blogger

1 Star2 Stars3 Stars4 Stars5 Stars

Report Error

543 views

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.

Liked It ? Please Share

Comments

One Response | Post A Comment | Subscribe To Comments RSS Feed

  1. Cassandra says:

    I see a lot of interesting articles on your website. You have to spend
    a lot of time writing, i know how to save you a lot of
    work, there is a tool that creates unique, SEO friendly posts in couple
    of minutes, just search in google – k2 unlimited content

Comments will be closed off on this post 365 days (1 year) after it is published. Apologies to this, but it's all about avoiding a growing comment spam problem. See our most recent posts where you can comment here