Cara Membuat Sosial Media Animasi Berputar

Jika anda sedang mempercantik blog atau site yang Anda punya, rasanya belum lengkap kalau tidak menyertakan tombol sosial media. Karena sosial media ini merupakan salah satu jalan untuk memperkenalkan blog atau tulisan di dalamnya ke khalayak ramai. Apalagi saat ini banyak sekali sosial media yang bisa kita gunakan. Setelah sebelumnya saya posting yang hot, lucu juga romantis, kali ini saya akan memberi tahu cara membuat sosial network yang bisa berputar jika di sentuh kursor. Untuk contoh, Anda bisa lihat di bagian header blog Bangiz ini. Oke langsung saja ikuti caranya berikut ini:

Silahkan tambahkan kode CSS berikut ini. Jika belum tahu cara menambahkan kode HTML/Javascript lebih baik baca dulu di sini.

<style>
p#bangiz_getyourinspiration img {
/* Social Share Widget By http://bangiz.blogspot.com */
    -moz-transition: all 0.9s ease-in-out;
    -webkit-transition: all 0.9s ease-in-out;
    -o-transition: all 0.9s ease-in-out;
    -ms-transition: all 0.9s ease-in-out;
    transition: all 0.9s ease-in-out;
}
p#bangiz_getyourinspiration img:hover {
    -moz-transform: rotate(360deg);
    -webkit-transform: rotate(360deg);
    -o-transform: rotate(360deg);
    -ms-transform: rotate(360deg);
    transform: rotate(360deg);
}
/* Social Share Widget By http://bangiz.blogspot.com */
</style>
<center><p id="bangiz_getyourinspiration">
<a href="http://www.facebook.com/markudes"' target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjDYw-IYMTSJ_SFXJyRXOQuXrVS0kKffAO3ySlHsQPEuvly9tCIfngXd8IAkCrwTBwrsjmPl_g5VUC-nEhXAsQfCTDXYfftOvyRYOHzH6So_O_fn7fClVZqPMVuZ3AugYFiSFVGWJh_EKOa/s0/facebook.png' title='Facebook" /></a>
<a href="http://twitter.com/markudes"' target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOa0RvdA9NoCnwPOf9bPI5mUUvecI81wCsCUXklJVbk1t3m6gdvFAXAbcsfA2pAPZ0lCIheoiskMAkHn8DHa6yEr3ffu8gxbhZunqNEZeHBeSV6TJMWP_3rRhXdtPkVz9VWObuNcgE1_cQ/s0/twitter.png' title='Twitter" /></a>
<a href="https://plus.google.com/u/0/116871495169638500872"' target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOP9OIOVtO0ozjdAuX4AhTukRAV995GTuHqL4W2mwOU1acxQOacEdQKBKBytTSgeD-QgOV1gF9EVeW3ILx1Pc7mXPbUrszfPg5YtABDBcj76gbifwhQyhYNZM29V39_UOOIJz7q2CN_rHP/s0/gplus.png' title='Google Plus" /></a>
<a href="http://www.linkedin.com/markudes"' target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhB0ZUwWa0IzycQnxBts_brMO1phBWda1gjGPtx53KYyuK-rB4H-WasYZXreQEhilQI37z1YtgnTXMsK7P286cX7WvMseqmz9EKeHu3ptW6mDsfTzCbe_RYSUBTm7O_gYUrrRaIMX8Ti13E/s0/linkedin.png' title='LinkedIn" /></a>
<a href="http://feeds.feedburner.com/bangiz"' target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKtONMU-Ebkd7T5DjnLI2I0E4mxf8Fe1MOrIex5PSwlS3zdabydSnycD3tMyApDn_5VFCaPjNtvfw9BBBdGJ_edR59aSQah8N8nqhncWF_FLnkeFUSkZvy4ufTsbQwqDgHBupfqJHlrDNx/s0/rss.png" title='FeedBurner" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=bangiz"' target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhR-teHysriDS2ksuc9kfHY8Y2fQIZ6Kgn4l4uuNefVYYVCQmljGPFQzRXfjUW1HCa5ln4v3bSk4g-5wh_X5Dvxft7H3O8cHGIOFVSADkEhZ1m3Dpxm4qmoWaFR5uo78g4cMmXq8rbXXBW/s0/email.png' title='Email" /></a></p></center>

Silahkan ganti yang berwarna pink dengan alamat URL akun Anda.

Jangan lupa di simpan dan lihat hasilnya.
Apabila ada yang mau ditanyakan silahkan tinggalkan komentar. Happy blogging!!!

Judul : Cara Membuat Sosial Media Animasi Berputar

Deskripsi : Jika anda sedang mempercantik blog atau site yang Anda punya, rasanya belum lengkap kalau tidak menyertakan tombol sosial...
keyword :Cara Membuat Sosial Media Animasi Berputar, blogging, Tips dan Trik