Tambah Spinning Ikon Sosial Menggunakan CSS3 Untuk Blogger

Sekarang saya akan berkongsi dengan anda, widget perkongsian berputar sosial, yang berputar apabila tetikus berlegar mengikut ke tahap yang anda tetapkan, dan kembali ke kedudukan asal ia apabila jauh dari sosial itu.
 

 

Bagaimana Untuk Tambah Spinning Ikon Sosial

Langkah 1
1. Login ke Blogger, Klik Layout :

2. Pada Elemen Halaman, klik Add Gadget di lokasi yang Anda ingin letak; 
3. Pilih HTML/Javascript;

Langkah 2
Copy kode dibawah ini dan letakkan dalam kontent yang telah anda buka tadi.

<style>

p#rb_socialicons img {
 /* Spinning Social Icons Widget By www.jeritanblog.com */
    -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;
}

p#rb_socialicons img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}

/* Spinning Social Icons Widget By www.jeritanblog.com */

</style>


<center><p id="rb_socialicons">
    <a href="http://www.facebook.com/jeritanblog/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0qrg-r65XHqVZJEKY6cOUg0iDVtlwiVDlB2u9fPjapbpYdXku7mzY4bJMFxcQLdrfWbFB8dPiVPCbNV2IDf_WWyVGpKFV8mfRU5WTcIG3BCVUlweXNTKkYJXVi2hXi6I-dupZgm8mS84/s1600/rb+facebook+icon.png" /></a>
    <a href="http://www.twitter.com/nikzhafran/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJb437uZTjfR7MCdvBuWq4LPFM11XgLjpAdslxfdDZDFqVeIzfFpbKQ97XbHZq0acmQfeEWMYnX7KvHzGxdg6aEg5eYlXtnKkg7YDHEhPDeGJIxEqGb5wT7SP57UDBv605SZbSnUiYQr8/s1600/rb+twitter+icon.png" /></a>
    <a href="https://plus.google.com/u/0/102645638653451045589">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3_gBFAP-WRWgQDY4VIzrO_mWNjPmbrL9cnyDlZ0RbB3rL3BsS9VpzM5-vWe-sPSSp3ntYJNiXjJTDyjHuKODO5Kl4WUSzTHpaA9eR8tKQF8BCQFx0SiHEahEMUyNPEgFklDpcccFCPp4/s1600/rb+google+plus+icon.png" /></a>
    <a href="http://www.feeds.feedburner.com/jeritanblog/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTJf00FGgaW_ELvR73mD2v0tQ_ZwGiI-JbFERK7DNkbKeC96-n_HhBKQ1kwGmG1zAvBl4Q-T5mOv2TSjdWSShCwxe2_lfoyK118rhIvlHRc1GBXso3VrgCCIoQtkAEhxtAWfLjM3HHAp0/s1600/rb+rss+feed+icon.png" /></a>
    <a href="http://www.youtube.com/jeritanblog/">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSiyQ9rJNByi2anzKTTTueW0SNattkwwNpULknkpOKdIyuPwbl9k1gH-LZHwhbbTQkU4oSMPhawk1wzAbahRcGZQEhA4QzezYnxxv7983tLxGqKkFDWoknrgwlr0p7vIXnDPlWwU3e3qY/s1600/rb+youtube+icon.png" /></a>
</p></center>


Panduan Edit


Untuk tukar (time taken) putarkan ikon, edit je 0.8s
Untuk tukarkan degreeikon berputar,edit je360deg



Semoga berjaya...