Cara membuat tanggal posting dalam bentuk icon kalender

      Banyak cara dilakukan untuk membuat blog terlihat semakin indah dan menarik, dimana salah satunya adalah dengan membuat tanggal posting terlihat bagai sebuah kalender meja dalam ukuran mini. Tidak banyak kode dan javascript serta kode HTML yang harus digunakan. Pemasangan dan penyimpanannyapun sangatlah simple. Perubahan yang penting dan menjadi keharusan yang harus dilakukan, selain penambahan kode adalah perubahan format tanggal posting. Format tanggal posting ini sekaligus akan menjadi penentu muncul tidaknya desain tanggal posting dalam bentuk icon kalender yang kita buat. Agar tutorial ini lebih mudah dipahami, terlebih dahulu kita akan memulai dari cara pemasangan dan penyimpanan kode yang nantinya akan kita pergunakan.

Langkah untuk Membuat Tanggal Posting dalam bentuk icon kalender :

• Lakukan login terlebih dahulu untuk mempercepat proses pembuatan bentuk tanggal posting yang baru.

• KLIK "LOGIN"

• KLIK "DESIGN/RANCANGAN".

• KLIK "EDIT HTML".

• KLIK "Download Template Lengkap" untuk melakukan proses BACK-UP Templates.

             o    Simpan file template untuk memudahkan saat file ini diperlukan kembali.
             o    Setelah proses penyimpanan file template silahkan tetap di "EDIT HTML".
             o    KLIK "Expan Widget Templates".

• Cari kode ]]></b:skin>. Gunakan Ctrl+F untuk memudahkan pencarian kode.

             o    Copy-paste kode ]]></b:skin> dalam box pencarian.
             o    KLIK "Find".

• Simpan javascript di bawah kode ]]></b:skin> dan Kode CSS di atas kode ]]></b:skin>.

• Lanjutkan dengan mencari kode <data:post.dateHeader/> dengan cara seperti saat mencari ]]></b:skin>, kemudian ganti kode tersebut dengan xHTML yang baru (disertakan di bawah!).

• KLIK "SAVE Templates (Simpan Templates)".

Javascript

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

Kode CSS

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; } ]]></b:skin>

xHTML

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

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

• KLIK "SETTINGS" (Pengaturan).

• KLIK "FORMAT".

• Lihat "Format Header Tanggal".

• Rubah format tanggal sesuai contoh di atas.

• KLIK "SAVE (Simpan).

• Buka blog dan lihat hasilnya!

Selamat Mencoba.