Style and design blogspot blogger date header easily

I have applied a simple code to design the look of blogspot date header.

By default blogspot date header is very dull looking and simple.I got the inspiration to style and design blogspot date header display from a wordpress website and tried with very simple css adjustment,it worked nicely.

I wanted blogspot date header be float left side of webpage and be partially out of the structure like a banner with colorful appearance.Instead of its position above the post title.

How to style the blogspot date header

• The main adjustment is done by negative margin.
• Then the width is important,as it tends to take the whole area.
• Background and text color.

1.Blogspot date header without design

2.Blogspot date header with design

3.Apply a simple CSS to style blogspot date header

1. Open edit html of blogspot template.
2. Backup template.
3. Look for date.header,press ctrl+f and find.
4. Add some simple css with existing code.Colored red below.
5. Watch the preview.
6. Adjust width if you use different date option.

h2.date-header
{
display:block;
font-weight:normal;
font: $(widget.title.font);
color:white;
border:none;
font-size:1em;
background:red;
margin-left:-70px;
padding:3px 3px 3px 3px;
width:40px;
word-wrap:break-word;
float:left;
}