Cara Memasang Widget Share Button Facebook, Twitter,

Google di Blog
82
Diposkan oleh Permathic on Selasa, 24 April 2012 , in Cara - Cara, Semua Tentang Blog,
Tips Blogger

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 :

1. Login ke dasbor blog anda

2. Pilih rancangan
3. Pilih tambah gadget
4. Pilih Html/Java script
5. Copy kode Html di bawah ini
6. Pastekan di Html/ Java Script tadi
7. Simpan
8. 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>
<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" title="Cara Memasang Widget Share Button"><font
color="blue">[Get Widget]<font></font></font></a></div></div>

<!--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.

contoh hasilnya