24 February 2015

Modifikasi Widget Label Cloud

Tags

nama gambar
Gambar: © social media com



Cara memodif indeks label .Banyak cara untuk membuat label cloud menjadi lebih menarik yaitu dengan cara sedikit mengotak-atik pada ruangan html, dan widget label ini nantinya jika tersentuh maost akan terlihat miring beberapa derajat , oky lagsung saja kita ikuti satu langkah praktis di bawah ini

  • Login ke >> Blogger.com

  • Pada Dasbor pilih menu >> Template >> Edit HTML
  • Silahkan anda cari kode ]]></b:skin> (Gunakan CTRL+F untuk mempermudah pencarian)
  • copy paste kode css berikut tepat di atas kode ]]></b:skin>


  • Artikel terkait: Membuat tab widget tiga kolom

/*-----Custom Labels Cloud widget by http://syarif-hidayatd.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;
}
klik simpan dan silah kan lihat salah satu artikal anda apa yang terjadi dengan indeks label blog anda....! bagaimana mudahkan..? trimakasih atas kunjunganya jangan lupa sempatkan kirim komentar untuk artikel ini,


EmoticonEmoticon