Membuat Widget Label Dengan Efek Cloud (CSS3)
.png "Membuat Widget Label Dengan Efek Cloud (CSS3)")
Label adalah widget yang juga diyakini menambah nilai SEO (search engine optimization) pada blog walau fungsinya masih kalah daripada related post, dan widget lainnya (ingat, diyakini!). Secara bawaan (default) dari Blogger, label akan terlihat hanya teks dan ketika disorot oleh pointer mouse akan menjadi link dengan efek underline. Efek seperti itu terlihat datar dan kaku. Apakah Anda merasa seperti itu?
Jika Anda merasa terganggu dengan efek ini, kita dapat membuat widget label dengan efek cloud. Apa itu efek cloud? Anda dapat melihat demo label dengan efek cloud di blog ini. Anda dapat melihatnya di bagian sidebar kanan. Coba cermati widget tersebut dengan cermat. Ketika tidak disorot oleh pointer mouse, widget label tersebut mempunyai background berwarna hitam. Namun, setelah disorot berubah menjadi warna kuning. Menarik bukan?
Jika Anda merasa tertarik, silakan ikuti langkah-langkah mudah berikut dengan teliti:
1. Anda telebih dahulu harus mempunyai widget label. Anda dapat menambahkannya dengan cara pilih Tata Letak --> Tambahkan gadget --> Label. Lewati langkah ini bila sudah ada widget label.
2. Pilih Template, kemudian masuk ke Edit HTML.
3. Cari kode ]]></b:skin>. Gunakan fitur search dengan menekan tombol Ctrl+F kalau tidak dapat ketemu.
4. Letakkan kode berikut tepat diatas kode ]]></b:skin>:
Jika Anda merasa tertarik, silakan ikuti langkah-langkah mudah berikut dengan teliti:
1. Anda telebih dahulu harus mempunyai widget label. Anda dapat menambahkannya dengan cara pilih Tata Letak --> Tambahkan gadget --> Label. Lewati langkah ini bila sudah ada widget label.
2. Pilih Template, kemudian masuk ke Edit HTML.
3. Cari kode ]]></b:skin>. Gunakan fitur search dengan menekan tombol Ctrl+F kalau tidak dapat ketemu.
4. Letakkan kode berikut tepat diatas kode ]]></b:skin>:
/*--Label Cloud Effects by http://asli-tutorial.blogspot.com--*/Perhatikan:
.Label a{
padding-left:20px;
background:#000;
padding:0 20px;
color:#fff!important;
border-radius:100px;
-moz-border-radius:100px;
height:32px;
line-height:32px;
text-transform:uppercase;
text-decoration:none;
border:none !important;
-webkit-transition:all .3s ease-in-out !important;t: 30pxt: 30px;
float:left;
margin-left:5px;
margin-top:5px;
font-size:14px; }
.Label a:hover{
color:#000 !important;
background:#ff0; }
#ff0= Adalah kode warna setelah widget label disorot oleh pointer mouse. Anda dapat melihat kode warna lainnya di blog ini.
14px= Ganti dengan ukuran huruf label.
5. Simpan Template. Klik Pratinjau untuk melihat perubahan.
+di+blogger.png)
0 komentar