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 crunch-plus.blogspot.com-->
<link rel="stylesheet" type="text/css" href="https://dl.dropboxusercontent.com/s/pe8lui661msc4aa/crunch%20sliding%20widget.css"/>
<div class="crunch-social">
<ul>
<li><a class="crunch-box facebook" href="#"><p>15K+</p>Facebook </a></li>
<li><a class="crunch-box twitter" href="#"><p>10K+</p>Twitter</a></li>
<li><a class="crunch-box gplus" href="#"><p>5K+ </p>Google+</a></li>
<li><a class="crunch-box pinterest" href="#"><p>4K+ </p>Pinterest</a></li>
<li><a class="crunch-box rss" href="#"><p>10K+</p>RSS</a></li>
</ul>
</div>
<!--Sliding Social Widget at crunch-plus.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.
