Bangiz - Jika anda sedang mempercantik blog atau website 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 admin pernah posting yang lucu juga romantis, kali ini saya akan memberi tahu cara membuat widget sosial network yang bisa berputar jika di sentuh kursor. Oke langsung saja ikuti caranya berikut ini:
 |
| Sosial media |
Anda hanya perlu menambahkan kode CSS berikut ini. Jika belum tahu cara menambahkan kode HTML/Javascript, silahkan baca Cara Menambahkan Kode HTML/JavaScript.
<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/AVvXsEjvtHfCRgQ_dUxlJI78mKMT3Bl5TYQp-9ajkuTXBA5aCdJGXN8cZTEqiDOQRV52TdQ8eBuQysZlskmeFzPHjrK_zsAAUJzKJdbZvgEG9-CaWJ6NR7zMp5lMykQqlOpH-qSRb3OgUEq11G-Q/s0/facebook.png' title='Facebook" /></a>
<a href="http://twitter.com/akunAnda"' target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQgucNGtA4590c1dbhztdAH0werqw5oMA1ng9WCva8Kpye_KwJf6HvPfF3rZiuHxofJLlEDFCXOb2-i5kxIlfoiMu9pAvvTdwmK4qnpXsnvj9pMC2kqSki1kVEfSaW-Jf064PMJelfAeE-/s0/twitter.png' title='Twitter" /></a>
<a href="https://plus.google.com/u/0/116854867169638500872"' target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWB_8-IKFAEr1MbWldgxjwpjQnZvl83LUJBKz-7uaYdzZAq7XD-SCpPZyVndy1pol95GuD-AfM8W1-LHqpCGCTC-ZmQFY0L09CJZ2M6ysqNR_737tml_PkyH73oxVVq6g_yLxUJMLv_3K1/s0/gplus.png' title='Google Plus" /></a>
<a href="http://www.linkedin.com/akunAnda"' target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxnvhwBP_edmb3DmC0vfBhAAFTmJZHC7Y0iwQo1CMSvFPZR1iWeEYiuZ5qoN4uLRO9bGGSwEW2zBtVkWAuFlH6BWhnbE1K4UJPw1SHaEhEnQfE0I5bXSzmnPqM7jIibi99D0lj0pt28ih/s0/linkedin.png' title='LinkedIn" /></a>
<a href="http://feeds.feedburner.com/akunAnda"' target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhOe5OcoSFdu68gI9ojeGFl5h7OIMPzvgIqhVIngNnERPwXf76SIBYNrKpu0dqWB7VGnUBSTR6Yz-98VGTuFpEZzRtvVXG2QdrFWWlOjMV_itJDQH6IB8V4IJD_nV_Q5yMXPHSy_6GuTtr7/s0/rss.png" title='FeedBurner" /></a>
<a href="http://feedburner.google.com/fb/a/mailverify?uri=akunAnda"' target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEibAvABH4IAfuXmb8-mmwXTllZ80mazvYRNgbxpuCRi_4NlbGBukgjBxu7M6FDZN70kmg4hH_BN1uxO5Ugg3odJ35Xhaati3vGYm8M70-YVsiQET3UzMwZPGbsdpPaa1PvnoABK5om5qaxn/s0/email.png' title='Email" /></a></p></center>
Keterangan: Silahkan ganti yang berwarna pink dengan alamat URL akun Anda. Adapun yang berwarna biru adalah jenis sosial media yang akan ditampilkan. Jika ingin menghilangkan salah satu sosial medianya, hapus kode berikut:
<a href="http://www.linkedin.com/akunAnda"' target='_blank'><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxxnvhwBP_edmb3DmC0vfBhAAFTmJZHC7Y0iwQo1CMSvFPZR1iWeEYiuZ5qoN4uLRO9bGGSwEW2zBtVkWAuFlH6BWhnbE1K4UJPw1SHaEhEnQfE0I5bXSzmnPqM7jIibi99D0lj0pt28ih/s0/linkedin.png' title='LinkedIn" /></a>
Jangan lupa di simpan dan lihat hasilnya.
Itulah cara membuat widget sosial media dengan efek animasi berputar. Berbagi itu indah, jadi silahkan berbagi kepada teman-teman sosmed Anda dan jangan lupa follow +Bangiz untuk mendapatkan update terbaru. Happy blogging!!!
0 comments