How to change Date header font on blogger.

Changing font of Date header on blogger will help you to make your blog more professional an decent.Your blog will look different than other blogs at Internet.

Your Date and post font will look different.This is a small an easy trick just you need to do some change to your blog.You can do this in 2 part.For preview look at my date header.

How to change

1st Part

• First Back up your template. 

• Now go to Template>Edit HTML and click on proceed.
• Now find this code"date-header".Press Ctrl+F to find.

You will find something like this.

<Group description="Date Header" selector=".date-header">

     <Variable name="date.header.color" description="Text Color" type="color"

         default="$(body.text.color)" value="$(body.text.color)"/>

     <Variable name="date.header.background.color" description="Background Color" type="color"

         default="transparent" value="transparent"/>

   </Group>

• Now replace the above code in red part with this green code code.

<Group description="Date Header" selector=".date-header">

     <Variable name="date.header.color" description="Text Color" type="color"

         default="$(body.text.color)" value="$(body.text.color)"/>

     <Variable name="date.header.background.color" description="Background Color" type="color"

         default="transparent" value="transparent"/>

 <Variable name="date.header.font" description="Font" type="font"

         default="normal normal 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif" value="normal normal 11px Arial, Tahoma, Helvetica, FreeSans, sans-serif"/>

   </Group>  

---

2nd part

• Now find again this code "date-header span { ".You will find 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);

}

• Now replace upper blue code with down orange code.

.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);

font: $(date.header.font);

}

h2.date-header { 

  padding-top: 10px;

}

• Now just click on save button.

• Now go to the Template> Customize>Advanced>Date header .You will get the option to change the font of Date header.

• Now select a font for you and check you blog.

If you like the post so share it.