Merubah Tanggal Postingan dengan icon kalender

Salam sukses selalu buat sobat semua, Belajar Komputer Melalui Internet saat ini akan sedikit membahas tentang Merubah Tanggal Postingan dengan icon kalender dan semoga artikel ini bermanfaat.

---

Tutorial kali ini merupakan tutorial yang telah kami terapkan diblog ini beberapa saat yang lalu dan hasilnya seperti apa yang terlihat di blog ini tepatnya ada dibagian atas dibawah breadcrumb blog ini, tutorial ini sebagai tambahan ilmu bagi saya yang masih belajar ngblog, langsung aja ke pokok bahasan.

• Pertama-tama lakukan login sebagaimana biasa mau mengedit Template
• kemudian klik template >> jangan lupa "Download Template Lengkap" untuk melakukan proses BACK-UP Template, untuk jaga-jaga.
• setelah selesai klik Edit HTML >> lanjutkan >> centang Expand Template Widget.
• Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk memudahkan pencarian kode, kemudian simpan kode CSS dibawah ini tepat diatas kode ]]></b:skin> tersebut.

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

• kemudian Simpan javascript di bawah dibawah ini tepat dibawah kode ]]></b:skin>

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

• Langkah selanjutnya cari kode <data:post.dateHeader/> dengan cara seperti saat mencari ]]></b:skin>, setelah ketemu kemudian ganti kode tersebut dengan xHTML dibawah ini;

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

• KLIK "SAVE Templates (Simpan Templates)".

Setelah semua proses selesai, lakukan perubahan format tanggal posting ke bentuk bulan.tanggal.tahun (contoh: 06.17.2012).

• KLIK "SETTINGS" (Pengaturan).
• KLIK "FORMAT".
• Lihat "Format Header Tanggal".
• Rubah format tanggal sesuai contoh di atas.
• KLIK "SAVE (Simpan).
• Buka blog dan lihat hasilnya!

Mungkin sampai disini dulu Belajar Komputer Melalui Internet tentang Merubah Tanggal Postingan dengan icon kalender kali ini, semoga bermanfaat bagi Anda.

DAPATKAN ARTIKEL VIA EMAIL

Masukan Alamat Email Sobat:

Delivered

BACA JUGA ARTIKEL TERKAIT LAINNYA

Dipublish oleh : Abdul Kohar - Jatinangor Rating 5 Belajar Komputer Melalui Internet, Updated at: 22:30