Rabu, 08 Mei 2013

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. Oke langsung saja ikuti caranya berikut ini:


Sosial media berputar

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://downloadwallpaperanimasi.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://downloadwallpaperanimasi.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/AVvXsEg70ESG-rTqTBL2qA-Fk7TzEgChk6mVKFtnzDjbaiRzpPaJfTISnxJ0qmIy1k2Jt-jFowUxoT8e6vOhvAQtlGA7oELuhCNVn8EXw80heMVtj3hwP5sGcsHUnNzvPIrWbB5mLiYkOdYnKvus/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/AVvXsEjVCgfSmw4Fdi2fB3QbsnyOf56B8GgX_UpL7Lmulrz1EzzT1DnqU9t2U3p_5OcdS6vjgADddr1d-m6_yZQEcxSBaWgypK-gTgee4-tEtymYfD5rvXOAGrtUImfZebYomhHB-G__wiFgOwd8/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/AVvXsEhqNJxyDDN96lDqBjti6NgvQUSF5aAPPK_m5HRzjAjVK8w41AaZWcqwWUSYGuE0yN83Ttk4ykBJkA-GvrWkpLy_xJIDi_4DeB_dpPxiIbkmMZp8qK_X2NnASZPzpHhJYoJVlZRCWsVy5pwQ/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/AVvXsEh1L9Odyo2i9PyprQKzDbrfZajP4BZHms0gTNaRI8uQ_KaNpGTVQRTuZ8BXAqaN2NNK4ZG6x-J9zAGgBRvqV3uXYfjta4B19G9AUGBvPnD706KnPS5S70BbxewohmWPCc4qVRe_VlxC1kHT/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/AVvXsEib6ra3Qu_THfyvADHGUQkMyjywrAPNI51kpUe2in4GWHvfMe-BGoQhBNanRqOVqOG6XGELA2XtqGJQWOGSbGDWyVTqX29yLQwcYjcFHLU-SukOuFIZksx0KTWT_Lh-LAxxlLkb1MhCT6WX/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/AVvXsEhRvuf5vkIKrEqMlR6zqp8JCtUztjVcA-QtaTH0ewbT2cc321Zq4wv3dSQLjcdAivU4HJUfE5OMyWRJaMZ7qAAqrth43rPhpBQbV9TkJ4ze28VG78eR8HwjgQTwa_ptZcG6yLpeL6ixFU5f/s0/email.png' title='Email" /></a></p></center>
Keterangan: Silahkan ganti yang berwarna pink dengan alamat URL akun Anda. 

Jangan lupa di simpan dan lihat hasilnya.
Apabila ada yang mau ditanyakan seputar topik silahkan tinggalkan komentar dan jangan lupa follow Bangiz untuk mendapatkan update terbaru. Happy blogging!!! 

Tidak ada komentar:

Posting Komentar