Blogger Tutorial

Memodifikasi Label Cloud Dengan Sentuhan CSS3

16.09,1 Comments


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....





hosting indonesia

You Might Also Like

1 komentar: