I always said that a blog or website will get more traffic and high search ranking if it able to attract the visitors. The most successful way to attract visitors is by the content of the site. After that the design of the also play important role to attract visitors. In blogger you can customize almost everything to make it more attractive. Today I gonna show how to customize Blogger Date Header.
By default Blogger has a date header and it located at the below of post title. You can hide the date header from here Layout > Blog Posts > Edit and then Uncheck the date option. If you want to show it again then Check the date option. Normally it shows in a line. And found it very traditional. That why I am sharing this post. If you think so, then lets see how to customize it.
After this customization will add cool looks to the date header. And it can easily be customized to suit your blog layout design. Basically by this customization we will change the background color of Blogger date header with a simple CSS adjustment. As a result the date header will float on the left side of the post and be partially out of the structure. It will like the below image...
Customizing The Blogger Date Header:
Extra Tips: To change the color code of the above code you can use this below...
By default Blogger has a date header and it located at the below of post title. You can hide the date header from here Layout > Blog Posts > Edit and then Uncheck the date option. If you want to show it again then Check the date option. Normally it shows in a line. And found it very traditional. That why I am sharing this post. If you think so, then lets see how to customize it.
After this customization will add cool looks to the date header. And it can easily be customized to suit your blog layout design. Basically by this customization we will change the background color of Blogger date header with a simple CSS adjustment. As a result the date header will float on the left side of the post and be partially out of the structure. It will like the below image...
Customizing The Blogger Date Header:
- First Sign Into your Blogger Account and go to Dashboard.
- Then click on Template option and click Edit HTML button. You will land the HTML page.
- Then in the HTML page find .date-header span and select following code including it. Take a look at the below image.
| .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);} |
- Now Replace the above code with the following code.
- Then click on Save Template button to apply it.
| .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:
- To change the Background color, Replace #DDEDAA with your desired code.
- To change the font color, Replace #444
- To change the border color of the bigger round circle, Replace #FFBD54
- To change the border of the Green circle, Replace #bada55
Extra Tips: To change the color code of the above code you can use this below...
Stay with www.iTTimebd.com for more IT related Post
No comments:
Post a Comment