SEO Tips and all things Blogging

Style blogspot blogger date header

S

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:

blogger
How to style the blogspot date header

Step 1. Login into your Blogger Dashboard, go to Design >> Edit HTML
Step 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 want

border:

  • 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:  #cc0000 with the hex code of border color

font size and date color:

  • if you want a bigger text, change: 12px to a higher value
  • color: 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 post

float

  • change left to right

You can do a lot of changes. Just play with the codes and see what you can get.

1 comment

By domdom rung
SEO Tips and all things Blogging

Subscribe to Blog via Email

Enter your email address to subscribe to this blog and receive notifications of new posts by email.

Categories

Recent Posts

Recent Comments

Archives