Tombol Share Melayang di Blog

"Tombol Share Melayang di Blog" menjadi topik pilihan dalam artikel kali ini. Tim Soepeno Blog menyajikannya untuk pembaca sekalian. Selamat menikmati!

Banyaknya share artikel di berbagai sosial media seperti facebook, twitter, google+, dan sebagainya akan meningkatkan popularitas blog agan di search engine ataupun bagi para user. Dengan semakin banyak pengunjung blog yang membagikan artikel agan ke situs sosial sharing, tentu menjadi keuntungan tersendiri buat agan.

Agar pengunjung blog agan lebih mudah untuk berbagi, ane rasa agan perlu untuk memasang tombol share di blog agan. Biar tampilannya menarik dan tombol share itu mudah terlihat oleh pembaca, membuat tombol share melayang ane rasa menjadi salah satu ide brilian untuk agan coba. Disini ane bantu bagikan artikel tentang cara bikin tombol share melayang di blog. Coba lihat gambar ini:

Tombol share melayang juga ane terapin di blog ini, agan bisa geser pandangan ke samping. Jadi dengan memasang tombol share melayang tersebut, walaupun halaman artikelnya panjang, tombol share tetap berada dalam pandangan saat layar di scroll kebawah atau kemanapun. Gimana cara bikinnya? Ikuti langkah-langkah berikut gan!

1. Login ke blogger kemudian pilih blog yang mau dipasangi tombol share melayang ini
2. Masuk ke menu Rancangan atau Layout
3. Tambah Gadget atau Add a Gadget dan pilihlah HTML/Javascript
4. Copas dah ni script nya

<style>

#pageshare {position:fixed; bottom:15%; left:10px; 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='gplusone'><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div>
<div class='sbutton' id='su'><script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script></div>
<div class='sbutton' id='digg' style='margin-left:3px;width:48px'><script src='http://widgets.digg.com/buttons.js' type='text/javascript'></script><a class="DiggThisButton DiggMedium"></a></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 style="clear: both;font-size: 12px;text-align:center;"><a href="http://soepeno.blogspot.com/2012/12/tombol-share-melayang-di-blog.html" target="blank"><font color="black">[Get This]</font></a></div></div>

5. Simpen dah

Udah disimpen? Sekarang lihat blog agan... Jrennnnggg.... Semoga blog agan semakin rame dan populer dengan tambahan tombol share melayang yang terpasang di blog agan sekalian.

Temukan Soepeno Blog di berbagai media social:
Twitter: @SEOPeno
Facebook: Soepeno Blog