Tutorial Blog : Merubah Tanggal Postingan jadi Icon

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