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'>
/* http://djyano.blogspot.com */
function date_replace(date) {
var da = date.split('.');
var day = da[1], mon = da[0], year = da[2];
var month =
document.write("<div class='month'>"+month[mon]+"</div> <div class='day'>"+day+"</div>");

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")
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 {
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:


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.Digg my article

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


    4 comments to "Change Post Date To Calender Icon In Blogger"

    Brazen Lass said...
    October 22, 2008 at 4:20 PM

    thanks for sharing!

    zujoe said...
    February 2, 2009 at 6:15 PM

    Thanks infonya ya...aku dah beberapa kali coba tapi gagal mulu, pas aku baca postingannya mas baru berhasil. Tengkyu ya...btw bisa tukeran link ga?

    Peter said...
    February 21, 2009 at 10:49 AM

    Nope, I couldn't find the last bit of code. Any thoughts?

    Nesomn said...
    May 27, 2009 at 3:19 PM

    Hi, thanks for sharing. Everything worked fine but one thing: when I open the Comments box the date disappears from the date icon. Can you help please?

    Post a Comment