Beranda Tutorial Lainnya

Mempercantik Tampilan Labels Blogger

13.55
A+ A- Print Email
Kadang tampilan label dapat membuat kita bosan, karena tampilannya yang sederhana dan terkesan membosankan. Oleh karena itu kita harus memberikan sedikit sentuhan agar tampilan label menjadi lebih cantik dan menarik. Sekarang saya akan bagikan trik mempercantik labels di Blogger agar terkesan elegan dan nyaman dipandang mata.hohoo,.. Dan disini saya akan memberikan 2 model warna yaitu Putih dan Hitam.

Baiklah Sekarang mari kita bahas cara mempercantik tampilan labels di Blogger.

 Contoh 1 (White).


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}

 Contoh 2 (Black).


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.

Selamat mencoba dan sukses selalu ;)