How to add Floating Social Share bar

Hi guys! In this post I would like to tell you ‘How to add Floating Social Share bar’.

Generally bloggers use social networking sites to promote their content and get visibility. With this widget we can easily access different kind of social networking platforms at one place.

Adding this to your blog is so simple that it takes barely two minutes to do so.

Follow these simple steps:

1. Log in to blogger and go to Layout.
2. Click on Add a Gadget and select HTML/JavaScript and paste the following code and save it.
3. Before saving it change the techpro4u with your twitter account name.
4. You can customize this widget according to your convenience.
5. By default the position of the widget is left if you want to change it to right change left to right.
6. Check out your blog for the changes.

CODE:

<!-- Sidebar share buttons techpro365.blogspot.in--><style type="text/css"> #pageshare {position:fixed; bottom:5%; margin-left:-780px; float:left; border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;background-color: #b2e0ff;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="Get this from techpro365.blogspot.in"> <div style="margin-left:8px;"><div class='sbutton' id='like' style='margin: 5px 0 0 5px;'><script src='http://connect.facebook.net/en_US/all.js#xfbml=1'></script><fb:like layout='box_count' show_faces='false'></fb:like> </div></div> <br /><div class='sbutton'><a class='twitter-share-button' data-count='vertical' data-via='techpro4u' expr:data-counturl='data:blog.url' href='http://twitter.com/share' rel='nofollow'>Tweet</a><script src='http://platform.twitter.com/widgets.js'; type='text/javascript'></script> <br /><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><br/><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 style="clear: both;font-size: 9px;text-align:center;"> <a href="http://techpro365.blogspot.in/" target="blank"><font color="red">Get This<font></font></font></a></div><!-- Sidebar share buttons End --></div></div>

 If you have any genuine queries or facing any difficulties in following the post feel free to ask through the forum or the contact page.

Print Page

Do you like this post? Please link back to this article by copying one of the codes below.

URL: https://techpro365.blogspot.com/2013/05/how-to-add-floating-social-share-bar.html HTML link code: <a href=" https://techpro365.blogspot.com/2013/05/how-to-add-floating-social-share-bar.html "> How to add Floating Social Share bar </a> BB link code: [url= https://techpro365.blogspot.com/2013/05/how-to-add-floating-social-share-bar.html ] How to add Floating Social Share bar [/url]

---

About Author:

Raja Sekhar is the founder of this blog. He has been blogging since 2010 and is an active contributor of many blogs.