Add Cool Social Media Sharing Touch Me Widget For Blogger

on Sunday, October 7, 2012
This cool widget calls "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.

How To Add Cool Social Media Sharing Touch Me Widget To Blogger?

1. Go To Blogger Dashboard Layout.
2. Choose "Add a Gadget".
3. Select HTML/JavaScript.
4. Copy and paste below code inside it:


<style> 
/*--------HBW Touch Me Sharing Widget ------*/ 
.touchme a { 
display:block; 
height:50px; 
width:50px; 
padding:0 4px; 
float:left; 
background:transparent url(http://beautifulbloggerwidgets.googlecode.com/files/Sharing%20Touch%20Me.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>
<p style="display:none;">Cool Social Media Sharing Touch Me Widget by <a href="http://beautifulbloggerwidgets.blogspot.com/">Beautiful Blogger Widgets</a></p>
<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='nofollow' target='_blank'></a>
<!--Facebook--> 
<a class='facebook' href="YOUR FACEBOOK LINK" rel='nofollow' target='_blank'></a>
<!-- Twitter --> 
<a class='twitter' href="YOUR TWITTER LINK" rel='nofollow' target='_blank' ></a>
</div>

Note:
  • 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. Save it and you are done.


Think you will like it.Have a Nice Day

1 comments:

Nitin Upparpelli said...

what if i want to add a linkedin logo and link to the widget... how should i add ???

Post a Comment