ad

Floating Share Bar Widget For Blogger and WordPress

sharebar

Social media plays very big role in the success of a blog. It is also a nice way for marketing your content and spread it among thousands of your blog subscribers. So we must add an easy way to allow readers to share content with their friends on various social media websites. We never know which of our blog post be a viral on Facebook.

In this post, I am adding a nice floating share bar widget that can be added in any website. It supports WordPress and Blogger both. You can also use it to any other kind of website too. See the snap below that will give you an idea how it works.

Floating Share Bar Widget For Blogger and WordPress

You can also see the working share bar in this blog.

Installation

Installation of this plugin is very simple. Just copy the code and add it to the footer of your website. I will recommend it to add in the left footer.

<style>
/*-------WebTips.in Floating Sharing Widget------------*/
#floatdiv
{
position:fixed;
bottom:15%;
margin-left:-95px;
z-index:10;
float:left;
padding-bottom:2px;
}
#btsnts-sidebar
{
background:#fff;
border-top:1px solid #ddd;
border-left:1px solid #ddd;
border-bottom:1px solid #ddd;
border-radius:5px;
-moz-border-radius:5px;
-webkit-border-radius:5px;
padding-left:5px;
width:60px;
margin:0 0 0 5px;
}
.fb_share_count_top
{
width:52px !important;
}
.fb_share_count_top, .fb_share_count_inner
{
-moz-border-radius:3px;
-webkit-border-radius:3px;
}
.FBConnectButton_Small, .FBConnectButton_RTL_Small
{
width:52px !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="floatdiv">
<div id="btsnts-sidebar">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="padding:5px 0px 0px 0;"> <a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="webtips.in">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="padding:5px 0 2px 0;">
<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>
</td>
</tr>
<tr>
<td style=" padding:5px 0px 0px 0px;"><script src='http://apis.google.com/js/plusone.js' type='text/javascript'> {lang: 'en-US'} </script> <g:plusone size="Tall" expr:href="data:post.url"> </g:plusone>
</td> </tr>
<tr>
<td style=" padding:5px 0px 0px 0px;">
<script type="text/javascript" src="http://platform.linkedin.com/in.js"></script><script type="in/share" data-counter="top"></script>
</td> </tr>
<tr>
<td style=" padding:5px 0px 5px 0px;">
<script src="http://www.stumbleupon.com/hostedbadge.php?s=5"></script>
</td> </tr>
<tr>
<td>
<a href="https://www.usethistip.com/?p=5398" style="font-size:8px">Get This</a>
</td> </tr>
</table>
</div> </div>

If you find this widget interesting, do not forget to share it with your friends. You can also subscribe Webtips and receive this kind of widgets in your emails.

In case you have any problem in implementing this code, you can comment below and ask me.

Tags: | | | |
Nord VPN Sale

Deepanker Verma is the founder of Techlomedia. He is a tech blogger, developer and gadget freak.


Similar Articles

2020 UseThisTip | Developed By Deepanker