Tuesday, March 20, 2012

Simple Social Sharing Buttons with Hover Effect Widget

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.

How to Get these sharing buttons [For Blogger Users]

  1. Go to Blogger > Design > Page Element
  2. Add a Gadget.
  3. Choose "HTML/JavaScript " Widget
  4. 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;
#pbt-social-v1 li {
float: right;
padding: 0;
margin: 5px;}
#pbt-social-v1 li a {
width: 32px;
height: 32px;
background: url("http://1.bp.blogspot.com/-92vOSpOW4GA/T2hx6NhBIZI/AAAAAAAABIY/tJjMJvgA5Po/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%;}
<ul id="pbt-social-v1">
<li><a id="pbt-rss" href="http://feeds.feedburner.com/ProBloggingTools"></a></li>
<li><a id="pbt-pin" href="http://pinterest.com/probloggigntools/"></a></li>
<li><a id="pbt-gplus" href="https://plus.google.com/111188040805340254482"></a></li>
<li><a id="pbt-twitter" href="http://twitter.com/probloggingtool"></a></li>
<li><a id="pbt-facebook" href="http://www.facebook.com/probloggingtools"></a></li>
      5. Change All Social Media links (Colored text) with yours.

How to add these sharing button [For WordPress Users ]

  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.


This awesome widget is developed by PBT and having all rights. If you want to share it with your reader, you have to give credits to PBT by attaching a link back to this blog.

Need Help?

If you face any problem, feel free to ask, just do comment your view, I will try to give your reply in time.


confused??? Post a Comment


Recent Posts

About PBT

We design and develop Widget, Custom code , Template customization so that you can make your blog unique and cool. If you need any type of widget or custom code feel free to Contact. we happy to help you...