Style Blogspot Blogger Appointment Header

This tin live on a actually cool improver to your weblog which tin live on easily customized to suit your layout together with design. What nosotros are going to create inward this tutorial is to alter the Blogger appointment header background color amongst about uncomplicated CSS adjustments that volition brand the appointment header float on the left side of your postal service together with live on partially out of the structure, similar a banner amongst a colorful appearance.

Customize the Date Header of a Blogger Blog

Step 1. Log inward your Blogger account together with become to Template > Edit HTML

Step 2. Click anywhere within the code expanse together with search (CTRL + F) for the next CSS code:

.date-header span

Below this code you lot should meet about lines similar to these:

.date-header bridge {
  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. You volition take to supervene upon the CSS code inward a higher house amongst this one:

.date-header {
margin: 0px 0px -50px -190px;
}
.date-header bridge {
background-color: #DDEDAA;
color: #444;
padding: 16px;
border-radius: 70%;
border: 3px corporation #bada55;
}
.date-header:before {
background: none repeat scroll 0 0 #FCFCFC;
border: 10px corporation #FFBD54;
border-radius: 100%;
bottom: -50px;
content: "";
display: block;
height: 30px;
position: absolute;
width: 30px;
z-index: 10;
margin-left: 140px;
}
.date-header:after {
background: none repeat scroll 0 0 #F9F9F9;
border: 7px corporation #bada55;
border-radius: 100%;
bottom: -17px;
content: "";
display: block;
height: 15px;
position: absolute;
width: 15px;
z-index: 10;
margin-left: 166px;
}

How to Customize the Date Header

To alter the:
- background color, replace #DDEDAA with the hex code of your color
- font color, supervene upon #444
- edge color of the bigger circle below the appointment header, replace #FFBD54
- edge color of the dark-green circle, supervene upon #bada55
- distance betwixt appointment together with post, alter the -190px value from margin-left

Step 4. Click the "Save template" push to relieve the changes. That's it!

Now you've applied a novel agency to the appointment header of your Blogger posts. Please complaint that codes vary from template to template together with if you lot convey a custom template, in that location powerfulness live on a unlike CSS selector for the appointment header.