Using Calendar Icon As A Post Date Header For Blogger

It's quite common to see calendar style post dates on some several other blog/website around the web. If bored with your default format of the post date style and want to give some spice and add little beauty to a blog/website. But however it is now possible before for the blogger platform. You don’t have to look much further from this blog. And if you don't have it and wish to give a good look and feel to your blog post date then grab it here. I am sharing twenty (25) awesome calendar icons with you all to choose the best that suits your blog/website.

In this tutorial, I will show you how to put a calendar style icon date to your Blogger posts date header.

LIVE DEMO

How to Put Calendar Icon as a Post Date Header in Blogger?

You can choose any of the icons below just right click on the calendar icon to download and host it from your blog itself or you can use the default link below snippet. 

    

    

    

For adding the calendar style to our blog date header, we should firstly setup the displaying for the date. Log in into your Blogger>Dashboard then move to Settings>Language and formatting - Date Header Format and change the date format as you can see below image:

STEP #1: Log on to Blogger

STEP #2: Go to Dashboard>Template

STEP #3: Click on Edit HTML>Proceed

STEP #4: Tick on Expanded Template Widget check box

STEP #5: Take a Backup your template

STEP #6: Find (Ctrl + f) for the code below

<h2 class='date-header'><span><data:post.dateHeader/></span></h2>

STEP #7:  If you find it twice, replace it twice with the below code

<div id='Date'>

<script>changeDate(&#39;<data:post.dateHeader/>&#39;);</script>

</div>

<b:else/>

<div id='Date'>

<script>changeDate(&#39;&#39;);</script>

</div>

STEP #8: Now add the following code just above </head> tag.

<script type='text/javascript'>

//<![CDATA[

var DateCalendar;

function changeDate(d){

if (d == "") {

d = DateCalendar;

}

var da = d.split(' ');

day = "<strong class='date_day'>"+da[0]+"</strong>";

month = "<strong class='date_month'>"+da[1].slice(0,3)+"</strong>";

year = "<strong class='date_year'>"+da[2]+"</strong>";

document.write(month+day+year);

DateCalendar = d;

}

//]]>

</script>

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>

<style type='text/css'>

/* Calendar style date

----------------------------------------------- */

#Date {

background: transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEge6YHv78F3PE4fkMx2AIyKu2zeOQWiBaTZPzb5BI3V0onVAZBUvpU3_UxIyTKkAg7e8xbhTJKRszrhTsyXiz0lmGG5PDzUxjRCDl16xBluQdxfDh2DAFl3_d5C3NAhSxW-yWAQu9l4IkRM/s61/blue4.png) no-repeat;

display: block;

width:60px;

height:60px;

float: left;

margin: 15px 2px 0 -108px;

padding: 0 0 8px 0px;

border: 0;

text-transform: uppercase;

}

.date_month {

display: block;

font-size: 15px;

font-weight:bold;

margin-top:-1px;

text-align:center;

color:#ffffff; /* Month's color */

}

.date_day {

display: block;

font-size: 28px;

font-weight:bold;

margin-top:-8px;

text-align:center;

color:#282828; /* Day's color */

}

.date_year {

display: block;

font-size: 10px;

margin-top:-8px;

text-align:center;

color:#282828; /* Year's color */

}

</style>

</b:if>

How to Customize

• To change the calendar icon style, replace the URL in BLUE.
• If the calendar doesn't appear correctly, change -108 with 0;
• You can change the color of the dates by changing the values in YELLOW.

STEP #8: Now click on Save template and take a Preview of your template and if everything goes OK then click on Close button and it’s done.

So execute steps correctly and you are done. Head to your blog and check the trick executed. So don't forget us. We will only survive with your generosity. Like, Share, Follow and Subscribe. If you are facing any problem with implementing these codes just comment below for help. Stay tuned for more posts.

Tweet

Comments

• share ▼
  • tweet
  • share
  • comment
  • plus
• subscribe ▼
  • rss
  • newsletter
  • faq
• connect ▼
  • follow
  • fan page
  • youtube
  • google