June 10, 2012

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

31 comments : Post Yours! Read Comment Policy ▼
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. Awesome Widget
    Very Good Work :)

    ReplyDelete
  11. 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
  12. nice widget....Mohammad...i install it at my website
    www.studentvoice.in

    ReplyDelete
  13. @お七
    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
  14. dhoola dheerchesav bhaiyya............raccha antey


    visit mine http://ajaykumar823.blogspot.com

    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

 
  • MBT Icons and buttons

    Icons and Buttons

    Our resources have been successfully downloaded over 10K times and found almost every where. Get yours!

  • choosing webhost for a blog

    Why HostGator?

    Learn Why we chose HostGator as our Web Host and find discount coupons to kick start your blog today!

  • SEO Settings for blogger

    ALL IN ONE SEO PACK 2012

    Learn every single SEO tip that will boost your blog's ranking and organic traffic. We got them all!

  • Blogger widgets and plugins

    Visit MBT's Blogger LAB

    Why not take a tour of all great Blogger widgets published so far? You Name it we have it!

  • become a six figure blogger!

    Become a SIX FIGURE BLOGGER

    Learn what it takes to become a successful entrepreneur and build a living online!