Change the date with a calendar icon on blogger

Maybe this post is extremely too long in utorial in blogger but I want to share for those who do not know how, and fill the post today so I could make a post. actually I was still learning. how to change the date with a calendar icon on blogger very easy and fiddling with the template I finally managed to make it.

The first thing we do is change the date settings, do as usual Login first to the bloggers continue to select Settings -> Formatting, replace "date header format" or "date format to be (mm.dd.yyyy) who are beginners must have confused the point right? that you know next to the words "date header format" there's a box that shows the date, trus you click and select the format month. date. year 13.01.2008 example, continue to save

The second step menu select Layout -> Edit HTML. Then check the Expand Widget Templates box, do not forget the back-up your template first. Who do not know how to back-template please see the first article. already? if already let's get started into it.

1. Find this code <TITLE><data:blog.pageTitle/></TITLE> (where the top) if you have found this place the following script exactly underneath.

<SCRIPT type='text/javascript'>
//<![CDATA[
/*********************************/
/* http://trik-tips.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. When it's done first and then find this code:

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

If the code is sought in No. 2 above is not there try to find that this code:

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

3. If you have found place the following script below :

.dateblock {
background: url("http://kendhin.890m.com/kalender/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;

}

code http://kendhin.890m.com/kalender/bluecalend.gif
is the image of the calendar icon. you can replace it with the pictures below do I need to replace the bold with the following image code, for example you want to calendar the red, did you replace the text with redcalend.gif luecalend.gif.


blackcalend.gif blue2calend.gif bluecalend.gif

greencalend.gif orangecalend.gif pinkcalend.gif

redcalend.gif ungucalend.gif yellowcalend.gif

Then the code color: # 3366CC; are color coded
date, you can replace it with another color. You can see the color kode2 HERE.

4. The next step is you find this code
<data:post.dateHeader/>, the way I'll find it easy to copy the code,
continue to press Ctrl-f and paste in the box provided, directly nha
See it. if already met replace the code with this script.

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

5. Save your template and see the results.
If such writings month and the date is too 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's certainly you do not pay attention to this tutorial from scratch. Take a look at this tutorial from scratch again and read the instructions carefully.
source : http://trik-tips.blogspot.com/2008/01/mengganti-tanggal-icon-calender.html

Description: Change the date with a calendar icon on blogger Rating: 4.5 Reviewer: Zein Okeh - ItemReviewed: Change the date with a calendar icon on blogger

Posted in: Blog Tips,Internet,Tips and Trick,Tutorial