Tutorial kali ini kita akan belajar membuat efek spinning pada icons social bookmark dengan bantuan CSS3 transform. Efek spining adalah efek berputar pada icons apabila disorot crusor pointer. Efek ini dapat pula anda terapkan pada image avatar blogger comments, thumbnail pada widget recent posts perlabel atau popular posts.
Langkah Pertama
- Login ke akun anda
- Pada dasbor>> klik template>> edit HTML
- Cari kode ]]></b:skin> lalu Salin dan tempel CSS berikut tepat diatasnya ]]></b:skin>
div#socialicons1 img{ /* 1st set of icons. Rotate them 360deg onmouseover and out */
-moz-transition: all 0.8s ease-in-out;
-webkit-transition: all 0.8s ease-in-out;
-o-transition: all 0.8s ease-in-out;
-ms-transition: all 0.8s ease-in-out;
transition: all 0.8s ease-in-out;
}
div#socialicons1 img:hover{
-moz-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-o-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
div#socialicons2 img{ /* 2nd set of icons. Rotate them 60deg onmouseover and out */
-moz-transition: all 0.2s ease-in-out;
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
-ms-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
div#socialicons2 img:hover{
-moz-transform: rotate(70deg);
-webkit-transform: rotate(70deg);
-o-transform: rotate(70deg);
-ms-transform: rotate(70deg);
transform: rotate(70deg);
}
div#socialicons3 img{ /* 3rd set of icons. Rotate them -360deg onmouseover ONLY. Note where the "transition prop is added */
}
div#socialicons3 img:hover{
-moz-transition: all 0.5s ease-in-out;
-webkit-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
-moz-transform: rotate(-360deg);
-webkit-transform: rotate(-360deg);
-o-transform: rotate(-360deg);
-ms-transform: rotate(-360deg);
transform: rotate(-360deg); }
- Simpan template
- Pada dasbor masuk ke menu tataletak>> klik tambah gadget>> pilih HTML/JavaScript
- Sekarang salin dan tempel kode berikut pada form yang tersedia dan beri judul yang anda inginkan
<div id="socialicons1"> <!-- angka 1 bisa dirubah dengan angka 2 atau 3 untuk model yg berbeda -->
<a href="http://urlanda.com/RSS"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfZ_V_j1swSjOJA700u3FezYeoZPpJzjXbNMdahbT4I7wcDO6wuKfb7EWoyf5Eqbhqj8SI8ZoUsXLo4BDYnT0E94j_q117oFAGD5KySkV6An-jksYmJOPb0KMlmPeLFyatSHHs3A4RgGk8/s1600/rss.png" /></a> <a href="http://www.delicious.com/delicious-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQ9sRx3D680cLmu7vE_Z5HNToAY1H09XAyAgksYzlFLDmkDUBrLbdACK3RYVdN9QL_x5RBuFCIlNs4V11Mwjoy95KH7ZHWYeji84L-7Z2uvXW9Ct3CiqXU9pJ6QndtojXPpGBpgWhZ14EY/s1600/delicious.png" /></a> <a href="http://www.facebook.com/FB-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhV1-IzFOEPMXqPmLmsRC3eQiDbsL-RUt9u-Zb2OhTLNaN_9Lfs3v6RC7ESMyF0rNr9SCcwyazYG_FdLSzIvoSHcY7BL7B1G6Xq3xzi-_19smXRDa5ezR_fUrY_x5lO2uA1unkm5pqNxA6q/s1600/facebook.png" /></a> <a href="http://www.twitter.com/twitter-ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgs2zLJVQvg57BQ9LeoXGR_uocNzYAyywDTgx4GrGS4o4Q8-0Q0SgrCq4qp1QUJkV23A6mQeVExI-fVTmUc8zPP7GQgHAROcKE2yLNMuFJjX6UsudEr7sRm_iwEypB58OjOpnWNX39bmtiV/s1600/twitter.png" /></a> <a href="http://www.yahoo.com/ID"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMNCQtjDZ4iOWQ02raoGvHOva7zJmjniYw1cG9KrEE9ifca-bXXAgAaUeLWH5EdE_YR14mIGwINBJU67cMZ-tqRi5JupoN2eO21KzNM4X3-rhdoD5EGz6oDki7Mw_0sZ-BUUQrXWCGRrBN/s1600/yahoo.png" /></a></div>
<div class="clear">
</div>
- Simpan dan lihat hasilnya diblog anda
- Mengganti model diatas ada 3 pilihan model ganti saja <div id="socialicons1"> dengan angka misalnyasocialicons2 atau socialicons3
ٱلْحَمْدُ لِلَّهِ رَبِّ
ٱلْعَٰلَمِين
Author : coxelgokil | ACI BUDAYA
Anda telah membaca
artikel tentang : Cara Membuat Efek Spinning Pada Icons Social Bookmark Dengan CSS3 . Oleh Admin, Anda diperbolehkan mengcopy-paste atau menyebarluaskan artikel ini, namun jangan lupa untuk meletakkan link dibawah ini sebagai sumbernya. Terimakasih...
