Membuat Share Sosial Media Spining effect CSS3

Selamat pagi sobat blogger semoga dalam menjalankan aktivitas hari ini kita semua mendapatkan kemudahan dari yang maha kuasa amin, setelah sebelumnya saya posting Tentang Award Pertama Untuk Kolom Tutorial™,  Sunshine Award Dari Adis Outline selanjutnya Kembali ke Tutorial Blog Kali ini bahasan kita adalah Bagaimana Cara Membuat Share Sosial Media Spining effect CSS3 untuk tutornya silakan disimak hehhehhe..

VIEW A DEMO

Penerapannya :
1. Seperti biasa Login dulu ke akun Blogger sobat
2. Klik Tata Letak
3. Klik Add Widget
4. Klik HTML/Java Scrift dan taruh Kode dibawah ini :

<style>

p#rb_socialicons img {
 /* Spinning Social Icons Widget By http://joens-tutorial.blogspot.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 http://joens-tutorial.blogspot.com */

</style>


<center><p id="rb_socialicons">
    <a href="http://www.facebook.com/joens.tutorial">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj6iF2Yy9fk1rJ2nvtyMd-qCE2lDqzXJHT-Ai5fcwQGL63iljh2qJT_FsnEuD1B0lvZERqFxFE9DT9PN6eMYVgibtAGO9OizQGeS-t2iVKW6_q0yOdVbtW_H7qyvzbnEHrOSTqI5nn3UxA/s1600/rb+facebook+icon.png" /></a>
    <a href="http://www.twitter.com/alexjoen">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGZQyxP9aHCbbgXdWDIUvcc0YrqY222SgY2bLtWWy9i44WUcdeD8kGsEE3Zw6ikh_7-68gljvbaDrpcJBf84t60EcESFfWMR-ZDJ10Drsklpprv4CJQj0qj7Am8Z0KJcJisOgPdP-aaLY/s1600/rb+twitter+icon.png" /></a>
    <a href="https://plus.google.com/u/0/108597184913188482016">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj20s8ss4QkD4XjjLD-5q32kDoWSMjqZhrd1sVFe9QfJpwMSfOrufb0pN-5dMjccX3V0ccIBvjQfLUMT525PRnSHMQZrrxIqH-5u88TIpLqoCUkmWoMoBrmhPmIKyGx-987tP9svgFP1B0/s1600/rb+google+plus+icon.png" /></a>
    <a href="http://www.feeds.feedburner.com/kolomtutorial">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjlPP_o5vLVn4tCgvt76AZb5bqCS4AKHTaFeJBuu5uvv6jGC3ZI_mviTG3r7MFavCDxpLRvr3Lbx4GvMSW5z2_5qnp4jeftX2ERi28OriQBOkpkWiOnHfLFCpbC5ajhy7aeWnk-XnmvTlA/s1600/rb+rss+feed+icon.png" /></a>
    <a href="http://www.youtube.com/alexjoen">
<img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg3OI1HIOCC3PJoOGT55ieeV3Z3SK6AjuelluCpTmReD7osLVleXgMg8BDFwqv0mxZ90jdSQhjTxl0_j_1wVlWSYXDLYP8vCtIIB_iWlfcnLJFtaE_0jSQil_uU4q_PQQw5QXMawZqXaiI/s1600/rb+youtube+icon.png" /></a>
</p></center>

5. Klik Save.

Note :
Ganti Semua yang diblok warna dengan akun terkain sobat. Selamat Berkreasi.

M. Alex Joenaedi

Saya hanyalah seorang Newbie di dunia Blogger, Aktivitas Ngeblog dilakukan hanya pada waktu senggang saja atau tidak teratur.

Share this post