Wednesday, 10 October 2012

Add Cool Social Media Sharing Touch Me Widget For Blogger

Posted by shakeel asghar at 07:31:00
Cool Social Media Sharing Touch Me Widget
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.

This widget should be working like the picture above or you can see it at demo page.


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>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(http://mybloggertricks.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>

<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>

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.

Thanks to MyBloggerTricks for this code.

Have a nice day. Do not forget to share and comment. =)
Like Us.... Receive updates on your Facebook wall!!!!


If you enjoyed this post and wish to be informed whenever a new post is published, then make sure you subscribe to my regular Email Updates. Subscribe Now!


Kindly Bookmark and Share it:

0 comments:

Have any question? Feel Free To Post Below:

Related Posts Plugin for WordPress, Blogger...
 

Author

My Photo
My Name is Shakeel Asghar. I am Computer Graphics Designer, Web Designer  from Lahore, Pakistan.

Popular Posts

Live Score

© 2011. All Rights Reserved | SHAKEEL ASGHAR |

Home | About | Top