Create An Awesome Date Header For Blogger

Everyone want to make their website look pretty attractive and good.So we must take care of each elements and widgets in our website to up to the mark.And date header also contribute to our website's pretty.So this post will help you to make a good looking date header for your website.

How to Create A Awesome Date Header for Blogger

1)Open your blogger account

2)Go to template tab.

3)Click on edit HTML as shown below

4)Click inside the code area and press ctrl + f to find within.There search for

.date-header span

5)Then find these lines.

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

6):Replace those codes by the below codes. 

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

}

Done !. Now click on 'Save Template'.

CUSTOMISATION:

• To Change Background color, replace #DDEDAA with the code of your color
• To Change font color, replace #444
• To Change border color of the bigger circle below the date header, replace #FFBD54
• To Change border color of the green circle, replace #bada55