Customize the Blogger Date Header of a Blogspot Blog

 Date header-style into blogspot blogs

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

Customize the Blogger Date Header of a Blogspot Blog

Step 1. Log in your Blogger Dashboard, go to Template > Edit HTML (don't forget to make a back-up of your current template by clicking on the Backup/Restore button)

Step 2. Click anywhere inside the code area and search (CTRL + F) for the following code:

.date-header span

Below this code you should see a few lines like 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);
}

Screenshot

Step 3. You need to replace the 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;
}

Customization

- to change the background color of the date header, replace #DDEDAA with the hex code of your color
- to change the date font color, replace #444;
- to change the border color of the bigger circle below the date header, replace #FFBD54

- to change the border color of the smaller circle, replace #bada55

- to set the distance between date and post, change the -190px from margin-left

Step 4. Click on the Save template button to save the changes.
So this is how you can add a new style to the blogger posts date header. Please keep in mind that codes vary from template to template - if you're having a customized template, then you might have a different CSS selector for the date header.