Cara Menampilkan Tombol Sosial Media Melayang Facebook, Twitter dan Google Plus di WordPress

Sebenarnya untuk memasang tombol soaial media seperti facebook, twitter dan google plus sama dengan cara membuat gambar melayang, 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 blogsport tombol twitternya bergambar burung dan bisa terbang kemana-mana, itu karena di blogsport kita dapat dengan bebas bermain html dikarenakan blogsport mendukung kode javascript.

Langsung saja sobat saya akan berikan kode HTML nya

1. Tombol Facebook, Twitter dan Google Plus tanpa background :

Kodenya :

<div><a style="position:fixed;top:270px;left:6px;" href="http://www.facebook.com/agus.wijaya.167"title="My Facebook" target="_blank" rel="nofollow"><img src="https://aguswijayaonline.files.wordpress.com/2013/03/agus-wijaya-online1.png"></a>
<a style="position:fixed;top:305px;left:6px;" href="https://twitter.com/aguswijaya"title="My Twitter" target="_blank" rel="nofollow"><img src="https://aguswijayaonline.files.wordpress.com/2013/03/agus-wijaya-online2.png"></a>
<a style="position:fixed;top:341px;left:6px;" href="https://plus.google.com/102406066736702596451"title="My Google Plus" target="_blank" rel="nofollow"><img src="https://aguswijayaonline.files.wordpress.com/2013/03/agus-wijaya-online3.png "></a></div>

2. Tombol Facebook, Twitter dan Google Plus dengan background :

Kodenya :

<div style="display:scroll;position:fixed;top:220px;left:6px;"><a title="terserah Anda" href="http://terserah Anda"><img alt="" src="http://aguswijayaweblog.files.wordpress.com/2013/02/agus-wijaya3.png" /></a>
<a style="position:fixed;top:278px;left:30px;" title="My Facebook" href="http://www.facebook.com/agus.wijaya.167" target="_blank" rel="nofollow"><img alt="" src="https://aguswijayaonline.files.wordpress.com/2013/03/agus-wijaya-online1.png" /></a>
<a style="position:fixed;top:313px;left:30px;" title="My Twitter" href="https://twitter.com/aguswijaya" target="_blank" rel="nofollow"><img alt="" src="https://aguswijayaonline.files.wordpress.com/2013/03/agus-wijaya-online2.png" /></a>
<a style="position:fixed;top:349px;left:30px;" title="My Google Plus" href="https://plus.google.com/102406066736702596451" target="_blank" rel="nofollow"><img alt="" src="https://aguswijayaonline.files.wordpress.com/2013/03/agus-wijaya-online3.png" /></a></div>

3. Tombol Facebook dan Twitter berbentuk bulat tanpa background :

<div><a style="position:fixed;top:270px;left:15px;" title="My Facebook" href="http://www.facebook.com/agus.wijaya.167" target="_blank" rel="nofollow"><img alt="" src="https://aguswijayaonline.files.wordpress.com/2013/02/agus-wijaya-online.png" /></a>
<a style="position:fixed;top:330px;left:15px;" title="My Twitter" href="https://twitter.com/aguswijaya" target="_blank" rel="nofollow"><img alt="" src="https://aguswijayaonline.files.wordpress.com/2013/02/agus-wijaya-online1.png" /></a></div>

4. Tombol Facebook dan Twitter berbentuk bulat dengan background :

<div style="display:scroll;position:fixed;top:220px;left:6px;"><a title="terserah Anda" href="http://terserah Anda"><img alt="" src="http://aguswijayaweblog.files.wordpress.com/2013/02/agus-wijaya3.png" /></a>
<a style="position:fixed;top:270px;left:15px;" title="My Facebook" href="http://www.facebook.com/agus.wijaya.167" target="_blank" rel="nofollow"><img alt="" src="https://aguswijayaonline.files.wordpress.com/2013/02/agus-wijaya-online.png" /></a>
<a style="position:fixed;top:330px;left:15px;" title="My Twitter" href="https://twitter.com/aguswijaya" target="_blank" rel="nofollow"><img alt="" src="https://aguswijayaonline.files.wordpress.com/2013/02/agus-wijaya-online1.png" /></a></div>

Keterangan :
Ganti kode alamat dengan alamat akun facebook / twitter / Google Plus Anda, dan satu lagi sobat jangan mengganti kode alamat yang bertuliskan “files” karena akan menghilangkan icon tombolnya..

Demikian cara Menampilkan Tombol Sosial Media Melayang Facebook, Twitter dan Google Plus di WordPress
Semoga bermanfaat..

Iklan

6 Tanggapan

  1. Makasih gan
    Bermanfaat sekali….

  2. waaahhhh, bagus bangeeettt
    makasih om sarannya 🙂

  3. saya coba dulu mas, kayanya seru juga pasang diblog pribadi ni biar tambah rame 🙂

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s

%d blogger menyukai ini: