Style blogspot blogger date header

Tweet

To change your blog's date header color and font style, you can do it with a very simple CSS adjustment that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance. See the result in the image below: How to do it Step 1. Login into your Blogger Dashboard, select Template option > click on Edit HTML  Step 2. Select Expand Blogger Template and search (CTRL + F) for the following code: date.header Or... .date-header Step 3. Add the following code snippet just below of it background:white; border-bottom: 1px solid #000000; font-size:12px; margin-left:-105px; padding:3px 3px 3px 3px; width:90px; word-wrap:break-word; float:left; } Putting it all together, it should look something like this: .date-header span { background:#FFD465; border-bottom: 2px solid #cc0000; color:#000000; font-size:12px; margin-left:-105px; padding:3px 3px 3px 3px; width:90px; word-wrap:break-word; float:left;} To modify the style, replace the above bold/colored codes... to change the background color: #FFD465: replace with the hex code of the color you want to change the border style: delete -bottom if you want border all around change: 2px to a higher or lower value change: solid with dotted if you want a dotted line change:  #cc0000 with the hex code of border color to change the font size and date color: for a bigger text, change: 12px to a higher value color: replace the hex code (#000000) with the hex of date color Example: color: #0000cc; to change margin-left: (represents the distance between date and blogger post) replace -105px with a bigger/smaller value float: change left to right

To change your blog's date header color and font style, you can do it with a very simple CSS adjustment that will make the date header to float on the left side of your post and to be partially out of the structure like a banner with a colorful appearance.
See the result in the image below:

How to do it

Step 1. Login into your Blogger Dashboard, select Template option > click on Edit HTML 

Step 2. Select Expand Blogger Template and search (CTRL + F) for the following code:

date.header

Or...

.date-header

Step 3. Add the following code snippet just below of it

background:white;
border-bottom: 1px solid #000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;
}

Putting it all together, it should look something like this:

.date-header span {
background:#FFD465;
border-bottom: 2px solid #cc0000;
color:#000000;
font-size:12px;
margin-left:-105px;
padding:3px 3px 3px 3px;
width:90px;
word-wrap:break-word;
float:left;}

To modify the style, replace the above bold/colored codes...

to change the background color:

• #FFD465: replace with the hex code of the color you want

to change the border style:

• delete -bottom if you want border all around
• change: 2px to a higher or lower value
• change: solid with dotted if you want a dotted line
• change:  #cc0000 with the hex code of border color

to change the font size and date color:

• for a bigger text, change: 12px to a higher value
• color: replace the hex code (#000000) with the hex of date color

Example:

color: #0000cc;

to change margin-left:
(represents the distance between date and blogger post)

• replace -105px with a bigger/smaller value

float:

• change left to right