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