Social Sliding Widget with Counters for Blogger

Posted On // 5 comments


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.

5 comments

Lachlan Author
21 August 2013 at 23:01

Awesome!Looks great

Reply
hamza gujjar Author
26 October 2013 at 23:13

Thanks you He is Work scrpt

Reply
Galih Priam Author
7 November 2013 at 06:20

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

Reply
Rosy Razia Author
19 December 2013 at 05:49

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

Reply
cream anisa Author
1 April 2016 at 04:41

Thanks for this great information.

Reply

Post a Comment

Please do not spam here. All comments will be moderated.
Don't You Think this Awesome Post should be shared ??
| Social Sliding Widget with Counters for Blogger |