--> "Touch Me" Sharing Widget For Blogs | Experience Lab - Online business creation and development guide for bloggers and startups

"Touch Me" Sharing Widget For Blogs

The rapid advancement and development of Social Media and growing interest of people in social networking sites has given birth to dozens of...

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?

COMMENTS

Name

Affiliate Marketing,12,Announcement,34,Bing,9,Bitcoin,38,blog,7,Blogger Resources,42,Blogger Templates,4,blogger tricks,156,Blogging ethics,70,Blogging tips,198,Bugs and Errors,34,Business,9,Copyright Violation,9,CSS and HTMLTricks,95,Designs,8,drop down menu,7,eBook,12,Email Marketing,7,Events,30,Facebook,30,Facebook tricks,49,Google,157,Google AdSense,42,Google Analytics,7,Google Plus,51,Google Plus Tricks,38,Guest Posts,112,home,2,How To,77,Internet,1,JSON Feeds,25,Kitchen Recipes,2,Label Based Sitemap Themes,1,Make Money Online,108,Marketing,16,MBT Blogger Templates,7,Menus,1,News,146,Pages,1,Posts,10,presentations,15,Responsive,10,Reviews,7,SEO,307,Settings,6,Shortcode,15,Sitemap Themes,1,Social Media,155,Technology,7,Templates,1,Tips,2,Tools,1,Traffic Tips,80,Video,19,Web Designing,62,web hosting,18,Webmaster Tools,97,Widgets,199,wordpress,26,
ltr
item
Experience Lab - Online business creation and development guide for bloggers and startups: "Touch Me" Sharing Widget For Blogs
"Touch Me" Sharing Widget For Blogs
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqQxgs8zRsPYI6x8yqwLymdKSaKSW4GfNoHn67bDc-pl_MERo3AiBfhU3qd6qWcGMsRP34yX_e2ik_hOKGD_fTxpddSCrP4pLe286rViZM0od2X8aV4AKNfLNcAkI9zbLFqV_v-GlfVdn/s1600/Touch+Me.gif
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzqQxgs8zRsPYI6x8yqwLymdKSaKSW4GfNoHn67bDc-pl_MERo3AiBfhU3qd6qWcGMsRP34yX_e2ik_hOKGD_fTxpddSCrP4pLe286rViZM0od2X8aV4AKNfLNcAkI9zbLFqV_v-GlfVdn/s72-c/Touch+Me.gif
Experience Lab - Online business creation and development guide for bloggers and startups
https://www.experiencelab.info/2012/06/me-sharing-widget-for-blogs.html
https://www.experiencelab.info/
https://www.experiencelab.info/
https://www.experiencelab.info/2012/06/me-sharing-widget-for-blogs.html
true
2959477579779989044
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share. STEP 2: Click the link you shared to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy