-

13 September 2012

Social Share Buttons

VM | 12:37 am |
Touch Me Sharing Widget





The 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. 

DEMO

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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjAfGOWHbi-l99tfFgzj7mmuqRGU0wq4Q-ZzataVOmzBI4TCyWemVKGODR4BJ0VuLsX2H1t9cW2So25BCdccIatETTJwEMnNj52CeZ-jHOr1ayOqRYqyhfuCq8dSuoa75yqJa_8MC_6C6c/s1600/Sharing+Touch+Me.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!

No comments:

Post a Comment

Related Posts Plugin for WordPress, Blogger...

Subscribe Updates, Its FREE!