Blogger Tips: Change Post Date Become Calendar Icon

My first tweak in this blogger template is changing the post date become calendar icon.
When you start blogging with blogger, and enable the header post-date function, you should aware of the post date return by "<data:post.dateHeader/>" function of blogger would be like this :

• 8/16/2009
• 8.16.2009
• 16.8.09
• August 16, 2009
• or the complete list :

Bored with those "default" format of the post date function ?
And want some nice calendar icon to replace the normal format of your post date function ?
Here is the final result of your calendar icon would be :

Ok, let me explain the steps :

1. The first thing you have to do is change your "date header format" to become mm/dd/yyyy (8/16/2009). How to do this? go to your blogger account, then chose "Setting --> Formatting, change "date header format" to become what I said before (mm/dd/yyyy) then save your setting.

2. 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 deep trick.

3. Find this code <TITLE><data:blog.pageTitle/></TITLE> in your HTML. If you found it, put the code below under it :
<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* author: Hary Purnomo
/* notes: change your blog date setting into mm/dd/yyyy
/* please do not remove this credit notes
/*********************************/
function UbahTanggal(date) {
var arrayStr = date.split('/');
var bulan = arrayStr[0], tanggal = arrayStr[1], tahun = arrayStr[2];
var strBulan =
['0','Jan','Feb','Mar','Apr','May','Jun','Jul','Aug','Sep','Oct','Nov','Dec'];
document.write("<div class='bulan'>"+strBulan[bulan]+"</div>"+"<div class='tanggal'>"+tanggal+"</div>");
}
//]]>
</SCRIPT>

4. Find your "post" CSS section first, something to be like this :

.post {
background:#fff;
float: left;
width: 475px;
margin-bottom:10px;
padding: 10px;
overflow:hidden;
border:1px solid #cfcfcf;
}

*find the keyword ".post" with search function of your browser.

5. OK, after you found it, put some below codes under it :
/* >>> add by Hary Purnomo */
.post-date
{

}
.post-date .warnaCoklatPutih
{
-x-system-font:none;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRyzfYv8iSuSyzbodmRf8-5xbCofJiOlYImo5kWpz-7S_nXTLkq-8vhbvgqdiA_1RvVPmTU93uSdgMjuiG9Ru545x_YICwZIHtw84XBt5760JAvXEzd6AxNoDz6pmV7AEgYkju6MAq2s/s400/brown-calendar.gif) no-repeat scroll 0 0;
color:#666666;
float:left;
font-family:Arial;
font-size:22px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:50px;
line-height:100%;
padding:0 5px 0 0;
text-align:center;
width:45px;
}
.post-date .tanggal
{
padding:1px 0 0 0;
}
.post-date .bulan
{
-x-system-font:none;
color:#FFFFFF;
display:block;
font-family:Arial;
font-size:11px;
font-size-adjust:none;
font-stretch:normal;
font-style:normal;
font-variant:normal;
font-weight:normal;
height:16px;
line-height:normal;
padding-top:5px;
text-align:center;
}
/* >>> add by Hary Purnomo */

Code https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaRyzfYv8iSuSyzbodmRf8-5xbCofJiOlYImo5kWpz-7S_nXTLkq-8vhbvgqdiA_1RvVPmTU93uSdgMjuiG9Ru545x_YICwZIHtw84XBt5760JAvXEzd6AxNoDz6pmV7AEgYkju6MAq2s/s400/brown-calendar.gif is the place for calender icon, you can change it with your own image or use my image above. What to do is change the red text with your own pictures code

6. Next step is 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. OK, If you found it change the code with the below script :

<div class="post-date"><div class="warnaCoklatPutih"><script>UbahTanggal('<data:post.dateHeader/>');</script></div></div>

7. Save your editting, and see the result, is it working? :)

Good Luck ............

Please be respectful and do not remove credit/author remark/comment without my permission.

Related post :

• Free Blogger Template Selection