Add Floating Share Buttons To Your Blogspot Sidebar
Simply copy/paste to your Blogger Blogspot.
1. Login to your Blogger Account.
2. Go to Design > Add A Gadget > HTML/Javascript.
3. Paste the code below.
4. See the result.
CODE
<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="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>
<div style="clear: both;font-size: 9px;text-align:center;">
<a href="http://trickiezone.blogspot.com/2012/01/add-floating-share-buttons-to-your.html" target="blank"><font color="black">[Get This]<font></font></font></a></div>
</div>
Hope you like it my tutorial subscribe to my Rss Feeds to receive new updates about Bloggger Tutorials and also like us on facebook fanpage http://facebook.com/modifier200 or Follow us on Twitter http://twitter.com/trickiezone. Thank You Support Trickiezone.
Thanks man... this was really awesome... :)
ReplyDeleteyou are my GURU...
bookmarking your blog and most assuredly will come back again..
although you should give a few more instructions for the noobs that might come here..
to add the style in the style heads of their template
and the Div in the body of the design..
@waqas.rabbani
ReplyDeleteThanks bro for visiting Trickiezone keep on supporting thank you.
Mantef nih bang izin mau dikoleksi..hahahyy
ReplyDeletethis is not ok yet......what is the advantage of publishing dis when u knw we cant copy it frm your page.
ReplyDelete@joseph odemo
ReplyDeleteNope you can copt that code by simply using shortcut key CTRL + C all you need to copy is the code.
It was nice but i modified it a bit and now it looks awesome just watch it at www.newamazingtech.blogspot.in
ReplyDeleteyou can see the code on home page xaml
Hey can i get the code of your social floating button ??
ReplyDeletebut this one is good too
----------------------
www.internetDreamz.com
i got dis widget to my right side ..hw i cn gt left side of my blog ???
ReplyDeleterply me raosri1992@gmail.com
Dear Admin Plzz View My Blog raosri1992.blogspot.com
ReplyDelete@srikanth rao
ReplyDeleteHello,
Search this code it's on the beginning "#pageshare" remove quotes then change with this
#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;}
come back here if doesn't work.
It Worked... :) Thanx A Lot Admin ;) ;)
ReplyDelete@srikanth rao
ReplyDeleteWelcome :)
hi i got this widget and applied at this blog of mine
ReplyDeletehttp://desktophqwallpapers.blogspot.com/
but as u can see on my blog that i already have a fb page and i have more likes there so i want that fb page link in this floating widget
can u specify the code to me to which i should replace with my this fb page www.facebook.com/desktophqwallpapers
kindly reply me
waiting :)
Hello Akbar,
DeleteSearch this this code
"<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like>"
(without quotes)
then change with this code
"<div class="fb-like" data-href="http://www.facebook.com/desktophqwallpapers" data-send="false" data-layout="box_count" data-width="450" data-show-faces="false"></div>"
(without quotes).
Hope this helped to you. :)
thx alot bro it did worked
Deletehave a look at it again
when we load the blog that floating widget expands till halph of the page,why is that happening ? and how to undo that expanding ?
I think it's because of new like button of facebook page
Deletei want only facebook button!!
ReplyDeleteHello, If you want facebook like button only you can remove other button.
DeleteThis comment has been removed by a blog administrator.
ReplyDelete