Cara Membuat Floating Share Button Di Blog | Share Artikel Blog
Cara Membuat Floating Share Button - Membuat share artikel melayang (floating button) ini merupakan kelanjutan dari posting saya sebelumnya Cara Memasang Button Share Artikel di Blog. Bedanya kalau tombol share melayang ini hanya untuk berbagi artikel ke 4 layanan social bookmark saja yaitu share artikel ke Facebook, Twitter, Google Buzz dan Google Plus One ( +1 ). Yang penting bisa berbagi artikel postingan lah.
Baik sobat langsung saja nih cara memasang share button melayang di blog :
1. Login ke dashboard blogger anda.
2. Pilih Rancangan > Elemen Laman > Add gadget (HTML/JavaScript).
3. Copy script dibawah ini dan paste kedalam gadget baru tadi.
<style>#pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color:#fff;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;/*bs-fsmsb*/-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="Get this code from rayhanzhampiet.blogspot.com"><div class="sbutton" id="fb"><a href="http://www.facebook.com/sharer.php" name="fb_share" type="box_count">Share</a><script src="http://static.ak.fbcdn.net/connect.php/js/FB.Share" type="text/javascript"></script></div><div class="sbutton" id="rt"><script src="http://tweetmeme.com/i/scripts/button.js" type="text/javascript"></script></div><div class="sbutton" id="gb"><a class="google-buzz-button" data-button-style="normal-count" href="http://www.google.com/buzz/post" title="post on google buzz"><script src="http://www.google.com/buzz/api/button.js" type="text/javascript"></script></a></div><div class="sbutton" id="gplusone"><script src="http://apis.google.com/js/plusone.js" type="text/javascript"></script><g:plusone size="tall"></g:plusone></div></div>
4. Save / Simpan.
Update 5 Maret 2012 :
Cara pemasangan widget pada template:
- Ganti/edit kode #pageshare {position:fixed; bottom:15%; margin-left:-71px; float:left; dengan kode ini #pageshare {display:scroll;position:fixed;top:165px;left:30px;
- Login ke dashboard blogger, pilih Rancangan > Edit HTML
- Letakkan script widget tepat diatas kode pada template.
- Save / Simpan.
Cukup singkat bukan ternyata cara pasang share artikel melayang di blogspot ini ? Selamat mencoba cara membuat share artikel blog ini dan semoga sobat puas dengan hasilnya.
wahh boleh juga nich ilmunya dipraktekan... thanks ya....
BalasHapus@xamthone plus
BalasHapusSama2 semoga tipsnya bermanfaat ya :D
oke juga nie ilmu nya dan makasi atas info nya .......
BalasHapusmantap gan mekasih
BalasHapusmas raihan hasil code seperti diatas seperti apa....mohon pencerahan
BalasHapusAfter reading you site, I thought Your New articles is excellent! I am ideal like Ones New article. I Bookmarked Ones homepage! I rely on consumers went behave better off from Now at.
BalasHapusoke juga nie makasih info nya sangat menarik nie.......
BalasHapussaya bookmark dulu deh,,, biar nanti enak mau balik lagi.. hehe.. udah cari tutorial ini lumayan lama eh ketemunya disini.. maju terus ya sob..
BalasHapusmakasih sob
BalasHapusterimakasih saya cari tutorial ini sampai ke blogger Malaysia akhirnya ketemu disini dan berhasil mantap
BalasHapuskalau membuat yang kayak diatas yang RSS Feed , Facebook, Twitter, Google
BalasHapushttp://beritairfan.blogspot.com/
BalasHapusMakasih ya.Cuma saya mau tanya,kalo di template yang sudah menyediakan share facebook dll,bagaimana cara agar ter share ke facebook dll
kalo saya sih lebih suka yg melayang disidebar mas
BalasHapusmakasih ilmunya mas bro..
BalasHapusbermanfaat banget :D