Baiklah Sekarang mari kita bahas cara mempercantik tampilan labels di Blogger.
CSS::
/* label-size white */
.label-size {position: relative;float:left;}.label-size::before {content: ' ';width: 0;height: 0;top: 2px;position: absolute;right: -4px;border: 14px solid transparent;border-left-color: #DDD;}.label-size a{float: left;font-size: 14px;padding: 5px 10px;background: white;margin: 3px 24px 15px 1px;position: relative;width:95px;outline: 1px solid #DDD;color: #B4B4B4;}.label-size a::before {content: ' ';width: 0;height: 0;top: 0;position: absolute;right: -26px;border: 13px solid transparent;border-left-color: white;}.label-size a::after {content: ' ';position: absolute;background: #F6F6F6;border-radius: 10px;height: 10px;right: -1px;top: 7px;width: 10px;border: 1px solid #DDD;}
.label-size a:hover{color:#222 !important}
CSS::
/* label-size Black */
.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:15px;
padding:0 10px 0 12px;background:#222;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 #222 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 #000;-webkit-box-shadow:-1px -1px 2px #000;box-shadow:-1px -1px 2px #000;}
.label-size a:hover{background:#333;}
.label-size a:hover:before{border-color:transparent #333 transparent transparent;}
Berikut cara penerapannya Ikuti langkah berikut.
1. Log in ke blogger
2. Klik Template
3. Klik Edit HTML
4. Lalu Pilih salah satu kode CSS diatas, dan letakkan di atas kode ]]></b:skin>
5. Selanjutnya Klik Simpan Template.
6. Lalu Sobat Klik Edit Tata Letak, >> Klik Tambah Gadget >> Pilih Label >> lalu setting seperti gambar di bawah ini :
7. Selanjutnya Klik Simpan dan lihat hasilnya.
Jika Artikel ini menarik, Silahkan copy paste permalink berikut ini di blog sobat!
salam kenal sob,, keren templatenya..tutorialnya juga mudah dipahami..semoga selalu bermanfaat tips2nya..
BalasHapus@jeo blog welcome this my blog , :b slm knl blik sob, mksh sdh brkmntr dgn baik
BalasHapusTHANKs SOB,,,,tutorialnya,,,,smoga bermanfaat,,,
BalasHapusTerima Kasih Mas Bro Infonya
BalasHapusSALAM GO BLOG DARI MAHASISWA GO BLOG
sugoiii , mntap gan ane copy scriptnya ..
BalasHapusjngan lpa mmpir ea ==> srezky.blogspot.com <==