![how to customize blogspot blogger date header stylish blogger date header](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi9_mbYgGcNVfZ5ieKTatKTl5F7ed_SmUegtHc3Lsg1AP9rwWaYB-UemPWrYhoYlaCe3a7I0V1JcCYhHHiDkwpyaTA_QcwriDgLZTd7C7kco48S4lzsR6kvsi4PdkophJcu06sf7UPPBlN_/s1600/blogger-date-header-style.png)
Customize the Date Header of a Blogger Blog
Step 1. Log in your Blogger account and go to Template > Edit HTML![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhIDJ_m9Vb0H-6h2cYOSZQeSb7ddFU1Djv32oL7cig9x0tF0g554VKqwvk_ICtdvUi8CJqlTWgjQLn90hd2o1XUbnEmpaQugCaMrgb2T9e9LqgeGD8Go32TP9gntrXM-50i_LVDua7eAmp9/s1600/remove-blogger-labels.png)
Step 2. Click anywhere inside the code area and search (CTRL + F) for the following CSS code:
.date-header spanBelow this code you should see some lines similar to 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);
}
![how to customize blogger date header date header, blogger](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEggr0FbDmU5O2fCBb4T27MAr9-C0Ls9zGpF99pIF0Th9NYcuxz-h17i9y6WByfVxh2jPWKcSh6sqaZeYVTOrIdbkTKn2NClrH7m5Alh7TTUOzqDTdl2cPifC-4YQR_OmjMUhfdAnB_Rsm50/s1600/blogger-date.png)
Step 3. You will need to replace the CSS code above with this one:
.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;
}
How to Customize the Date Header
To change the:- background color, replace #DDEDAA with the hex code of your color
- font color, replace #444
- border color of the bigger circle below the date header, replace #FFBD54
- border color of the green circle, replace #bada55
- distance between date and post, change the -190px value from margin-left
Step 4. Click the "Save template" button to save the changes. That's it!
Now you've applied a new style to the date header of your Blogger posts. Please note that codes vary from template to template and if you have a custom template, there might be a different CSS selector for the date header.
No comments:
Post a Comment