How To Style Blogger Blog Date Header

Hello Blogger's today i am sharing a trick with you  on how to add cool CSS style to your BlogSpot blog date header.

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 Blogger Blog Date Header

Step 1: Login to blogger dashboard with your Email and password.

Step 2:  go to Template > Edit HTML
Step 3: Click anywhere inside the text area where the code is and search (using CTRL + F) for the following code:

.date-header span

Step 4: Below this you may find the code above

.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);
}

Step 5: Now replace this type of code with this

.date-header {
margin: 0px 0px -50px -190px;
}
.date-header span {
background-color: #DDEDb8;
color: #444;
padding: 16px;
border-radius: 70%;
border: 3px solid #aada22;
}
.date-header:before {
background: none repeat scroll 0 0 #FCFCFC;
border: 10px solid #dFBD54;
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 #F2F2F2;
border: 7px solid #bada55;
border-radius: 100%;
bottom: -17px;
content: "";
display: block;
height: 15px;
position: absolute;
width: 15px;
z-index: 10;
margin-left: 166px;
}

Step 6: Click on the Save template button to save the changes.

If you Want to customize colors you can change them in code yourself.

Happy Blogging !!!