7 Jan 2013

couch mode print story

Style blogspot blogger date header

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 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:
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.

0 comments:

Post a comment

Blogger Widgets