Tanggal Posting Dengan Ikon Kalender
Pada prinsifnya Gambar Icon Kalender ini digunakan hanya sebagai background, Jadi Timestamp yang biasanya hanya berupa huruf dan angka, dapat disisipkan sebuah gambar kalender mini yang berfungsi sebagai latar belakangnya.
Cara Memasang Icon Kalender
Langkah Pertama:
Pertama yang harus dilakukan yaitu mengganti setting tanggal, caranya:
1. Login ke Blogger hingga masuk ke Dasbor
2. Klik Settings/ Setelan.
3. Klik Language and Formatting/ Bahasa dan Pemformatan.
Ganti Format Tanggal Header (Date Header Format), Formatnya seperti ini: (mm.dd.yyyy) (bulan.tangal.tahun) contoh: (07.06.2012) kemudian simpan.
Langkah kedua:
Letakan script berikut ini kedalam template, tepatnya pada tag
<head>:Javascript
<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>
//<![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>
Kemudian cari kode seperti berikut ini:
Kode CSS
.date-header {
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
margin: 1.5em 0 0;
font-weight: normal;
color: $dateHeaderColor;
font-size: 100%;
}
Apabila kita tidak menemukan, kita dapat mencari kode seperti berikut ini:
Kode CSS
h2.date-header {
margin:1.5em 0 .5em;
}
margin:1.5em 0 .5em;
}
Setelah ditemukan, letakan Script berikut ini dibawahnya. Sebenarnya kita dapat meletakannya dimanapun dalam tag
<head>, lebih spesifik lagi letakan saja diatas kode ]]></b:skin>Kode CSS
.dateblock {
background: url("blackcalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}
.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}
.day {
color:#ff0000;
font-size: 19px;
width: 37px;
margin: 0 5px;
}
background: url("blackcalend.gif")
no-repeat;
width: 55px;
margin: 0;
font-weight: bold;
height: 50px;
/*position: absolute;
top: 0;
left: 0;*/
float: left;
text-align: center;
}
.month {
font-size: 11px;
width: 37px;
margin: 0 5px;
text-transform: uppercase;
color: #fff;
}
.day {
color:#ff0000;
font-size: 19px;
width: 37px;
margin: 0 5px;
}
Keterangan :
(Text warna hijau) : adalah kode warna Timestamp, kita dapat menggantinya sesuai dengan warna yang kita inginkan.
(Text warna merah) : merupakan Gambar Icon Kalender yang digunakan sebagai background, kita juga dapat menggunakan beberapa contoh Icon Kalender berikut ini:
Langkah Terakhir:
Langkah selanjutnya yaitu mencari kode:
<data:post.dateHeader/>, kemudian ganti kode tersebut dengan kode berikut ini:Kode HTML
<div class='dateblock' >
<script>date_replace('<data:post.dateHeader/>');</script></div>
<script>date_replace('<data:post.dateHeader/>');</script></div>
Save Template, selesai dan lihat hasilnya. Lihat juga cara Menggambar Ikon Kalender Dengan CSS
Semoga bermanfaat!!!
0 komentar:
Post a Comment
Catatan :
Untuk menyisipkan gambar kedalam komentar, gunakan tag : [img]URL_Gambar[/img]
atau <i rel="image">URL_Gambar</i>
Untuk Video Youtube : [youtube]URL_Video[/youtube]
atau <i rel="youtube">URL_Video</i>
Untuk "Kutipan", gunakan : [blockquote]Kutipan_Anda[/blockquote]
atau <b rel="quote">Kutipan_Anda</b>
Untuk menyisipkan Kode: [code]KODE[/code]
atau <i rel="code">KODE</i>
atau <i rel="pre">KODE</i>
Dan untuk menyisipkan smiles/ emoticon, lihat kode Emoticon