LATEST >>

Welcome Here And Thanks For Visiting. Like Us On Facebook...

EXEIdeas – Let's Your Mind Rock » Blogspot / Blogspot Social Sharing / Website / Website Social Sharing » Add Stylish Animated Social Sharing Bar Widget To Blogger

Add Stylish Animated Social Sharing Bar Widget To Blogger

Add Stylish Animated Social Sharing Bar Widget To Blogger

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>
     </div>

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

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://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='http://digg.com/tools/diggthis.js' type='text/javascript'/></div></div>
<div class='btn tweetmeme'><div class='bcontent'><script src='http://tweetmeme.com/i/scripts/button.js' type='text/javascript'/></div></div>
<div class='btn dzone'><div class='bcontent'><script language='javascript' src='http://widgets.dzone.com/links/widgets/zoneit.js'/></div></div>
<div class='btn reddit'><div class='bcontent'><script src='http://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='http://static.ak.fbcdn.net/connect.php/js/FB.Share' type='text/javascript'/></div></div>
<div class='thanksto'><a href='http://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.

You Like It, Please Share This Recipe With Your Friends Using...

4 Responses to “Add Stylish Animated Social Sharing Bar Widget To Blogger”

  1. pankaj arora says:

    very nice thnx a lot

  2. Keith says:

    Can’t highlight the code…. 🙁

Leave a Reply

Your email address will not be published. Required fields are marked *