How to Display Stylish Date Header in Blogger

How to Display Stylish Date Header in Blogger

Display Stylish Date Header in Blogger Blog.This is another Very Cool way to makes your Blog looks Perfect for your daily Blog Readers.This addition  of  Stylish Date header into
your Blogger/Blogspot can be very eye-catching for the visitors.Easily Display Stylish Date Header in your Blogger Blog.This is very easy to customize Date Header in a very stylish look easily.It will increase your Blog Design value and importance by displaying the Date header in a very perfect Stylish look.This is a Easy Way to Display Stylish Date Header in a Blogger Blog.

So in this Tutorial i will tell you How you can make Stylish Date Header in you Blogger/Blogspot. For this purpose you have to Change the Date Header Background color in your Blogger with some CSS codes that will display the Date Header in your Blog ,Float on the left side of your blogger post.This will makes the Appearance of your Blog more colorful .

Customize the Date Header of Blogge/Blogspot 

Step 1: Log in to your Blogger Account and click on your Blog from the "Dashboard".Then go to the "Template" and Hit on "Edit Template" button.

Step 2:Then Click any where in the Template and press (CTRL+F) and search for this code in your Blogger Template.
Code:

.date-header span

 Step 3: Once you will find this code their on the above this Code you will find some Lines in your Blogger template 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);
}

Step 4: Now you have to Replace these lines with this code that you find here.

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

 Now you have successfully make Stylish Date Header in your Blogger.So if you want to customize it look and change the Color of it then follow these instructions.

How to Customize the Date Header Color

The Red Highlighted Text #DDEDAA is the Background color of the Date Header ,if you want to change it with any other color then replace it with Hex Value of your Color.
If you want to change the color of the Fonts then simply Replace #444 code .
And if you wanna Change Border color of bigger circle below the date header then replace this Code #FFBD54. 
Changing the Border color of Green circle then Replace this one code #bada55.
At the end to change the Distance between the Post and the Date then simply change -190px value according to your need.

After Doing all process hit on "Save Template" to save the Setting into your Blogger.

Now you have successfully applied new stylish look to your Date Header in your Blogger/Blogspot.