How To Change Date Posted dg Calender Icon

How To Change Date Posted dg Icon Calender | New

The first we have to do is change the setting of the date first, do as usual blogger login first to continue to select Settings -> Formatting, change "date header format" or "format to date (mm.dd.yyyy)
who are beginners must have confused the point right? that you know next to the words "date header format" right there is a box that shows the date, then you click and choose which format eg 13.01.2008 bulan.tangal.tahun continue to save

The second step select menu Layout -> Edit HTML. Then tick the box Expand Widget Templates,

1. Find this code <TITLE> <data:blog.pageTitle/> </ TITLE> (place at the top) if dah met underneath put the following script exactly

<SCRIPT type='text/javascript'>
//<![CDATA[
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. if already find this code:

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

if not there try looking for this one

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

3. If you found underneath put the following script

.dateblock {
background: url("http://img600.imageshack.us/img600/3576/bluecalend.gif")
no-repeat;
width: 55px;
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;

}

Http://img600.imageshack.us/img600/3576/bluecalend.gifadalah code image icon calendar. You can replace them with pictures of how to replace the code below the image with the following image code, for example, you pingin calendar is red, then change the code so http://img837.imageshack.us/img837/9199/redcalend.gif

http://i246.photobucket.com/albums/gg91/elu_isme/blackcalend.gif	http://img805.imageshack.us/img805/9918/blue2calend.gif	http://img600.imageshack.us/img600/3576/bluecalend.gif
http://img837.imageshack.us/img837/4311/greencalend.gif	http://img137.imageshack.us/img137/3329/orangecalend.gif	http://img196.imageshack.us/img196/8339/pinkcalend.gif
http://img837.imageshack.us/img837/9199/redcalend.gif	http://img220.imageshack.us/img220/3262/ungucalend.gif	http://img818.imageshack.us/img818/1760/yellowcalend.gif

Then code color: # 3366CC; was color coded
date, you can replace it with another color. You can see the code - the color code
INHERE.

4.The next step is you find this code
<data:post.dateHeader/>, let's easy way nyarinya copy the code,

continue to press Ctrl-F and paste in the box provided, directly nha

see it. if you found replace the code with this script.

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

5. Save your template and see the result. Yes do not succeed?

If such writings month and date are up try adding this code padding: 4px 0px 0px 0px;under the code.month { and also under the code .day {

NB: If date is changed to the words "undefine" it certainly does not pay attention to you from the beginning of this tutorial. Take a look at this tutorial from the beginning and read the fine print command. : D

Good Luck..!!