Blogger Tips
This can be a really cool addition to your blog which can be easily customized to suit your layout and design. What we are going to do in this tutorial is to change the Blogger date header background color with some simple CSS adjustments that will make the date header float on the left side of your post and be partially out of the structure, like a banner with a colorful appearance.
Step 2.Click anywhere inside the code area and search (CTRL + F) for the following code:
Step 3. You will need to replace the code above with this one:
- 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.
- Responsive Css Timeline With 3d Effect For Blogger
Here's another amazing way to display our Blogger posts. By applying the following Responsive CSS Timeline View with 3D Effect on Blogger Posts, we will have a responsive timeline-like structure of the most recent posts and their thumbnails, along...
- Using The :before And :after Pseudo Elements On Sidebar Titles
This is another method of using the :after and :before properties and it will work without too many problems in any browser, including IE8. What this trick will do is to divide the header bar into left and right sections, where the left will contain an...
- How To Make The Blogger Posts Have A Calendar For The Date In
It's quite common to see calendar style dates next to some WordPress posts but for the Blogger platform it isn't always easy adding it. But who said you can't do it? You need to look no further than this blog. In this tutorial, we'll learn...
- Free Blogger Template Coffee Desk
Coffee Desk, a free Blogger Blogspot template from Falcon Hive, is ideal for a personal blog. With its attractive 3 column layout, coffee cup header image, customized date feature, and notebook style post section the Coffee Desk Blogger theme is a stand...
- Publish Blogger Posts Past Or Future Date
Today I will be talking about how to set either a future date or past date on your Blogger posts (Blogspot posts). This Blogger feature is easy to use and comes in handy when you need to set a Blogger post date other than the current date. Last year sometime...
Blogger Tips
Style blogspot blogger date header
This can be a really cool addition to your blog which can be easily customized to suit your layout and design. What we are going to do in this tutorial is to change the Blogger date header background color with some simple CSS adjustments that will make the date header float on the left side of your post and be partially out of the structure, like a banner with a colorful appearance.
Customize the Date Header of a Blogger Blog
Step 1. Log in your Blogger account and go to Template > Edit HTMLStep 2.Click anywhere inside the code area and search (CTRL + F) for the following code:
.date-header spanBelow this code you should see some lines 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 3. You will need to replace the 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.
- Responsive Css Timeline With 3d Effect For Blogger
Here's another amazing way to display our Blogger posts. By applying the following Responsive CSS Timeline View with 3D Effect on Blogger Posts, we will have a responsive timeline-like structure of the most recent posts and their thumbnails, along...
- Using The :before And :after Pseudo Elements On Sidebar Titles
This is another method of using the :after and :before properties and it will work without too many problems in any browser, including IE8. What this trick will do is to divide the header bar into left and right sections, where the left will contain an...
- How To Make The Blogger Posts Have A Calendar For The Date In
It's quite common to see calendar style dates next to some WordPress posts but for the Blogger platform it isn't always easy adding it. But who said you can't do it? You need to look no further than this blog. In this tutorial, we'll learn...
- Free Blogger Template Coffee Desk
Coffee Desk, a free Blogger Blogspot template from Falcon Hive, is ideal for a personal blog. With its attractive 3 column layout, coffee cup header image, customized date feature, and notebook style post section the Coffee Desk Blogger theme is a stand...
- Publish Blogger Posts Past Or Future Date
Today I will be talking about how to set either a future date or past date on your Blogger posts (Blogspot posts). This Blogger feature is easy to use and comes in handy when you need to set a Blogger post date other than the current date. Last year sometime...