 |
How to Style Blogger Date Header? |
Style Blogger Date Header?
- Login Blogger Account
- Go to Template > Edit HTML
- Search for the Code Below
.date-header span
- Below that code you can see css styles like the code 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);
}
- You have to replace that 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;
}
Customize Blogger Date Header
- To Change Background Color replace #DDEDAA with the hex code of color you want.
- 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
- To Change Distance Between date and post, change the -190px value from margin-left
- Click Save Template
- Done!
Important Note: Date Header selecter vary from template to template. In case, if you are not able to customize date header with above method then maybe your template has deifferent date header code/selectors.