You are here: Home > Blogging Tips > How To Add Floating Share Button To Your Blog|Blogspot

Post image for How To Add Floating Share Button To Your Blog|Blogspot

How To Add Floating Share Button To Your Blog|Blogspot

by shutto · 0 comments · Blogging Tips


Inserting floating share button to your blog increases the chance of bringing  traffic to your blog.It makes your blog readers to share your contents to popular social sites.Today,I am going to share with you on how to add floating share button to your site.

STEPS TO ADD FLOATING SHARE BUTTON TO YOUR SITE

  1. Login to your bloggers dashboard.
  2. Go to design and click on Add A Gadget on the sidebar
  3. Select HTML/Java Script
  4. Paste the following code below into the box and then save.

[codesyntax lang="javascript" lines="fancy" blockstate="expanded"]

<!--SideBar Floating Share Buttons Code 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="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><br/><div style="clear: both;font-size: 9px;text-align:center;"><a href="http://figuretech.com/how-to-add-floating-share-button-to-your-blogblogspot/" target="blank"><font color="black">[Get This]<font></font></font></a></div></div>

<!--SideBar Floating Share Buttons Code End-->

[/codesyntax]

I hope you enjoyed the tutorial,feel free to drop your comment below.

Enter your email address to recieve latest updates:

Delivered by FeedBurner

Leave a Comment

CommentLuv badge

Previous post:

Next post: