Memberi efek pada label


Cara membuat efek pada label seperti pada gambar di atas ketika disorot dengan kursor maka akan keluar efek rotasi dan zoom pada label.

Caranya membuatnya

  • Tambahkan A gadget Label di layout template anda
  • Masuk Template - Edit HTML lalu Copy kode berikut dan taruh di atas ]]></b:skin>
.Label li {
        background: linear-gradient(to bottom, #6B6B6B 0%, #6B6B6B 4%, #333333 1%, #2B2B2B 100%) repeat scroll 0 0 transparent;
position: relative;
        border: 1px solid;
        border-radius: 6px 6px 6px 6px;
        float: left;
        font-size: 13px;
        list-style: none outside none;
        margin: 2px;
        padding: 3px;
        transition: all 0.3s ease 0s;
    }
.Label li:hover {
    transform: rotate(10deg) scale(1.3);
}
.Label a {
    color: #fff;
    text-decoration: none;
}
.Label ul {list-style-type:none;margin:0 2px;padding-left:13px;}
  • Kemudia Simpan template nya..
Apabila tampilan label tidak sesuai dengan saya contohkan mungkin scriptnya bentrok dengan script bawaan (sudah ada) di tamplate sobat. Sehingga untuk mengatasinya hapus script label yang lama. :c::i:

0 comments:

Warning!
- Tinggalkan jejak anda di kolom komentar.