Style blogspot blogger date header

This can be a really cool addition to your blog which can be easily customized to suit your layout and design. What we are going to do in this tutorial is to change the Blogger date header background color with some simple CSS adjustments that will make the date header float on the left side of your post and be partially out of the structure, like a banner with a colorful appearance.

stylish blogger date header

Customize the Date Header of a Blogger Blog

Step 1. Log in your Blogger account and go to Template > Edit HTML


Step 2. Click anywhere inside the code area and search (CTRL + F) for the following CSS code:
.date-header span
Below this code you should see some lines similar to these:
.date-header span {
  background-color: $(date.header.background.color);
  color: $(date.header.color);
  padding: $(date.header.padding);
  letter-spacing: $(date.header.letterspacing);
  margin: $(date.header.margin);
}

date header, blogger

Step 3. You will need to replace the CSS code above with this one:
.date-header {
margin: 0px 0px -50px -190px;
}
.date-header span {
background-color: #DDEDAA;
color: #444;
padding: 16px;
border-radius: 70%;
border: 3px solid #bada55;
}
.date-header:before {
background: none repeat scroll 0 0 #FCFCFC;
border: 10px solid #FFBD54;
border-radius: 100%;
bottom: -50px;
content: "";
display: block;
height: 30px;
position: absolute;
width: 30px;
z-index: 10;
margin-left: 140px;
}
.date-header:after {
background: none repeat scroll 0 0 #F9F9F9;
border: 7px solid #bada55;
border-radius: 100%;
bottom: -17px;
content: "";
display: block;
height: 15px;
position: absolute;
width: 15px;
z-index: 10;
margin-left: 166px;
}

How to Customize the Date Header

To change the:
- background color, replace #DDEDAA with the hex code of your color
- font color, replace #444
- border color of the bigger circle below the date header, replace #FFBD54
- border color of the green circle, replace #bada55
- distance between date and post, change the -190px value from margin-left

Step 4. Click the "Save template" button to save the changes. That's it!

Now you've applied a new style to the date header of your Blogger posts. Please note that codes vary from template to template and if you have a custom template, there might be a different CSS selector for the date header.

7 comments:

  1. Thanks for the great tutorial! Is there anyway to put an image behind the date and time stamp rather than a colour? Thanks!

    ReplyDelete
  2. Hi! Can you help me with my blog? I'm new and I want to design it to make it look better. Please help me.

    What can I do to make my blog look better?

    http://biancayzabelle.blogspot.com

    ReplyDelete
  3. iwant to remove date header from above post title as i have tweaked it to show below title now it is showing on two places http://ptetech.blogspot.com

    ReplyDelete
  4. awsome thank you so much

    ReplyDelete
  5. It's still in words. I want it to be like this "1/30/2013"

    ReplyDelete
  6. Thanks so much for your useful tip

    ReplyDelete