Social Sharing Button With Hover Effect

Hey Bloggers, I am again with Social Sharing Buttons. This time i developed a simple, cool and attractive Social Sharing buttons using CSS. I already published a simple widget of Social Sharing Buttons with Hover effect and I am very happy that you liked that widget very so here i developed this Widget for your blog. This is a very light weight widget with less CSS and HTML code. It load in less then a second. I put mouse hover effects on it to make it more cool. I used rectangle social media icon which looks awesome in your blog.There are total five sharing buttons, start from twitter, Facebook, RSS, YouTube and Google Plus. I used these buttons because these are the very common and popular social channel in Internet world. So Lets add this widget in your blog. This widget is compatible with Blogger, WordPress and any HTML webpage ,supported by any web browser.

Gadget Demo

How to Add this Widget. [Blogger]??

1. Go to Blogger -> Design -> Page Element 
2. Add a Gadget
3. Choose "HTML/JavaScript" Widget
4. paste the following code in the widget Area.

<style type="text/css">
.shv1Social {
display: block;
margin: 2em auto;
width: 200px;
height:40px;
}
.shv1Social span {
float: left;
display: inline;
margin-right: 8px;
}
.shv1Social span a {
display: block;
width: 32px;
height: 32px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEixR8F_fum3SDHWW8hClEjxZRLYbTOl3_iZdbPzj2gKOeKmcJgjV-aB-1dQQJtcy1SFb-P1ZzpJS8Y236R3Pde6qa0Kgo7H3Ptn7hY1lUkKG3msmHdP2B_70ndbT7aA3gyqXl1qz451c5ZW/s1600/social+icon.png") 0 0 no-repeat;
}
#iconTwitter {background-position: -33px -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconRSS {background-position: 0 -33px;}
#iconYouTube {background-position: -99px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconTwitter:hover {background-position: -33px 0;}
#iconFacebook:hover{background-position:-66px 0}
#iconRSS:hover{background-position:0 0}
#iconYouTube:hover{background-position:-99px 0}
#iconGooglePlus:hover{background-position:-132px 0}
</style>
<div class='shv1Social'>
<span><a href='twitter.com/Hiteshkatara' id='iconTwitter' target='_blank' title='Follow us on Twitter'>Twitter</a></span>
<span><a href='http://www.facebook.com/all-coder.blogspot.in' id='iconFacebook' target='_blank' title='Join us at Facebook'>Facebook</a></span>
<span><a href='http://feeds.feedburner.com/All-coder' id='iconRSS' target='_blank' title='Subscribe our RSS Feed'>RSS</a></span>
<span><a href='youtube.com/HiteshKatara' id='iconYouTube' target='_blank' title='Follow our YouTube Channel'>YouTube</a></span>
<span><a href='https://plus.google.com/113656761731617761950/posts' id='iconGooglePlus' target='_blank' title='Follow us at Google+'>Google</a></span></div>
</div>
</div>

 5. Change the Twitter, Facebook, RSS, YouTube and Google+ links with your blogs.


 6. Save the Widget and Enjoy!!!

How To Add This Widget. [WordPress]??

1. Go to Dashboard -> Appearance -> Widget
2. Choose Text Widget
3. Paste the above code in Widget Area
4. Edit the Social Media Links as according to your blog.  
5. Fix the position and save the widget.

Credit 

This Social Sharing Buttons Widget is designed by Labnol and further customized by Stolen Heart. If you want to share it with your readers, you have to give back link to All-coder.blogspot.in 


Need Help ??

If you having any trouble to implement this widget in your blog. Share your problem with us. I will try to resolve it as soon as possible.