Membuat Icon dg Efek css3 di Link List Label Blogger

Link pada widget label blogger biasanya ditampilkan apa adanya dengan penanda link hanya berupa sebuah penada default yang dihasilkan dari sebuah kode css "list style". Penanda ini biasanya berbentuk cyrcle, disc atau square. Ada cara untuk memberi penanda setiap link list widget label agar berbeda dan bisa dibuat seasuai selera. Sebuah background image dapat kita manfaatkan dan anda dapat secara bebas membuatnya dalam rupa apapun. Icon kecil ini sebaiknya berukuran 10px (height) hingga 16px (height) dengan perhitungan font yang digunakan sebesar 12px atau 11px.

D E M O

Sekalipun dengan merubah penanda link dalam bentuk icon sudah mampu memberi citarasa berbeda, namun apabila kita sedikit menambah kode css3 ke dalamnya tentunya kan menjadi lebih menarik lagi. Efek gerak serupa animasi yang tercipta melalui css3 transition akan membuat icon bergeser ke arah kanan ketika cursor diarahkan di atasnya dan kemudian kembali lagi ketempat semula ketika cursor dipindahkan. Gerak animasi icon link list seperi ini dihasilkan dengan mempermainkan padding atau margin dan css3 transition. Kode css yang digunakan sebagai berikut:

Kode CSS :

#Label1 ul{
       list-style:none outside none;
       margin:0 auto;
       padding:0;
       width:98%;
}
#Label1 ul li{
       padding:5px 0;
}
#Label1 ul li a{
       background:url('https://sites.google.com/site/gubhugreyotprojects/mart-2012/images/icon/flag-icon-label.png') no-repeat scroll left center transparent;
       display: inline-block;
       padding-left: 20px;
       transition:0.5s ease;
       -o-transition:0.5s ease;
       -ms-transition:0.5s ease;
       -moz-transition:0.5s ease;
       -webkit-transition:0.5s ease;
}
#Label1 ul li a:hover{
       margin-left:20px;
}

1. Login ke Blogger.
2. Setelah halaman "Dasbor (Dasboard)" terbuka, klik "Rancangan (Design)".
3. Klik "Edit HTML".
4. Lakukan "Backup Template".
5. Cari kode "]]></b:skin>"
6. Simpan kode css tepat di atas kode ]]></b:skin>
7. Klik "Simpan Template".
8. Selesai dan silahkan lihat hasilnya dengan membuka blog.

Catatan/Keterangan :

1. Untuk melakukan semua proses di atas satu syarat utamanya adalah anda sudah menggunakan/mengaktifkan "Widget Label" blogger.
2. Dalam kode css di atas telah disertak sebuah icon bendera merah putih. Jika ingin menggunakan icon tersebut sebaiknya upload icon tersebut melalui halaman posting untuk mengganti icon dalam sample kode css.
3. Jika membutuhkan panduan backup template, cara mencari kode dan berbagai cara menyimpan kode baru di template, silahkan buka Special Tutorial di kolom bagian kiri.

Silahkan juga buka Tutorial lain yang sangat menarik dan patut di ikuti sampeyan semua. Akses melalui link di bawah ini :

Posting » Jemuah    LEGI, Maret, 09, 2012

» Happy Blogging - gubhugreyot «