22:22   Blogger Widgets , CSS , HTML

Touch Me Sharing Widget For Blogger

One of the best blogger sharing widget call " Touch Me ". Its named such due to its appealing look that forces a visitor to...

One of the best blogger sharing widget call "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 structured using buttons from popular services like Google Plus, Facebook, Twitter and RSS. 

DEMO

Add it to blogger

Following are the Steps for Blogger Users 

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/AVvXsEhsA6DzeBUQYu5uu0P3qhq-gexVa9kKnE6PP-f10G_nwbVUPRuIkHnTiQzljXBIV509-w-NKzvS9sKR7ASbPQjjxSoLl9C6AARb3we8XLUjTgABzucwCpP5LF1arOz8L_7b6-URwCyMAP-r/s454/sharing%2520Touch%2520Me.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;
}

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

</style>

<div class='touchme'>
<!--RSS--> 
<a class='rss' href="http://feedburner.google.com/LoserEngineer" rel='external nofollow' target='_blank'></a>
<!--Google Plus--> 
<a class='googleplus' href="https://plus.google.com/u/0/+RaviNJha/" rel='external nofollow' target='_blank'></a>
<!--Facebook--> 
<a class='facebook' href="https://www.facebook.com/LoserEngineer" rel='external nofollow' target='_blank'></a>
<!-- Twitter --> 
<a class='twitter' href="https://twitter.com/RaviNJha4u" rel='external nofollow' target='_blank' ></a>

</div>