Cara Membuat Tombol Share Melayang

Cara membuat tombol share dan like facebook melayang dengan posisi tetap. Tombol share FB atau twitter mungkin akan bermanfaat untuk sebuah blog. Bahkan web atau situs portal berita yang trusted juga memakainya. Dengan tombol share akan memudahkan visitor untuk share artikel tertentu di akun Facebook misalnya.

Dengan membuat tombol share ini mungkin akan menambah jumlah pengunjung dari artikel yang dibagikan ke akun Facebook atau Twitter tadi. Banyak yang menyediakan layanan seperti ini, misalnya addthis. Dan berikut ini cara membuat tombol share melayang di blog, jadi visitor akan selalu melihat tombol tersebut saat menggulirkan halaman kemanapun di blog kita.

Cara membuat tombol share melayang

Untuk blog di Blogger 

1. Masuk ke layout di blogspot.
2. Add widget, pilih add html
3. Masukkan kode berikut ini:

<!--Widget Start-->
<style>
#pageshare {position:fixed; bottom:5px; right:1px; float:left; border: 1px solid black; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#eff3fa;padding:0 0 2px 0;z-index:10;}
#pageshare .sbutton {float:left;clear:both;margin:5px 5px 0 5px;}
.fb_share_count_top {width:48px !important;}
.fb_share_count_top, .fb_share_count_inner {-moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small, .FBConnectButton_RTL_Small {width:49px !important; -moz-border-radius:3px;-webkit-border-radius:3px;}
.FBConnectButton_Small .FBConnectButton_Text {padding:2px 2px 3px !important;-moz-border-radius:3px;-webkit-border-radius:3px;font-size:8px;}
</style>

<div id='pageshare' title="Share This With Your Friends">
<div class='sbutton' id='gb'><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div>

<div class='sbutton' id='rt'><a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" >Tweet</a><script src='http://platform.twitter.com/widgets.js' type="text/javascript"></script></div>

<div class='sbutton' id='fb'><a name="fb_share" type="box_count" href="http://www.facebook.com/sharer.php">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><br/></div>

 <!--Widget End-->

Keterangan: tulisan yang berwarna merah adalah untuk mengatur posisi, jarak bawah (bottom) dan samping kanan (right) dari blog.

Untuk blog di Wordpress
Untuk Wordpress juga sama, tinggal ke widgets, dan add text, masukkan kode tersebut.


Dan hasilnya seperti pada postingan ini di pojok kiri bawah. Demikian sekedar catatan tentang cara membuat tombol share melayang di blog wordpress atau blogspot.

3 comments:

Wawan Kurniawan said...

kerennnn ..... -berbagi itu indah-
>>www.wa0n3berbagi.blogspot.com
>>www.facebook.com/wawan.radcliffe

Mifta Nurdin said...

ga bisa dikopi, gimana mau pasang

Juniyarsa Ardilla said...

Luar biasa mantebb tutornya. Sayang artikelnya tidak bersahabat karena tidak bisa di copy. Andai saja bisa, tentu akan lebih nikmat yang namanya berbagi itu...

Post a Comment