Membuat Gambar Calendar[Kalender] Dengan CSS3 [Tanpa Image]

Ocre, kali ini kita masih akan main-main sama CSS3. Dan kali ini saya mau ngajak anda bikin Gambar Calendar(Kalender) dengan CSS3. Bukan CSS lho ya, tapi CSS3, jadi disini kita gak perlu nyari background buat kotakkan Calendar-nya dan meng-upload-nya terlebih dahulu karena disini kita akan memanfaatkan fungsi-fungsi CSS3 yang klo disatuin ternyata bisa juga untuk ng'bentuk sebuah Gambar Calendar(Kalender) hhe...

Penasaran sama bentuknya? bentuknya akan jadi kaya gini:

7 March

Gimana? udah kaya bentuk Calendar(kalender) kan? hhe.... tapi karena Ide untuk ng'buat tutorial ini emank mendadak so, disini saya masih menggunakan sistem penanggalannya secara manual dan harus selalu diganti klo mau dijadiin sebagai Widget utuh disetiap postingan anda, mungkin lain kali klo sempet baru saya bikin update sendiri hhe... ya pokoknya bentuknya gitu lah...

Terus, gimana cara pembuatannya?

1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:

]]></b:skin>

5. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini tepat diatas kode tersebut atau sebelum kode ]]></b:skin> tersebut:

.calendar{
margin:.25em 10px 10px 0;
padding-top:5px;
float:left;
width:80px;
background:#ededef;
background: -webkit-gradient(linear, left top, left bottom, from(#ededef), to(#ccc));
background: -moz-linear-gradient(top, #ededef, #ccc);
font:bold 30px/60px Arial Black, Arial, Helvetica, sans-serif;
text-align:center;
color:#000;
text-shadow:#fff 0 1px 0;
-moz-border-radius:3px;
-webkit-border-radius:3px;
border-radius:3px;
position:relative;
-moz-box-shadow:0 2px 2px #888;
-webkit-box-shadow:0 2px 2px #888;
box-shadow:0 2px 2px #888;
}
.calendar em{
display:block;
font:normal bold 11px/30px Arial, Helvetica, sans-serif;
color:#fff;
text-shadow:#00365a 0 -1px 0;
background:#04599a;
background:-webkit-gradient(linear, left top, left bottom, from(#04599a), to(#00365a));
background:-moz-linear-gradient(top, #04599a, #00365a);
-moz-border-radius-bottomright:3px;
-webkit-border-bottom-right-radius:3px;
border-bottom-right-radius:3px;
-moz-border-radius-bottomleft:3px;
-webkit-border-bottom-left-radius:3px;
border-bottom-left-radius:3px;
border-top:1px solid #00365a;
}
.calendar:before, .calendar:after{
content:'';
float:left;
position:absolute;
top:5px;
width:8px;
height:8px;
background:#111;
z-index:1;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
-moz-box-shadow:0 1px 1px #fff;
-webkit-box-shadow:0 1px 1px #fff;
box-shadow:0 1px 1px #fff;
}
.calendar:before{left:11px;}
.calendar:after{right:11px;}
.calendar em:before, .calendar em:after{
content:'';
float:left;
position:absolute;
top:-5px;
width:4px;
height:14px;
background:#dadada;
background:-webkit-gradient(linear, left top, left bottom, from(#f1f1f1), to(#aaa));
background:-moz-linear-gradient(top, #f1f1f1, #aaa);
z-index:2;
-moz-border-radius:2px;
-webkit-border-radius:2px;
border-radius:2px;
}
.calendar em:before{left:13px;}
.calendar em:after{right:13px;}

6. Klo udah, Save template anda dan jangan lihat dlu hasilnya soalnya anda kan belum naro HTML untuk pemanggilannya haha... Terus gimana cara pemanggilannya? klo mau ditempatkan sebagai Widget sih anda bisa taro HTML yang saya kasih dibagian Title Post atau dibagian manapun yg anda suka, tapi karena disini saya emank gak niat menjadikan ini sebagai Widget, karena tujuan saya hanya ingin menunjukkan klo Widget Calendar pun bisa dibuat tanpa Image hhe... Jadi saya naronya di Editor postingan hehe... Dan HTML untuk pemanggilannya adalah:

<p class="calendar">7 <em>March</em></p>

7. Karena udah dipanggil sekarang anda bisa Save postingan anda dan Publish, baru deh anda lihat hasilnya nampak gak tuh si calender CSS3 kita wkwkwkwk...

Selamat Mencoba...