Add Sliding Social Share Buttons With Counters

As a serious Blogger you may know how many important the social media sharing. You can get huge traffic from social media section if you can properly use it.

Many webmaster allow this way to spread their website or personal blog site to promote.

Today we will teach you about sliding sharing widget and when the visitors scroll your blog page up or down, it will float with their webpage moving.

This widget coded with CSS and JavaScript codes.

First see the demo below…

View Demo...

Adding Floating Social share Counters To Blogger Blog

---

1. Log in to your Blogger Blog
2. Go to Design, add a HTML/JavaScript
3. Paste the below code inside the box

<style>
/*-------ShineMat Sliding Social Widget--------*/
#floatdiv {
position:absolute;
width:94px;
height:229px;
top:0;
left:0;
z-index:100
}
#sm-sidebardiv {
border:1px solid #ddd;
padding-left:10px;
position:relative;
height:220px;
width:65px;
margin:0 0 0 20px;
}
</style>

<div id="floatdiv">
<div id="sm-sidebardiv">
<table cellpadding="1px" cellspacing="0">
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0 2px 0;">
<div id="fb-root"></div><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like href="" send="false" layout="box_count" show_faces="false" font=""></fb:like>
</td>
</tr>
<tr>
<td style="border-bottom: 1px solid #E8E8E8; padding:5px 0px;">
<g:plusone size="Tall" expr:href="data:post.url">
</g:plusone></td>
</tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:5px 0 0px 0;">
<a href="http://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="ahsaimoom">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
</td>
</tr>
<tr>
<td style="border-bottom: 0px solid #E8E8E8; padding:0px 0 0px 0;">
<p style=" font-size:10px; text-align:center; color:#ddd;"><a style="color:#ddd;" href="http://www.shinemat.com/2012/04/add-sliding-social-share-buttons-with.html" target="_blank">Make it</a></p>
</td>
</tr>
</table>
</div>
</div>
<script src='https://googledrive.com/host/0B2c_2BWPUGv7YS13RFo3Zzl4Sjg/Sliding-Social-Share-Counters-Shinemat.js' type='text/javascript'></script>

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> </script>

4. Now change "ahsaimoom" with your twitter username.
5. Finally Save your widget, and you are done.

• How To Add Windows 8 Tiles Style Social Media Widget

Note: If you have added Google +1 button in your blog/ website before you may delete the following code.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'> </script>

Learn More: How To Set Username For Google Plus Profiles?

That's all. We are sure that you like it very much. Kindly don't forget to let us know about your opinion by commenting.