Tips Mempercantik Widget Label - Tips Mempercantik Widget Label yang anda tampilkan pada sidebar akan membuat pengunjung blog anda tertarik untuk menjelajahi label lain pada blog anda. dengan tampilan widget yang biasa tentunya kurang menarik bagi pengunjung blog anda untuk melihat label atau kategori lainnya.
Tampilan biasa akan terlihat seperti ini
Gaya baru untuk widget
Untuk membuat widget seperti gambar diatas lakukan seperti dibawah ini
1. Login ke Blogger
2. Klik tambahkan gadget dan pilih Label
3. Di dalam pengaturan pastikan untuk memilih tampilan awan. Anda dapat mengatur opsi lain sesuai kebutuhan Anda. Lihat gambar di bawah sebagai contoh
4. Pergi ke Template -> Edit HTML
5. Cari kode ]]></b:skin> dan letakkan kode CSS dibawah ini tepat diatasnya
/*-----Custom Labels Cloud widget by www.seputartipsterkini.blogspot.com.com----*/
.label-size{
margin:0 2px 6px 0;
padding: 3px;
text-transform: uppercase;
border: solid 1px #C6C6C6;
border-radius: 3px;
float:left;
text-decoration:none;
font-size:10px;
color:#666;
}
.label-size:hover {
border:1px solid #6BB5FF;
text-decoration: none;
-moz-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
-webkit-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
-moz-transform: rotate(7deg);
-o-transform: rotate(7deg);
-webkit-transform: rotate(7deg);
-ms-transform: rotate(7deg);
transform: rotate(7deg);
filter: progid:DXImageTransform.Microsoft.Matrix(
M11=0.9961946980917455, M12=-0.08715574274765817, M21=0.08715574274765817, M22=0.9961946980917455, sizingMethod='auto expand');
zoom: 1;
}
.label-size a {
text-transform: uppercase;
float:left;
text-decoration: none;
}
.label-size a:hover {
text-decoration: none;
}
6. Ganti warna merah untuk menyesuaikan besar huruf sesuai selera anda.
7. Save template dan lihat hasilnya
Demikian Tips Mempercantik Widget Label semoga dapat bermanfaat. Bagi yang kurang mengerti salahkan tinggalkan pertanyaan anda di kolom komentar.
Tips mantap gan, kapan-kapan mau coba.. :D
ReplyDeleteiya gan, terimakasih..
ReplyDelete