Cara Modifikasi Tampilan Widget Label Style 3

Cara Modifikasi Tampilan Widget Label Style 3 - Dalam pembahasan artikel/Tutorial kali ini saya akan share bagaimana cara memodifikasi label, sesua dengan judul diatas. label dalam sebuah blog penting juga untuk kita tampilkan agar pengunjung lebih tertarik untuk leluasa browsing di blogger kita.

Lebel cloud digunakan untuk menampilkan semua kategori atau label postingan blog. Desain yang melekat pada widget blogger ini sangat minim dan memberikan kita ruang yang banyak untuk mengembangkan kreativitas.

Berikut langkah-langkah membuat label style 3 :

1. Login ke blogget shobat
2. Klik menu Rancangan/Template =>> Klik Edtit HTML
3. Cari Kode ]]></b:skin>,
4. Copy kode CSS berikut tepat diatas atau sebelum kode ]]></b:skin>

.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;}

5. Save Templat, dan lihat hasilnya.

Demikian saya share, Cara Modifikasi Tampilan Widget Label Style 3 . Semoga bermanaat.