|

Style blogspot blogger date header

I got the inspiration to style and design blogspot date from a wordpress

website and tried with ver…

http://www.alychitech.com/2013/01/style-blogspot-blogger-date-header_2.html

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:

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 ;

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

Example:

color: #0000cc;

(the distance between date and blogger post)

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

?