BlogU: Date-Header ala Gambar Calendar
May 16, 08 by Adam PahleviAnnie Bluesky dari Blogger University, Oklahoma, USA, telah membuat sebuah hack yang dinanti-nanti oleh para pengguna Blogge. Bagaimana tidak? dia membuat hack tentang mengubah date header pada Blogger menjadi berbentuk gambar kayak gini nih:
Bagaimana? keren kan? ditunggu-tunggu kan? lalu… bagaimana cara pengaplikasiannya?
Setting tanggal
Pertama-tama, kita harus mensetting bentuk/format penanggalan pada Blog kita. Caranya adalah:
- Buka Dashboard | Settings | Formatting
- Cari field Date Header Format dan rubah menjadi format YYYY-MM-DD (2008-01-12)
- Save settings.
Penyisipan Script
setelah itu, kita akan menyisipkan Script JavaScript. Caranya:
- Buka Dashboard | Template | Edit HTML.
- Centang Expand Widgets Template.
- Car tag <head> dan paste kode ini dibawahnya:
<!– orangevolt calendar widget –>
<script src=’http://anniebluesky.googlepages.com/fastinit.js’/>
<script src=’http://anniebluesky.googlepages.com/prototype-1.5.0.js’/>
<script src=’http://anniebluesky.googlepages.com/orangevolt-calendar.js’/>
<link href=’http://anniebluesky.googlepages.com/calendar.css’ rel=’stylesheet’ type=’text/css’/>
<!– end calendar widget –>
- Setelah itu… kita cari: <data:post.dateHeader/> dan kita rubah kode tersebut menjadi:
<h2 class=’date-header’>
<data:post.dateHeader/>
</h2>
Penetapan dan Pengaplikasian Icon
Langkah diatas masih kurang, kita harus memilih ikon untuk kalendar kita terlebih dahulu. Ayo… cepat pilih mode kalendar dibawah ini mana yang kalian suka. Ikon kalendar tersebut adalah seperti ini:
Download ikon-ikon link gambarnya disini
Setelah ikon-ikonnya didownload, segera pilih ikon mana yang akan dipakai. Setelah itu, kita upload ikon kalendar yang kita pilih tadi ke situs-situs penyedia Hot-Linking seperti Google Pages, Yahoo! Geocities, pun Ripway.
Setelah kita upload ikon untuk kalendar kita, maka kita harus mengkopi alamat URL Hot-Linking hasil Upload-an yang kita terima. Jika kita sudah mendatapkan alamatnya, maka langkah terakhir kita adalah mengkopikan kode CSS berikut ketubuh CSS Blogger kita:
/* Calendar
———————————————– */
span.cal {
background:transparent url(’URL HOTLINKING’) no-repeat scroll 0%;
float:left;
height:49px;
width:48px;
font-family:”Trebuchet MS”,Tahoma,Arial;
font-size-adjust:none;
font-style:normal;
font-variant:normal;
font-weight:normal;
margin-right: 13px;
}span.cal_month {
color:#FFFFFF;
display:block;
font-size:11px;
line-height:11px;
margin-left:-3px;
padding-top:2px;
text-align:center;
text-transform:uppercase;
}span.cal_day {
color:#999999;
display:block;
font-size:18px;
line-height:18px;
margin-left:-3px;
padding-top:8px;
text-align:center;
text-transform:uppercase;
}
text URL HOTLINKING diatas kita isi dengan alamat Hot-Linking hambar upload-an kita… Selesai. Mudah?
