Selasa, 11 September 2012



LANGKAH UNTUK MEMBUAT KALENDER POSTING MODEL BARU :


1. Login ke Blogger.
2. Amankan Template. Caranya bisa kamu lihat 
3. Tetap di Tata Letak.
4. KLIK Edit HTML.
5. Cari KODE ]]></b:skin> dan letakkan KODE CSS berikut di atasnya persis :

h2.date-header{
margin:20px 0 -40px;
float: right;
}
#kalender {
background:url(https://3288785158770787760-a-1802744773732722657-s-sites.googlegroups.com/site/gubhugreyotprojects/image-posting/mart-2010/BlankCalendarAnima-gubhugreyot.gif) no-repeat;
font-family:Arial;
display:block;
margin-left:2px;
padding-right:2px;
text-align:center;
width:64px;
height:68px;
line-height:0.8em;
}
.kalender_bulan{
display:block;
clear:both; /* original code by: */
color:#eefd00; /* gubhugreyot.blogspot.com */
font-size:7px;
text-align:center;
padding-top:8px;
}
.kalender_tanggal{
display:block;
font-size:35px;margin-top:8px;
color:#282658;
font-weight:bolder;
padding-top:12px;
text-align:center;
}
.kalender_tahun{
display:block;
font-size:8px;
line-height:0.5em;
padding-top:9px;
color:#480002;
}


6. Cari KODE h2.date-header (bawaan template : di baian atas !) dan hapus karena sudah kita ganti dengan yang baru.
7. Simpan javascript di bawah ini di antara KODE : </head> dan <body> , sehingga berbentuk seperti ini :


</head>

<script type="text/javascript">
function bgsGR_kalender(d){
var da = d.split(&#39; &#39;);
bulan = &quot;<div class='kalender_bulan'>&quot;+da[0]+&quot;</div>&quot;;
tanggal = &quot;<div class='kalender_tanggal'>&quot;+da[1].slice(0,3)+&quot;</div>&quot;;tahun = &quot;<div class='kalender_tahun'>&quot;+da[2]+&quot;</div>&quot;;
document.write(bulan+tanggal+tahun);}
</script>

<body>


8. KLIK Simpan Template.
9. KLIK Expand Template Widget.
10. Cari KODE : 

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


11. Ganti dengan KODE berikut :

<b:if cond='data:post.dateHeader'>
<h2 align='right' class='date-header'><div id='kalender'><script>var gureykalender = &#39;<data:post.dateHeader/>&#39;;</script>
<script>bgsGR_kalender(&#39;<data:post.dateHeader/>&#39;);</script>
</div></h2>
<b:else/>
<h2 class='date-header'><div id='kalender'>
<script>bgsGR_kalender(&#39;<data:post.dateHeader/>&#39;);</script><script>bgsGR_kalender(gureykalender);</script></div></h2>
</b:if>


12. KLIK Simpan Template.
13. KLIK Pengaturan.
14. KLIK Format.
15. KLIK pada tanda pilih mode --> Format Header Tanggal (Date Header).
16. Pilih format header tanggal yang berbentuk : bulan tanggal, tahun (contoh --> Maret 19, 2010).
17. KLIK SIMPAN SETELAN.
18. Lihat Hasilnya dengan membuka blog !

Selamat beraktifitas dan selamat berkarya... Semoga blog anda semakin tampil gaya, padat, berisi dan tentu saja .... Semakin"MONTHOK"dan membuat semua pengunjung blog melirik ....!!!!
Hi ... he ... ho .... ha ....Uhuk.... Uhukkk Uhuk ... Thet !!!!

Oh..., ya .., Sampeyan dapat juga membuat tampilan tanggal posting dalam bentuk yang tak jauh berbeda dengan date header di atas melalui cara yang berbeda. Silahkan KLIK link di bawah ini untuk baca tutorialnya!

0 komentar:

Posting Komentar