"Touch Me" Sharing Widget For Blogs

Touch Me Sharing WidgetThe rapid advancement and development of Social Media and growing interest of people in social networking sites has given birth to dozens of social sharing tools and services. Web masters are getting addicted to these tools because unlike organic traffic from search engines, web traffic from social channels have overtaken search traffic. Bloggers today depend largely on networks like Facebook, Google plus and twitter to drive traffic to their blogs. These tools are good only if they can attract a visitor to bookmark and share your content. From your website quality content till your blog design, every single bit counts in turning a visitor into a follower. To help you with your dream of increasing  fans and readers we bring you "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. We have coded it neatly using basic HTML and some spicy CSS styles.


Live Demo

Please take less than a minute to like and bookmark this page as a token of favor for our small effort. :)

Where should you add it?

Its is standard practice to add social counters inside posts and social sharing buttons in a sidebar. I would therefore advise that you add this widget towards the top right section of your blog above all ads and gadgets.

Read my article on How to force a visitor to subscribe in order to understand why this location is the best.

Add it to blogger

I am sharing below the steps for BlogSpot users. If you are a wordpress or Joomla user or running a normal website then you just need to copy and paste the following code inside your templates.

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

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!

Credits

The icons used in the widget are designed by Umar Irshad from  Design Kindle. You are requested to link back to this page if you wish to share this gadget with your audience.

Need help?

The steps are self explanatory and extremely easy. In case you got yourself into a trouble then Please let us know and we would love to help. Please share this widget with your friends by liking us on Facebook or recommending us on Google+. Peace and blessings pals! :)

Did you check the following?

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

33 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.
  1. i was thinking of making the same widget for my readers but anyway you did it first.. and i like it.. :)

    ReplyDelete
  2. intersting sharing....and ncie to c u after longtime...:D
    Regards,
    SmartBots

    ReplyDelete
  3. cool bro successfully added on my little blog :P

    Just take a look : http://nannu4u.blogspot.in

    ReplyDelete
  4. Salam Mohammad i'm Abdelkarim from morocco, i like all your posts and i'm always following you. keep up your good work. if you don't mind i need this template that you use in MBT for my blogspot blog, thank you
    Happy blogging

    ReplyDelete
  5. @ankit

    You should not have waited :p

    @probloggertricks

    Nice to see you too brother :)

    @abhishek
    Congrtx. glad to see you installed it easily. :)

    @zakri
    thanks for the valuable feedback bro. The template that we are using is our brand and we have therefore kept it private. However many users have successfully created one like ours using the structure we provided. Please visit our template gallery.

    ReplyDelete
  6. Love this widget,✿◕‿◕✿ a million of thanks to you !

    ReplyDelete
  7. How To add youtube hover button also. i changed rss feed to youtube but the logo didn't change.please help sir!!!!!!!

    ReplyDelete
  8. Nice Work I Used It In My Blog http://yogeshmandge01.blogspot.in/
    Anyway Nice Work !

    ReplyDelete
  9. Thank you very much, I use this for my blog.

    ReplyDelete
  10. Thanks for this wonderful Script.

    ReplyDelete
  11. Awesome Widget
    Very Good Work :)

    ReplyDelete
  12. hello!

    very nice Gadget!. But i want to put it in the middle under my pages tab . how to make it come to the middle ?

    THanks

    ReplyDelete
  13. nice widget....Mohammad...i install it at my website
    www.studentvoice.in

    ReplyDelete
  14. @お七
    HEY I MADE SOME ADJUSTMENT TO THIS CODE WITH MY NEW YOUTUBE BUTTON ITS WORKING YOU CAN VISIT TO :COMPUTER GEEK FORUM:
    http://computer-geekforum.blogspot.in/2012/09/amazing-share-buttons-for-blog.html

    AND GET CODE FOR YOUTUBE BUTTON ALSO

    ReplyDelete
  15. This comment has been removed by the author.

    ReplyDelete
  16. Look Great on my site:
    PLz Visit: www.monkeytrick.tk

    ReplyDelete
  17. @Mohan Pd. Upadhyay

    Add a "Rose Chemical Social Sharing Bottles with Spinning Effect to Blogger"

    Sharing Bottle Widget With Spinning Effect

    ReplyDelete
  18. This comment has been removed by the author.

    ReplyDelete
  19. mohammad from two days this widget and jquery pop up box have stopped working only links are seen and all images are not working you can check it at my blog gadgethelps4u.blogspot.com @ share us widget

    ReplyDelete
  20. @Udit Chugh

    switch the googlecode url to http://4.bp.blogspot.com/-uiQULUqhh4I/UJ-z1NiNyxI/AAAAAAAAAwQ/J00F7MpHMtc/s1600/Sharing+Touch+Me.png

    and it should work

    ReplyDelete
  21. hey mustafa. i have send you guset article from syed.ali654@gmail.com ,please check it .it's 100% original

    ReplyDelete
  22. hi, thanks for the widget, but I just can't seem to get it working. I deleted the twitter and facebook links code, but that is all I changed? any help appreciated
    my url http://noddysasianadventures.blogspot.com/

    thanks

    ReplyDelete
  23. Today is my first day at anything like this. I input the code but the icons are invisible. How do I get them to show up?

    ReplyDelete
  24. HELP..... !! icons are invisible... how i get them to show up... ??

    ReplyDelete
  25. Hi team,
    What about the linkedin button . How can we add Linkedin in this list

    ReplyDelete
  26. brother i've post this gadget on my blog but did not appear as it should be. suggestion bro?
    You can see on my blog alidslr.blogspot.com right on top of search

    ReplyDelete