Home » , » Widget label cloud

Widget label cloud


Widget label cloud biasanya hanya menggunakan label biasa dan tidak menarik untuk diklik pengunjung, oleh karena itu pemakaian widget yang unik dan elegan dapat menarik perhatian pengunjung untuk mengklik dan melihat isi label tersebut. Dan kali ini saya menerangkan cara mengubah widget label agar menjadi unik dan elegan untuk dipasang pada blog kita. kalau mau lihat HASILNYA

Mari Kita simak cara mengubah widget label Cloud Unik Dan Elegan dibawah ini :

  • Silahkan masuk ke dasbor blog anda
  • Kemudian Pilih Template >> Edit HTML >> Prooced
  • Setelah jendela Edit HTML Terbuka silahkan anda cari kode berikut : 
]]></b:skin>
  • Setelah ketemu silahkan Copy Kode berikut ini dan letakkan tepat diatas kode ]]></b:skin>.
/*-----Widget by http://bondowoso-jawa.blogspot.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; 
  • Setelah kode diatas terpasang simpan pengaturan anda kemudian keluar/close dari edit HTML
  • Kemudian masuk ke layout >> Add Gadget >> Label
  • Pilih seperti dibawah ini dan save pengaturan label.
  • Kemudian atur letak tag cloud sesuai template anda.
  • Terakhir simapan semua perubahan, dan chek hasilnya.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

0 komentar:

Posting Komentar

 
Support : Blogspot.com | Freza Nugraha | Master Template
Copyright © 2013. Pustaka cyber - All Rights Reserved
Template Modify by Freza Nugraha
Proudly powered by Blogger