Animated Social Share Widgets for Blogger

Rapid progress and development of Social Media and the growth of interest in social networking sites has given rise to dozens of social sharing tools and services. Web masters increasingly addicted to tools-tools like this because unlike organic traffic from search engines / search engines, social media web traffic from search engine traffic can be beat. Bloggers today are very dependent on the network such as Facebook, Google plus and Twitter to drive traffic to their blog. This tool is good only if they can attract visitors to bookmark and share your content. Of quality content on your website to design your blog, so that visitors can make a follower. To assist in improving it I will share tool widget benama "Touch Me". The name for an attractive appearance that compel visitors to hover over the icon and press the press! :) This gadget is structured using the key from popular services such as Google Plus, Facebook, Twitter and RSS. We have encoded cleanly using some basic HTML and CSS are interesting.

Where should you put it?

In general, sharing buttons placed on the sidebar. Therefore I would suggest that you add this widget to the top right of your blog above all advertisements and other gadgets.

Add to blogger

Below are the steps to BlogSpot users. If you are a user of wordpress or Joomla or run a normal website then you just need to copy and paste the following code in your template. Here are the steps for blogger users

Go To Blogger> Layout

Select add gadget

Choose HTML / JavaScript

Paste the following code in it,

<style>
/ * -------- Touch Me Widget Sharing ------ * /
. 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: all 0.2s ease-in;
-moz-transition: ease-in 0.2 s all;
-o-transition: all 0.2s ease-in;
-ms-transition: all 0.2s ease-in;
transition: all 0.2s ease-in;
cursor: pointer;}
. TouchMe a.googleplus {background-position :-58px 0px;}
. 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>