Social Sharing Button With Hover Effect V2

Hello Friends. You all are enjoying with my previous awesome posts. Today I designed a unique and simple Social Sharing button with awesome hover effects. Its looks simple or in black and white but on mover over its comes in its color and looks very attractive. I am trying to make this widget for last two days and Now, you can use it with your blog. I tried to minimize the designing coding and use Pinterest buttons with Facebook, Twitter, Google Plus and RSS buttons  so its can load fast and does not effects on your blog preference. To Grab this just follows the simple steps.

Previous Version 
Social Sharing Button With Hover Effect V1

Gadget Demo

[[ To Veiw This Click The "Gadged Demo" Button Given above ]]

How To Add This Sharing Widget. [Blogger]??

Go to Blogger > Design > Page Element

Add a Gadget.

Choose "HTML/JavaScript " Widget

paste the following code in the Gadget area

<style type="text/css">

#pbt-social-v1 {

width: 300px;

height: 35px;

margin: 0;

padding: 0;

list-style: none inside none;

margin-left:-80px;}

#pbt-social-v1 li {

float: right;

padding: 0;

margin: 5px;}

#pbt-social-v1 li a {

width: 32px;

height: 32px;

background: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhBk5E0ksqoqDCEDXZPr9Kf0EeGntsm_S263YMegKN86JO74ACsgxqvlmgtsqkPNcEUBttDliolJWfcn3zh_97k8Dq-_Hy5KygVVYg-5DKTXufbobM5c1tRo6wU4Wq-FvtzKnhF6ZvIPQiG/s1600/cats2.jpg") 100% 0 no-repeat;

display: block;

transition-property: background-position;

transition-duration: .2s;

-o-transition-property: background-position;

-o-transition-duration: .2s;

-webkit-transition-property: background-position;

-webkit-transition-duration: .2s;

-moz-transition-property: background-position;

-moz-transition-duration: .2s;

}#pbt-social-v1 #pbt-pin {

background-position: -160px 0;}

#pbt-social-v1 #pbt-pin:hover {

background-position: -160px 100%;}

#pbt-social-v1 #pbt-facebook {

background-position: 0px 0;}

#pbt-social-v1 #pbt-facebook:hover {

background-position: 0px 100%;}#pbt-social-v1 #pbt-twitter {

background-position: -40px 0;}

#pbt-social-v1 #pbt-twitter:hover {

background-position: -40px 100%;}

#pbt-social-v1 #pbt-gplus {

background-position: -80px 0;}

#pbt-social-v1 #pbt-gplus:hover {

background-position: -80px 100%;}#pbt-social-v1 #pbt-rss {

background-position: -120px 0;}

#pbt-social-v1 #pbt-rss:hover {

background-position: -120px 100%;}

</style>

<div>

<ul id="pbt-social-v1">

<li><a id="pbt-rss" href="http://feeds.feedburner.com/Studhacking"></a></li>

<li><a id="pbt-pin" href="http://pinterest.com/HiteshKatara/"></a></li>

<li><a id="pbt-gplus" href="https://plus.google.com/111542950418678736575"></a></li>
<li><a id="pbt-twitter" href="http://twitter.com/studhacking"></a></li>


<li><a id="pbt-facebook" href="http://www.facebook.com/Studhacking"></a></li>


</ul>


<div>

 5. Change All Social Media links (Colored text) with yours.

How To Add This Sharing Widget. [Wordpress]??

1. Go to Dashboard > Appearance > Widget
2. Choose "text" widget.
3. Paste the above code in the Widget area.
4. 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 StudHacking.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.