Tips Mempercantik Widget Label

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. 

Artikel Seputar Tips Lainnya :

2 comments:

  1. Anonymous10/18/2012

    Tips mantap gan, kapan-kapan mau coba.. :D

    ReplyDelete
  2. iya gan, terimakasih..

    ReplyDelete

Jangan pake link ya gan..!!

Scroll to top