Kamis, 23 Juni 2011

Tutorial Blog : Merubah Tanggal Postingan jadi Icon

| Kamis, 23 Juni 2011 | 0 komentar

Banyak cara untuk membuat blog kita tampil lebih menarik , Bisa dengan memasang widget, mengubah setingan HTML dan menambahkan animasi-animasi, sehingga blog dapat enak dilihat, dan pngunjung bisa beth berlama-lama mentengin blog kita . Dari semua yang dijelaskan diatas ada satu lagi ilmu yang perlu dicoba yaitu merubah tampilan tanggal posting menjadi sebuah icon tanggalan . Caranya cukuplah mudah . Langsung saja ,


LANGKAH UNTUK MERUBAH TAMPILAN TANGGAL POSTING
1. LOGIN KE BLOGER
2. KLIK "DESIGN/RANCANGAN".
3. KLIK "EDIT HTML".
4. KLIK "Download Template Lengkap" untuk mem backup template jika ada hal yang tidak diinginkan .
5. Setelah proses penyimpanan file template silahkan tetap di "EDIT HTML".
6. KLIK "Expan Widget Templates".
7. Cari kode ]]></b:skin> Gunakan Ctrl+F untuk memudahkan pencarian kode.
Setelah anda klik Ctrl+F secara bersamaan, copy-paste kode ]]></b:skin> dalam box pencarian.
8. Simpan javascript di bawah kode ]]></b:skin>

<script type='text/javascript'>
//<![CDATA[
e_replace(date) { var da = da
function da tte.split('.');
mon = da[0], year = da[2]; var month = ['0
var day = da[1]
,','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>");
} //]]>
>
</scrip t


9. Copykan Kode CSS(dibawah ini) di atas kode ]]></b:skin>.

h2.date-header{
margin:1.5em .5em 0.5em;
} .kalender{
und:url(http://i964.photobucket.com/albums/ae124/gubhugreyot/anima/bgGreenCalendarAnima.gif) no-repeat; width:
backgr o44px; margin:20px 10px 0 8px; float:left; font-weight:bold; height:52px; text-align:center;
acity:0.8; -o-transitio
border:1px solid #777; border-radius:5px; -moz-border-radius:5px; -webkit-border-radius:5px; o pn:all ease-in 1s; -moz-transition:all ease-in 1s; -webkit-transition:all ease-in 1s; filter:alpha(opacity=80); padding:1px; }
margin:3px 2px 0
.kalender:hover{ filter:alpha(opacity=100); opacity:1.0; border-color:red; } .month{ font-size:10px; width:33px; 6px; text-transform:uppercase; color:#4d010a; padding: 2px 0px 0px 0px; } .day{ color:#555; font-size:27px; width:44px;
margin:0;padding:0;
}


10. Lanjutkan dengan mencari kode <data:post.dateHeader/>   dengan cara seperti saat mencari ]]></b:skin>, kemudian ganti kode tersebut dengan xHTML dibawah ini

<div class='kalender'>
<script type='text/javascript'>
date_replace(&#39;<data:post.dateHeader/>&#39;);
</script>


11. KLIK "SAVE Templates (Simpan Templates)".


Setelah semua proses selesai, lakukan perubahan format tanggal posting ke bentuk bulan.tanggal.tahun .
1. KLIK "SETTINGS" (Pengaturan).
2. KLIK "FORMAT".
    Lihat "Format Header Tanggal".
    Rubah format tanggal menjadi ( 12.22.2010 ) .
3. KLIK "SAVE (Simpan).
4. Buka blog dan lihat hasilnya!

Sekian dari saya semoga bermanfaat , Dan selamat mencoba mempraktekan untuk merubah tampilan tanggal di blog kamu menjadi sebuah icon yang imut dan menarik .


Baca Juga Artikel Yang Berkaitan



0 komentar:

 
© Copyright 2011. All rights reserved powered by Blogger.com | Template by o-om.com - zoomtemplate.com
ILMU KIETA | Tempat Sharing Dan Bertukar Ilmu | ILMU KIETA