Change Post Date To Calender Icon In Blogger

Posted by Kendhin

Are you bored with the look of your date post? You can use this trick to make your blog more beautiful. This trick will explain "how to change posting date to a calender icon" like you see in my blog.This is free of charge, so don't worry.


I found this tweak or tutorial here. You can visit this blog as they provide great tweaks and tricks about blogger. This blog is owned by my indonesian friend, he is good at blog tweaking :)

Are you ready? Lets go!!

The first thing you have to do is change your "date header format" to mm.dd.yyyy (4.04.2008).

How to do this?

Go to your blogger account, then choose Setting --> Formatting, change "date header format" to (mm.dd.yyyy) then save your setting.

Next step is go to tabs Template --> Edit HTML. Don't forget to backup your template first. Click on a "Expand Widget Templates" check box. OK lets go to the harder part.

Step 1. Find this code <TITLE><data:blog.pageTitle/></TITLE> in your HTML and put the code below under it.

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://djyano.blogspot.com */
/*********************************/
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");
}
//]]>
</SCRIPT>

Step 2. Find this code:

.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}

if you can't found it try to find this:

h2.date-header {
margin:1.5em 0 .5em;
}

Step 3. Next step is put the below code under it.

.dateblock {
background: url("http://blogoholic.info/files/kalender/bluecalend.gif")
no-repeat;
width: 50px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}

.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}

.day {
color:#3366CC;
font-size: 19px;
width: 37px;
margin: 0 5px;

}

Code http://blogoholic.info/files/kalender/bluecalend.gif is the place for calender icon, you can change it with your own image or use my image below.

What to do is change the bold text with the pictures code below, for example, if you want to change it with red icon calender, just change bluecalend.gif with redcalend.gif.

Here is the icon images:

blackcalend.gif	blue2calend.gif	bluecalend.gif
greencalend.gif	orangecalend.gif	pinkcalend.gif
redcalend.gif	ungucalend.gif	yellowcalend.gif

Step 4. Find this code <data:post.dateHeader/>. The easy way to find it is by copying the code the press Ctrl-f then paste to the shown box, you will found the code immediately. If you didn't anything you can find it manually.

Change the code with the below script.

<DIV class='dateblock'> <SCRIPT> date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

Step 5. Save your settings, and see the result.

Enjoy your new date icon.

Related articles :

How to Create a “What’s Next?” After Every Post In Blogger

Top 10 Blogger Hacks and Tips

Creating Expandable Post

Add Digg button

Change Blogger Favicon

Add Language Translation

10 Questions Every Blogger

Hide Navigation Bar

Convince People To Comment

Put Clock In Your Blog

Add Social Bookmark Icons