Today I will show how you can add Social Sliding Widget with Counter to your blogger blog. These sliding bars are made of pure CSS and inspite of JavaScript CSS Transitions are used for the effects. The only con is that the counters are not automatic and you have to set the values manually. Nevertheless the widget looks very cool and awesome. It support 5 Social Networks which are - Facebook, Twitter, Google+, Pinterest and RSS.

You can change the link of these bars and add your own desired URL. The live working demo of this widget can be seen right under this line.

Please Note: There is some bug in this widget as a result Firefox displays the text a bit displaced but that is not a big change.
Once you have seen the demo we can move on with how you can add this widget to your blog.

Adding the HTML/CSS

For adding this widget in your blog go to Blog Title → Layout → Add Widget → HTML/JavaScript and paste the below code in the box.

<!--Sliding Social Widget at http://vikram96.blogspot.in-->
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/u/76401970/All%20Blogger%20Tricks/abt-sliding-social.css"/>
<div class="abt-social">
    <ul>
        <li><a class="abt-box facebook" href="#"><p>15K+</p>Facebook </a></li>
        <li><a class="abt-box twitter" href="#"><p>10K+</p>Twitter</a></li>
        <li><a class="abt-box gplus" href="#"><p>5K+&nbsp;</p>Google+</a></li>
        <li><a class="abt-box pinterest" href="#"><p>4K+&nbsp;</p>Pinterest</a></li>
        <li><a class="abt-box rss" href="#"><p>10K+</p>RSS</a></li>
    </ul>
</div>

<!--Sliding Social Widget at http://vikram96.blogspot.in-->



After adding the code change # with the link of your Social Media page. Change the number in red with the no. of Likes/Followers/Readers you have. After configuring the code save the widget and finally save the template.

You are done now. Now you and your visitors can see this awesome Pure CSS social sliding widget with counter in your blogger blog.