Friday, July 4, 2014

Touch Me - Social Sharing Widget for Blogger

There are a lot of social sharing tools and services are developing day by day because of the rapid advancement of social media and the growing interest of the people on social networking sites. Website owner and bloggers are using these tools on their sites because web traffic from social media have overtaken search traffic.

Touch Me Sharing Widget

A social sharing widget is more effective when it can attract the visitors. To help you to increase blog traffic by social media today I am sharing a attractive social sharing widgets from blogger named Touch Me. The name Touch Me is because as you can see in the above image that the social buttons are moving when the mouse cursor is moving over them. As a result it inspire the visitors to follow you site's social page.


Adding Touch Me Sharing Widget To Blogger:
  1. First Log Into your Blogger Account and go to Dashboard.
  2. Then click on Layout.
  3. Now click on Add a Gadget button where you want to place this widget.
  4. Then select HTML/Javascript.
  5. Then Copy the below code and Paste it in the Content box.
  6. Then click on Save button.
<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> 


Customization:
  • Replace YOUR RSS LINK with your Feedburner 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.

That's it. Now visit your site and you will see the widget on your site. Move your mouse cursor over these icon.


Stay with www.iTTimesbd.com for more IT related Post

No comments:

Post a Comment