How To Make Blogger Blog Date Header Stylish

{tocify} $title={Table of Contents}

In this tutorial, we are going to see how can we make the style of blogger blog date header stylish. This hack is awesome. By this hack, your blog will look more professional. This hack will make the date header float on left the side of the post like a banner with colorful appearance. It is very easy to customize. This is the best way to make your blog design fit for your daily visitors. So, let's start implementing it into our blog.

Steps To Make Blogger Blog Date Header Stylish

Step 1: Login to your Blogger Dashboard and go to "Template" And hit "Edit HTML".

Step 2: Click anywhere inside the template code and press Ctrl + F keys to open the search box.


Step 3: Now search for the code given below:

.date-header span

Note:- Date Header code varies from template to template. If you use custom blogger template, it might vary.

Step 4: When you will find the code then you will see other codes like given below:

.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 the above code with the code given below:

.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:-

Change the #DDEDAA with your own hex color code if you want to customize background color of the date header

Change the #444 if you want to customize the color of the fonts

Change the #FFBD54 if you want to change the border color of the circle

Change the #bada55 if you want to customize the border color green circle

Change the 190px to your own value if you want to change distance between the date and the post

Wrapping Up

Now you have applied a new style to make the date header of the blogger blog stylish. And I hope you liked the post. If there is a problem don't forget to comment down and Happy Blogging:-)