d-Nyonri.....Blog`s

If you bored with your blog face, may be you can use this trick to
make your blog more beautiful. This trick will explain "how to change
posting date to become a calender icon" like as you see in my blog. If
you interest c'mon let's do it now.
The first thing you have to do is change your "date header format" to
become mm.dd.yyyy (1.24.2008). 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.

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.

1. 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[
/*********************************/
/* http://trick-blog.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

2. Then 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;
}

3. OK, you have found it? 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

4. 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='dateblock'> <SCRIPT>
date_replace('<data:post.dateHeader/>');</SCRIPT></DIV>

5. Save your editting, and see the result, is it working?

if the month and date upper, you can add this code padding: 4px 0px
0px 0px; under this code .month { and this .day {

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

Source http://trick-blog.blogspot.com/