Memodifikasi Label Cloud Dengan Sentuhan CSS3
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh1QJ1x6MvCjHJHWVbP_p5akFTWtCwfjww9_nUuyK24ErmFZXGzyuzcm5u2CSCZUJYvXHgAJNQJHyFKKZP3PKjGBFzOzc9BkvNpBrCc4Fr43J_S1g1EST9Tt_uhF9L4XSzW7qNkCcvWLpPj/s320/Labelcss3.jpg)
Kali ini, kita akan memodifikasi Label Cloud dengan sedikit sentuhan CSS3. Untuk lebih jelasnya silahkan perhatikan gambar diatas.
Dan untuk membuatnya silahkan ikuti panduan dibawah ini:
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
]]></b:skin>, dan letakkan Kode CSS dibawah ini tepat diatasnya:
.cloud-label-widget-content span a{
background:transparent;
text-decoration:none;
text-shadow:1px 1px 1px transparent;
padding:2px 5px;
border:1px solid transparent;
opacity:0.7;
-o-transition:all 0.6s ease-in;
-moz-transition:all 0.6s ease-in;
-webkit-transition:all 0.6s ease-in;
}
.cloud-label-widget-content span:hover a{
background:green;
color:red;
text-decoration:none;
text-shadow:1px 1px 1px #000;
border:1px dotted green;
opacity:1.0;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-transform:scale(1.2);
-moz-transform:scale(1.2);
-webkit-transform:scale(1.2);
}
5. Save Template anda
6. Beralihlah ke Elemen laman dan rubah Label anda menjadi Cloud jika sebelumnya masih berbentuk daftar.. Jika sudah Save dan lihat hasilnya......
* Silahkan sesuaikan warna sesuai keinginan anda....
Dan untuk membuatnya silahkan ikuti panduan dibawah ini:
1. Login ke Akun Blogger anda masing-masing
2. Klik Design atau Rancangan, kemudian pilih edit html
3. Centang Expand Widget Template (saya anjurkan download dahulu template anda)
4. Cari kode seperti dibawah ini:
]]></b:skin>, dan letakkan Kode CSS dibawah ini tepat diatasnya:
.cloud-label-widget-content span a{
background:transparent;
text-decoration:none;
text-shadow:1px 1px 1px transparent;
padding:2px 5px;
border:1px solid transparent;
opacity:0.7;
-o-transition:all 0.6s ease-in;
-moz-transition:all 0.6s ease-in;
-webkit-transition:all 0.6s ease-in;
}
.cloud-label-widget-content span:hover a{
background:green;
color:red;
text-decoration:none;
text-shadow:1px 1px 1px #000;
border:1px dotted green;
opacity:1.0;
border-radius:4px;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-transform:scale(1.2);
-moz-transform:scale(1.2);
-webkit-transform:scale(1.2);
}
5. Save Template anda
6. Beralihlah ke Elemen laman dan rubah Label anda menjadi Cloud jika sebelumnya masih berbentuk daftar.. Jika sudah Save dan lihat hasilnya......
* Silahkan sesuaikan warna sesuai keinginan anda....
thank's ats info'a sob,
BalasHapus