Cara Memasang Widget Share Button Facebook, Twitter, Google di Blog -
Belakangan
ini saya berkunjung ke sebuah blog, dan saya menemukan sesuatu yang
unik di blog sahabat saya tersebut. Saya menemukan widget share botton.
Kemudian saya mencoba memasangnya, karena widget ini akan memudahkan
pengunjung blog kita untuk mengshare apa yang ada di blog kita. Dan hal
ini juga akan berdampak positif ke blog kita.. karena ini bisa menjadi
media marketing gratis buat para blogger , untuk itu saya akan
membagaikan kepada para sahabat – sahabat blogger sekalian tentang cara membuat share botton. Berikut langkah- langkahnya :
- Login ke dasbor blog anda
- Pilih rancangan
- Pilih tambah gadget
- Pilih Html/Java script
- Copy kode Html di bawah ini
- Pastekan di Html/ Java Script tadi
- Simpan
- Selesai
Kode Share button
<!--Widget Share Button Melayang Start-->
<style>
#pageshare {position:fixed; bottom:15%; right: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="bagikan ke teman anda">
<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>
<style>
#pageshare {position:fixed; bottom:15%; right: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="bagikan ke teman anda">
<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: 9px;text-align:center;"><a
href="http://permathic.blogspot.com/2012/04/cara-memasang-widget-share-button.html"
target="blank"><font color="blue">[Get
Widget]<font></font></font></a></div></div>
<!--Widget Share Button Melayang End-->
<!--Widget Share Button Melayang End-->
Catatan :
untuk tulisan warna hijau anda dapat mengeditnya sesuai keinginan anda.
Dan tulisan warna merah bisa anda hapus jika anda ingin tampilan yang
simple.
Semoga Bermanfaat...thanks
www.febri-yan.blogspot.com
www.febri-yan.blogspot.com
terima kasih... dah menjadi pun
ReplyDelete