How to change Date header font on blogger.

8 comments
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.
change-Date-header-font

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. 
change-Date-header-font
  • 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 default="$(body.text.color)" description="Text Color" name="date.header.color" type="color" value="$(body.text.color)">
     <variable default="transparent" description="Background Color" name="date.header.background.color" type="color" value="transparent">
   </variable></variable></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.
change-Date-header-font
  • Now go to the Template> Customize>Advanced>Date header .You will get the option to change the font of Date header.

change-Date-header-font
  • Now select a font for you and check your blog.
If you like the post so share it.
by Ashwin Singh

Ashwin Singh is a blogger. He enjoys to write post and share tricks. He is a student. He is behind this blog.

Follow him @ Twitter | Facebook | Google Plus

8 comments:

  1. Nice i will try this on my blog www.newpcclub.blogspot.com

    ReplyDelete
  2. Tried this on my blog and it work wonders. Thanks!

    www.lepetticoat.blogspot.com

    ReplyDelete
  3. Thank you so much for this!

    ReplyDelete
  4. Thanks for commenting keep visiting!!!!!!

    ReplyDelete
  5. Thanks for teaching this. It's amazing. I tried so many other way but too complicated. Thank you so so much.

    ReplyDelete
  6. i did everything right and it uses under the advanced tab but the changes won't show on my blog. HELP please

    ReplyDelete
  7. Hello @jully , I can't understand your problem please explain me about "It uses under advanced tab" and you can leave you URL in comment .... and thanks to comment

    ReplyDelete

Note: only a member of this blog may post a comment.