Add Stylish Animated Social Sharing Bar Widget To Blogger

This Article Was Live On May 9th, 2012 And So Far Have: 4 Comments...
Last Updated on June 21st, 2014

Social networks can make a big difference on the popularity of a blog. Sites that communicate better and understand social media are usually the most popular.A move towards this goal would be to find a way to encourage your visitors to share your content on the networks they are most active on.Today we are doing just that, by using pure JavaScript with the jQuery framework, to make an animated sharing bar, which will enable your website visitors to share posts on a number of social networks.Now the question is How To Add Animated Sharing Bar To Blogger?

Features:
1.) Awesome Animated Social Sharing Widget.
2.) Automatically Rotating But Stop On Hover.
3.) Digg Share With Count Button.

4.) Tweet With Count Button.

5.) Facebook Share With Count Button.

6.) Reddit Share With Count Button.

7.) DZone Share With Count Button.

How To Add In Blogspot?
1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To Edit HTML..
4.) Press “CTRL+F” And Find These Line.

<div class=’post-footer-line post-footer-line-2’/>

<div class=’post-footer-line post-footer-line-3’/>

</div>

5.) Now Copy The Below Code And Paste It Below The Above Code.
6.) Click Save, Now You Are Done.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='https://gj37765.googlecode.com/svn/trunk/html/mddemo/%5Bwww.gj37765.blogspot.com%5Dscript.js' type='text/javascript'/>
<style>
#share{/* The share box container */width:280px;background:#ececec;height:220px;margin:60px auto;overflow:hidden;-moz-border-radius:12px;-webkit-border-radius:12px;border-radius:12px;}
#stage{/* This is where the animation takes place */position:relative; border-right:1px solid #DDDDDD;width:290px; height:220px;background:white;float:left;border-bottom-left-radius:12px;border-top-left-radius:12px;-moz-border-radius-bottomleft:12px;-moz-border-radius-topleft:12px;-webkit-border-bottom-left-radius:12px;-webkit-border-top-left-radius:12px;}
.btn{/* This class is assigned to every share button */background-color:white;height:90px;left:0;top:0;width:60px;position:relative;margin:20px 0 0 10px;float:left;}
.bcontent{ /* Positioned inside the .btn container */position:absolute;top:auto;bottom:20px; left:0;}
.thanksto{ position:absolute;bottom:2px;right:110px;font-size:10px;}
.thanksto a,.thanksto a:visited{color:#BBB;}
</style>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='share'>
<div id='stage'>
<div class='btn digg'><div class='bcontent'><a class='DiggThisButton'/><script src='https://digg.com/tools/diggthis.js' type='text/javascript'/></div></div>
<div class='btn tweetmeme'><div class='bcontent'><script src='https://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div></div>
<div class='btn dzone'><div class='bcontent'><script language='javascript' src='https://widgets.dzone.com/links/widgets/zoneit.js'/></div></div>
<div class='btn reddit'><div class='bcontent'><script src='https://www.reddit.com/button.js?t=2' type='text/javascript'/></div></div>
<div class='btn facebook'><div class='bcontent'><a href='http://www.facebook.com/sharer.php' name='fb_share' type='box_count'>Share</a><script src='https://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div></div>
<div class='thanksto'><a href='https://www.exeideas.com'>Grab This</a>
</div>
</div></div>
</b:if>

Customization:
1.) This Widget Did Not Require Any Customization.
2.) This Widget Will Shown Up On Post Page Only.
3.) If You Want Any Customization, Feel Free To Ask.

Recommended For You:

Optimize Your SEO Title Tags: 5 Important Do's And Don'ts