Cara pasang Floating Share Button di Blogspot



Untuk memasang Floating Share Button pada sebelah kiri blog seperti yang boleh anda lihat pada blog ini (klik untuk demo), hanya ikut beberapa langkah yang mudah di bawah. 

Langkah 1

Login Blogger Dashboard --> Layout --> Add A Gadget --> HTML/Javascript.

langkah 2

Copy dan paste kod di bawah pada content HTML/Javascript.





<!-- floating page sharers Start -->
<style>
#pageshare {position:fixed; bottom:17%; margin-left:-705px; float:left;
-moz-border-radius:5px 0px 5px 0px;
-webkit-border-bottom-left-radius:5px;
-webkit-border-bottom-right-radius:0px;
-webkit-border-top-left-radius:5px;
-webkit-border-top-right-radius:0px;
background-color:#ffffff;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="Share this">
<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>
<div class='sbutton' id='rt'>
<script src="http://tweetmeme.com/i/scripts/button.js" type='text/javascript'></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='gplusone'>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></script>
<g:plusone size="tall"></g:plusone>
</div></div>


p/s:

1.Untuk mengubah warna background, sila edit kod background-color:#ffffff;

2. Untuk mengubah kedudukan Floating Share Button tersebut, sila edit angka  margin-left:-705px; 



{ 9 comments.. read them below or add one }

Thalhah Amir Thalhah Amir 5:34 PM
salam nes. jemputla lihat dan komen video pertama SNB di youtube http://www.youtube.com/watch?v=J9yMduBaf90
iza iza 4:41 PM
Assalam..
butang tak bergerak ek?
Kalau post lain2, macam mana? tak share untuk satu topik khas ke?
Nescafe ais Nescafe ais 4:03 AM
@Thalhah Amir
wsalam. Dah view, tapi belum sempat komen lagi.
Nescafe ais Nescafe ais 4:04 AM
@iza
Button statik. Share untuk semua pages.
APAN APAN 8:51 PM
tq bro...aku cuba guna tutorial dlm ni lak...puas hati :)
Guess who . . . Guess who . . . 1:55 PM
thanks :)

http://kehidupan-seorang-lelaki.blogspot.com/
RemyZakaria RemyZakaria 2:55 PM
x jadi pun nes... saya try kat web http://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro ni pun x boleh... pasal pe ya?