Do You Want to Get Motivated?
Follow on Twitter and I'll get you motivated!
IF YOU WANT GET FREE MOTIVATIONAL, SUCCESSFUL AND INSPIRING QUOTES ON YOUR CELL PHONE? SO GOTO MESSAGE AND WRITE "FOLLOW GOLDENWORDS_UK" THEN SEND "PAKISTAN, AFGANISTAN, NIGERIA & USA - 40404, INDIA 53000, - CANADA 21212, INDONESHIA - 89887, BANGLADESH - 9594, UK- 86444, AZERBAIJAN - 4040"

Social Sliding Widget with Counters for Blogger

Tuesday, September 17, 2013  Syed K. Ali Bukhari  No 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 syedkhurramaali.blogspot.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.

Don't Forget, Must Follow On Twitter @GoldenWords_UK

Posted in: , ,

0 Comments: