Widget 3D Sosial Ikon dengan Efek Putar Putar

 

Sekarang Poetra 86 akan membahas sebuah ikon sosial 3D - dengan efek spin memutar keren! dengan penggunaan efek memutar CSS, ketika Anda menempatkan kursor di atas ikon masing-masing mereka bisa berputar 360 derajat dan berputar kembali ketika sobat memindahkan kursor.Logo masing-masing memiliki nama yang berbeda situs media sosial pada ikon sehingga pemula akan mengenali mereka dengan mudah.
Langsung aja tanpa banyak basa basi.Cekidot...

Berikut adalah bagaimana Anda dapat menambahkannya ke Blogger Anda. 

Blogger Dashboard > Layout/Tata Letak > Tambah Gadget  > HTML Javascript
 
Copy dan paste kode di bawah ini :

<style> #social a:hover {background-color: transparent;opacity:0.7;} #social img { -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; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); } </style> <center><div id="social"> <!--Start Rss Icon--> <a title="Grab Our Rss Feed" href="YOUR-FEED-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjt2IzBm5BBML1h39uYSNIpK5K7hjnP55-qqCJMBRfcrBFCuJTvYAAIHvzqzIi3ds5-bC18LFYK82mJZbg_5zhXQDWKg0lAAtp-xel-14fuepxHUvsUVnoQBbOOTQzE_AI4tPcebZ-FiBBS/s1600/RSS-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Rss Icon--> <!--Start Email Rss Icon--> <a rel="nofollow" title="Get Free Updates Via Email" href="YOUR-EMAIL-RSS-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1nQ8sy4JNKdcP8n-R1F2cS-M9lpAcUyNdnysvqOS6nz2VFWT_wKBeCkvUVPaagg41szrqiXwbeJNsblioq_hoMhqzABar06SDlUXCtBYy6iPiP2j_FJs5_hRy-GQrelsEh-MCftOj6n0_/s1600/RSS-EMAIL-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Email Rss Icon--> <!--Start Facebook Icon--> <a rel="nofollow" title="Like Our Facebook Page" href="YOUR-FACEBOOK-PAGE-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhC6yJCQWyfGLufJlMj7J0Y-ciaTjb5KjUYBXNwTFWsj3XA5jEbupVJDMGcc5yYBPaupjDaM0kuCR9z0DiAdeVENG4P9gMIAqaO1dA_3dTs4hqw_eqM5QpD1Om94JHbmNO0CCyGpcZY2E5C/s1600/FACEBOOK-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Facebook Icon--> <!--Start Twitter Icon--> <a rel="nofollow" title="Follow Our Updates On Twitter" href="YOUR-TWITTER-URL-HERE" target="_blank"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj87IQY7Q-JyAF0c2aZ5YejwR_m12bfuEHdRiatfVNGw7mRyhzvpyIDwA4wbJ6G1oP6W0tGiPw6zhW_yUEF3P_KAJaxsN9tfbQHrw_ibnilSh9W0zPLiGrGeDvLOelW8QEGazk0qToyzDHH/s1600/TWITTER-48x48.png" style="margin-right:1px;" alt="Icon"/></a> <!--End Twitter Icon--> <!--Start Google+ Icon--> <a title="Follow Us On Google+" rel="nofollow" href="YOUR-GOOGLE-PLUS-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgNue-k1cujMLubAHpIj5FLo833lXvWUPYuCsXg1tOBbJPgvmVvSiiO0jltadOCjXtJ7XY9Rl57KqogCeJYHrKPU3hBIL6fAHGTKO4GU5wNA-s3KjVs2EicjiFLw-1wDuYefHS2K98yGF_k/s1600/GOOGLE-PLUS-48x48.png"/></a> <!--End Google+ Icon--> <!--Start Pinterest Icon--> <a title="Follow Our Pins" rel="nofollow" href="YOUR-PINTEREST-URL-HERE" target="_blank"><img style="margin-right:1px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiog6jQqOVesBihlaimB7Xgo1flMIhsQAYsKRDXpX3uNqDgcLqlZX7twwYpRX_QecnNomqBKFFGav7XwnNvHeZD0F42DAI9Wd3AoKUD4gNMT1YzGxQqhOIAmQx0NqTTs920od0mHxUIkosH/s1600/PINTEREST-48x48.png" alt="Follow Me on Pinterest" /></a> <!--End Pinterest Icon--> </div><br/> <!--Start Feed Count Button--> <a href="YOUR-FEEDBURNER-URL-HERE" target="_blank"><img alt="spice up your blog" src="http://feeds.feedburner.com/~fc/spiceupyourblog?bg=ff9933&fg=000000&anim=1" style="border:0" /></a><!--End Feed Count Button--> </center>

Catatan : Ganti bagian tulisan warna merah dengan profil sosial sobat sendiri

kode setiap ikon antara tag seperti <-start data-blogger-escaped-icon-="icon-" data-blogger-escaped-rss="rss"> Kode di sini <-end data-blogger-escaped-icon-="icon-" data-blogger-escaped-rss="rss">>.

Untuk menghapus ikon, menghapus kode di antara tag.