"Touch Me" Sharing Widget For Blogs

The rapid development and advancement of social networking sites lead to the creation of dozens of social sharing tools and services.Bloggers now-a-days are addicted to these tools because unlike organic traffic from search engines, web traffic from social channels have overtaken search traffic.They depend on social networks like Facebook,Google plus and Twitter to drive traffic to their blogs.To help you to increase your fans and readers we bring "Touch me".Its named such due to its appealing look that forces a visitor to roll hover the cursor over the icons and hit follow! :) This gadget is neatly designed using buttons from popular services like Google Plus, Facebook, Twitter and RSS. We have coded it neatly using basic HTML and some spicy CSS styles.

LIVE DEMO:

Add it to Blogger:

1. Go To Blogger > Layout
2. Choose add a gadget
3. Select HTML/JavaScript
4. Paste the following code inside it,

<style> 
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvKbXwm0M5voZzc_HpBKPMQtSwadp-Say8i6hUDHNiTzkV9Q20UVHgl7Ynm21JCnOwdqMlWRT6GdCOKZFIj0xBy0JaNbFrnAhtIJYg0SqHbTeVBwWAURbWlrHhlVXef6I8POkiT9MG5K8/s1600/Sharing+Touch+Me.png) no-repeat;
-webkit-transition: ease-in 0.2s all;
-moz-transition: ease-in 0.2s all;
-o-transition: ease-in 0.2s all;
-ms-transition: ease-in 0.2s all;
transition: ease-in 0.2s all;
cursor:pointer;
}


.touchme a.googleplus {
background-position: 0px -58px;
}
.touchme a.googleplus:hover {
background-position: 0px 0px;
}


.touchme a.twitter {
background-position: 0px -290px;
}
.touchme a.twitter:hover {
background-position: 0px -232px;
}
.touchme a.facebook {
background-position: 0px -406px;
}
.touchme a.facebook:hover {
background-position: 0px -348px;
}


.touchme a.rss {
background-position: 0px -174px;
}
.touchme a.rss:hover {
background-position: 0px -116px;
}


</style>


<div class='touchme'>
<!--RSS-->
<a class='rss' href="YOUR RSS LINK" rel='external nofollow' target='_blank'></a>
<!--Google Plus-->
<a class='googleplus' href="YOUR GOOGLE PROFILE LINK" rel='external nofollow' target='_blank'></a>
<!--Facebook-->
<a class='facebook' href="YOUR FACEBOOK LINK" rel='external nofollow' target='_blank'></a>
<!-- Twitter -->
<a class='twitter' href="YOUR TWITTER LINK" rel='external nofollow' target='_blank' ></a>


</div>

Please fill these requirements:

• Replace YOUR RSS LINK with your Feed burner link.
• Replace YOUR GOOGLE PROFILE LINK with your Google+ URL
• Replace YOUR FACEBOOK LINK with your Facebook URL
• Replace YOUR TWITTER LINK with your Twitter Profile URL

         5. Hit save and you are all done!

Visit your blog to see it working just perfectly. Move your cursor over the icons and enjoy playing!


KMSMNCMAAATU