Cara Mempercantik Tampilan Label Dengan CSS Pada Blog

Soree Gunn,,,Pasti udah gak sabar kaaan nunggu postingan2 baru blog ini,,,heheh..Padaa kesempatan ini saya akan posting sebuah artikel tentang cara Mempercantik tampilan label di blog...(wuiihh,,dijamin blog sobat makin kerenn)....contoh tampilan label yang akan kita buat kira kira seperti gambar di bawah ini (cekidoottt) :

Gambar di atas mungkin bisa menjadi penawar rasa ingin tahu sobat seperti apa tampilan label yang akan kita buat ini, (pasti sobat pngen bgt kan punya label seperti diatas) jika Sobat berminat  silahkan ikuti langkah berikut ini :

1. Pertama login ke blogger lalu pergi ke tata letak > add gadget > lalu tambahkan gadget label, atur seperti gambar di bawah ini :

2. Simpan. 

3. Edit template Htmlnya. lalu cari code ]]></b:skin> jika sudah ketemu letakkan kode css di bawah ini tepat di atas kode ]]></b:skin> tadi, kemudian Save templatenya.

/*------------- Start label nyanlon.blogspot.com -------------*/.label-size{margin:0;padding:0;position:relative;} .label-size a{float:left;height:24px;line-height:24px;position:relative;font-size:12px;margin-bottom: 9px;margin-left:20px;padding:0 10px 0 12px;background:#0089e0;color:#fff;text-decoration:none;-moz-border-radius-bottomright:4px;-webkit-border-bottom-right-radius:4px; border-bottom-right-radius:4px;-moz-border-radius-topright:4px;-webkit-border-top-right-radius:4px; border-top-right-radius:4px; } .label-size a:before{content:"";float:left;position:absolute;top:0;left:-12px;width:0;height:0;border-color:transparent #0089e0 transparent transparent;border-style:solid;border-width:12px 12px 12px 0;  } .label-size a:after{content:"";position:absolute;top:10px;left:0;float:left;width:4px;height:4px;-moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;background:#fff;-moz-box-shadow:-1px -1px 2px #004977;-webkit-box-shadow:-1px -1px 2px #004977;box-shadow:-1px -1px 2px #004977;} .label-size a:hover{background:#555;} .label-size a:hover:before{border-color:transparent #555 transparent transparent;}/*------------- End of label nyanlon.blogspot.com -------------*/

Jika udah selesai, Lihat Hasilnya...
waw,,,kerenn bgeettt...!!! hahaha
Jangan Lupa Komentar ya gunn...!!

BAGIKAN ARTIKEL : Facebook Twitter Google+ Linkedin