Add Sliding Social Share Buttons With Counters

Adding Sliding or Floating Social Media Sharing Counter For Blogger Blog
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…






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.


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.

3 Comments

Please DON'T spam here. Spam comments will be deleted just after our review.

  1. your article helped me. i need to hv a horizontal view of the buttons, not in vertical.

    ReplyDelete
  2. @ShyLock Please read this post. Visit Here...
    and thanks for visiting ShineMat.com

    ReplyDelete
  3. I must thank you for the efforts you have put in penning this blog.
    I am hoping to see the same high-grade blog posts from you later on as well.
    website design

    ReplyDelete

Post a Comment

Please DON'T spam here. Spam comments will be deleted just after our review.

Post a Comment

Previous Post Next Post