Social Sliding Widget with Counters for Blogger



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 AllBloggerTricks.com-->
<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 AllBloggerTricks.com-->

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.

6 comments:

  1. Very awesome widget, many as thanks as your help bro :D

    ReplyDelete
  2. Added it in my website. It looks great in Google Chrome but Fonts are showing too small in Firefox.

    ReplyDelete
  3. Thanks for this great information.

    ReplyDelete
  4. As nice blog,but you could have made this blog more cool if you could configure the language changer pluigin but all the same you have done a good job

    ReplyDelete