Sebelumnya irfan handi telah berbagi Cara Menambahkan Tombol Sosial Media di Sidebar WordPress, sekarang kita akan mencoba bagaimana Cara Menambahkan Tombol Sosial Media Melayang di WordPress. Tombol sosial media yang saya maksud disini adalah tombol sosial media yang paling sering digunakan oleh para blogger, yaitu tombol Facebook dan Tombol Twitter. Seperti apa sih tombol sosial media yang dimaksud? dan bagaimana cara memasang Tombol Sosial Media Melayang (Facebook dan Twitter) di WordPress ini?
Sebenarnya untuk memasang tombol facebook dan twitter melayang ini sama dengan cara Membuat Gambar melayang di WordPress.com yang dulu pernah saya bagikan, namun kita akan sedikit memodifikasi gambar melayang atau floating image-nya dengan mengganti alamat gambar dan link dari sosial media yang ingin kita pasang. Tapi berbeda dengan twitter melayang yang dimiliki oleh blogger di blogspot, tombol twitternya bergambar burung dan bisa terbang kemana-mana, itu karena di blogger kita dapat dengan bebas bermain html karena mendukung kode javascript.
Berikut beberapa kode tombol sosial media yang dapat Anda coba untuk dipasang di widget sidebar blog WordPress Anda :
Klik Gambar untuk Melihat Hasilnya
1. Tombol Facebook dan Twitter tanpa background :
Kodenya :
<a style="position:fixed;top:270px;left:10px;" href="http://www.facebook.com/irfan.handi" title="My Facebook" target="_blank" rel="nofollow"><img src="http://irfanhandi.files.wordpress.com/2012/06/facebook-64x64.png"></a>
<a style="position:fixed;top:335px;left:10px;" href="http://twitter.com/#!/irfanhandi80" title="My Twitter" target="_blank" rel="nofollow"><img src="http://irfanhandi.files.wordpress.com/2012/06/twitter-64x64.png"></a></div>
2. Tombol Facebook dan Twitter dengan background :
Kodenya :
<div style="display:scroll;position:fixed;top:224px;left:0;"><a href="http://terserah Anda" title="terserah Anda"><img src="http://irfanhandi.files.wordpress.com/2012/06/tombol-sosial-media.png"></a>
<a style="position:fixed;top:270px;left:10px;" href="http://www.facebook.com/irfan.handi" title="My Facebook" target="_blank" rel="nofollow"><img src="http://irfanhandi.files.wordpress.com/2012/06/facebook-64x64.png"></a>
<a style="position:fixed;top:335px;left:10px;" href="http://twitter.com/#!/irfanhandi80" title="My Twitter" target="_blank" rel="nofollow"><img src="http://irfanhandi.files.wordpress.com/2012/06/twitter-64x64.png"></a></div>
3. Tombol Facebook dan Twitter pojok atas bawah :
kodenya :
<a style="position:fixed;bottom:45px;right:0;" href="http://www.facebook.com/irfan.handi" title="Berteman Yuk!!!" target="_blank"><img src="http://irfanhandi.files.wordpress.com/2012/05/fb.png" alt="" width="" height="" /></a>
<a style="position:fixed;top:0px;left:0;" href="http://twitter.com/#!/irfanhandi80" title="Follow Me" target="_blank"><img src="http://irfanhandi.files.wordpress.com/2011/09/twitter-irfanhandi80.png" alt="" width="" height="" /></a>
Kode Tombol-tombol sosial media diatas dapat Anda pasang dengan langsung meng copy-paste salah satu kode tersebut ke dalam Widget Text Sidebar Anda.
Keterangan :
- Ganti kode yang berwarna merah dengan dengan alamat akun facebook/twitter Anda,
- Ganti kode berwarna ungu untuk mengganti judul sesuai dengan keinginan Anda,
- Ganti kode yang berwarna biru dengan alamat gambar yang bisa Anda ganti sesuai keinginan Anda. Cara Upload/mengganti gambar bisa Anda baca pada tutorial sebelumnya, yaitu Cara Menambahkan Tombol Sosial Media di Sidebar WordPress.
Demikian Cara Menambahkan Tombol Sosial Media Melayang (Facebook dan Twitter) di WordPress ini, Semoga bermanfaat.
usefull banget mas, makasih…
Posted by emhidayat | Oktober 27, 2012, 6:01 amada yang berhasil?
Posted by fitri999 | Desember 15, 2012, 7:14 ammakasi bossssssssss
Posted by mastur songenep | Oktober 29, 2012, 1:51 amtnks mas irfan dah berbagi tips, saya langsung cobax nih…
Posted by ulhandhy | November 2, 2012, 4:24 pmAne liat blog mas mantap sekali, kereeennn……
Posted by Trade Azon | November 2, 2012, 4:28 pmmas, bagaimana kalau fb&twitternya berada pada 1 bar dengan header pak??
Posted by bibblehit | November 9, 2012, 4:47 amReblogged this on osis SMKN 1 Mojosongo and commented:
cool blog
Posted by triuchi | November 9, 2012, 11:51 ammantap gan .. infonya .. saya akan berkunjung kembali ..
Posted by mantap GAN infonya .... | November 11, 2012, 1:38 pmboleh di edit gak?? heheheh om irfan boleh ya..???
Posted by kreamping | November 29, 2012, 5:46 amsangat membantuku,, mksh ya?
Posted by adrpro | Desember 12, 2012, 6:23 am