Saturday 16 March 2013

Widgets

Touch me sharing widget for blogs/blogger



Hi! to I am going to share another social media widget. I have share Many Tricks About Blogger.Like Social Sharing Widget With Cool Hover Effects.Create a Cute E-mail Subscription Form ETC .But today about  "Touch me"  sharing widget for blogs/blogger.This widget  have  facebook Twitter,Google Plus and Rss sharing  buttons .Facebook is best Social Media Website and after Facebook Twitter is most Popular Web.and another Social Media site  that is Google Plus.If you want to add this widgets in your blog than follow the following steps.

How to  Add "Touch me"  sharing widget for blogs/blogger?

  • Go to Blogger dashboard >> Layout >> Add a Gadget >> HTML/Javascript Box.
  • Paste the following code inside  the HTML/javascript Box.
<style>
/*--------Touch Me Sharing Widget ------*/
.touchme a {
display:block;
height:50px;
width:50px;
padding:0 4px;
float:left;
background:transparent url(https://farhankayni.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:


  1. Replace YOUR RSS LINK with your Feed burner link.
  2. Replace YOUR GOOGLE PROFILE LINK with your Google+ URL
  3. Replace YOUR FACEBOOK LINK with your Facebook URL
  4. Replace YOUR TWITTER LINK with your Twitter Profile URL
  5. And click on save.

Note:This widget originally Credit  by Umar Irshad from  Design Kindle.

SHARE THIS POST   

  • Facebook
  • Twitter
  • Myspace
  • Google Buzz
  • Reddit
  • Stumnleupon
  • Delicious
  • Digg
  • Technorati
Author: Farhan Kayani
I'm Farhan Kayani a Web Designer, Web Developer and Computer Instructor Currently live in Islamabad,I've been interest to forward my experience to the world. . Read More →

0 comments:

Please do not Spam Comments will be Deleted immediatley upon review.


/
show-notice
hide-notice