Add Stylish Animated Socxial 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.

   

<style type="text/css">

.exespotlightmenu{

width: 100%;

overflow:hidden;

}

.exespotlightmenu ul{

margin: 0;

padding: 0;

font: bold 14px Verdana; /* font style and size */

list-style-type: none;

text-align: center; /* "left", "center", or "right" align menu */

}

.exespotlightmenu li{

display: inline-block;

position:relative;

padding: 5px;

margin: 0;

margin-right: 5px; /* right margin between menu items */

}

.exespotlightmenu li a{

display:inline-block;

padding: 5px;

min-width:50px; /* horizontal diameter of spotlight */

height:50px; /* vertical diameter of spotlight */

text-decoration: none;

color: black;

margin: 0 auto;

overflow:hidden;

-moz-transition: all 0.5s ease-in-out; /* CSS3 transition to animate all A properties */

-webkit-transition: all 0.3s ease-in-out;

-o-transition: all 0.3s ease-in-out;

-moz-transition: all 0.3s ease-in-out;

-ms-transition: all 0.3s ease-in-out;

transition: all 0.3s ease-in-out;

}

.exespotlightmenu li:hover a{

color: white;

background: #a71b15; /* background color of spotlight */

-webkit-border-radius: 50%; /* large radius to create circular borders */

-moz-border-radius: 50%;

border-radius: 50%;

}

.exespotlightmenu li a exespan{

position:relative;

top:35%; /* move text down so it appears centered within menu item */

}

</style>

<div class="exespotlightmenu">

<ul>

<li><a href="##########"><exespan>Home</exespan></a></li>
<li><a href="##########"><exespan>About</exespan></a></li>
<li><a href="##########"><exespan>Portfolio</exespan></a></li>
<li><a href="##########"><exespan>Privacy</exespan></a></li>
<li><a href="##########"><exespan>Contact Us</exespan></a></li>

</ul>

</div>

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.

Source:www.exeideas.com