I got the inspiration to style and design blogspot date from a wordpress website and tried with very simple css adjustment to make the date header floats left side of webpage and to be partially out of the structure like a banner with colorful appearance. You can see the result in the image below:How to style the blogspot date headerStep 1. Login into your Blogger Dashboard, go to Design >> Edit HTMLStep 2. Check to Expand Blogger Template and search for the following code:
date.header
Or…
.date-header
You will find something similar:
.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. Add the code below just after 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, will look something like this:
.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);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 bolded tags for….the background color:#FFD465: replace with the hex code of the color you wantborder:
delete -bottom if you want full border
change: 2px to a higher or lower value
change: solid with dotted if you want a dotted line
change: #cc0000with the hex code of border color font size and date color:
if you want a bigger text, change: 12px to a higher valuecolor: replace the hex code (#000000) with the hex of date color
Example:color:#0000cc;margin-left: (the distance between date and blogger post)
change: -105px to a bigger or smaller value, to make it fit with the blogger postfloat
You can do a lot of changes. Just play with the codes and see what you can get.
