STATUS UPDATED!
FEEL FREE TO ASK~
Tutorial Blog ^_^: TUTORIAL: TARIKH IKON KALENDAR

Sekiranya anda berminat untuk membaca artikel Islam, info semasa, kisah nabi, kisah pengajaran dan lain-lain, bolehlah pergi ke Khaleefah Allah ^_^ Followlah blog ini dan blog itu sekiranya berbaloi untuk difollow. Sebarang ulasan adalah amat amat amat amat diharapkan.
Any Requests or Questions?

Jom, tukar link~

TUTORIAL: TARIKH IKON KALENDAR

1. Mula-mula pegi kat Settings -> Formatting. Rujuk pada "date header format" dan pilih "mm.dd.yyyy" (4.16.2008). Kemudian Save

2. Selepas itu pergi ke Layout -> Edit HTML. Sila Tick Expand Widget Template anda.

3. Masukkan kod-kod seperti berikut:

a) Cari kod <TITLE><data:blog.pageTitle/></TITLE> dan tambahkan code di bawah ini selepas kod Title tersebut:

<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>

b) Selepas itu cari kod di bawah ini:


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

dan tambahkan code berikut di bawahnya:

.dateblock {
background: url("http://yourimage/pink.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;
}
p/s: anda boleh mengubah kedudukan, warna teks dan sebagainya 

Kemudian, sila tukarkan alamat imej tersebut (http://yourimage/pink.gif) kepada beberapa warna seperti di bawah. Save Image pilihan anda dan uploadkan di Blogger atau Free hosting Image yang lain.



c) kemudian cari pula kod <data:post.dateHeader/>

Sekiranya kod asal anda adalah seperti berikut:

<h2 class='date-header'><data:post.dateHeader/></h2>

Sila tukarkannya kepada kod di bawah ini:

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

4. Kemudian Priview. Jika sudah ada perubahannya savekan template anda..

0 comments:

Berkatalah dengan akal dan jiwa, kerana itu anugerah Pencipta dan ternyata natijahnya akan lebih bahagia. ^_^

Post a Comment

 
Copyright © 2009-2012 Tutorial Blog ^_^: TUTORIAL: TARIKH IKON KALENDAR
Design by a.a.ghariib