How to Change Date Header Font Style, Size, Color and Format in Blogger?

Want to customize date header of your blog but don’t know how to do it? If yes, then you’re in the right place.

In this article, I will show you how to customize the date header of your blog. I will include the steps on how to change the default values for date header font, size, color and format and replace it with your desired values.

The steps below involve editing your blog template’s HTML. No need to be savvy in HTML though. I made the steps easy to follow. I advise you download a back up of your template before applying any changes on it (Blogger – Template tab – Back Up/Restore).

Method #1 Via Advanced Tab

1. Login to Blogger.
2. Go to Template Tab – Customize – Advanced – Date Header
3. Choose your preferred font style, color and size.

Date Header | Blogger
4. Click Apply to Blog then check your blog.

If this method doesn’t work, jump to the next method below.


Method #2

1. Login to Blogger.
2. Go to Template tab – Edit HTML
3. Put a check mark on Expand Widget Templates
4. Find this code snippet (CTRL + F)


default=”normal normal 12px Verdana, Tahoma, Helvetica, FreeSans, sans-serif” value=”normal normal 12px Verdana, Tahoma, Helvetica, FreeSans, sans-serif”/>

5. If you want to change font size, change the highlighted numbers above  (Blue). Example: 20px

6. If you want to change font style, change the two font name highlighted above in Yellow. Example: Garamond

You can use any font style you want.

7. If you want to change font color, change the two hex code highlighted above in Violet. Remember to use hex code (6-digit number). You can go to this link to get the correct code of your desired color. Example: 2a9c3b (Green)

8. Click Save Template then check your blog.

If this method doesn’t work as well, follow the last solution below.


Method #3
1. Login to Blogger.
2. Go to Template tab – Edit HTML
3. Put a check mark on Expand Widget Templates box
4. Find this code (CTRL + F)

.main-inner .widget h2.date-header {
margin: 0 15px 1px;
padding: 0 0 0 0;
font: normal normal 15px Verdana, Tahoma, Helvetica, FreeSans, sans-serif;
color: #000000;

Can’t find it? You might be using a customized template which is not provided by Blogger. If that’s the case, check with the template designer what code snippet is necessary to edit the date header. If you download your blog template from a certain website, most probably it comes with a document or manual. You might find an instruction there on how to customize your blog template.

5. If you want to change font color, change the highlighted hex value (Blue) in step number 4.

6. If you want to change font size, change the highlighted px (pixel) value above in Violet.

7. If you want to change font style, replace the font name highlighted in Red.

8. Save your template then check your blog.


Note: If you want to change the date header format, you can edit it in Layout tab. Here’s how to do it:

1. In Blogger’s Layout tab, click Edit under Blog Posts.
2. In pop-up (Configure Blog Posts) window, find date format under Post Page Options.
3. Select your preferred date format from the drop down list.
4. Click Save button.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.