.....

Bloggerkini

Blogger Tutorials and Tips. Together We Learn !

Cool Social Media Sharing Widget for Blogger with Mouse Over Effects


This cool widget calls "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.

This widget should be working like below,

or you can view on live at our blog test. Click Here to view.



So, do like this widget? Now let's begin,

1) Log in you blogger account.


2) Go to Design > Page Elements > Add a Gadget > select HTML/JavaScript

3) Copy code below and paste it into 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(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.
- example: http://feeds.feedburner.com/Bloggerkini

* Replace YOUR GOOGLE PROFILE LINK with your Google+ URL
- example: https://plus.google.com/117492407450639550126

* Replace YOUR FACEBOOK LINK with your Facebook URL
- example: http://www.facebook.com/Bloggerkini

* Replace YOUR TWITTER LINK with your Twitter Profile URL
- example: http://www.twitter.com/Bloggerkini


4) Then, click save. You Done!


* This post was originally posted by Mybloggertricks.


Have a nice day!



.
Please Share This ! :)





Asbestos
I'm Asbestos the main author of Bloggerkini.com. I wrote more about blogging tips and tutorial. Also share with the reader how to make money online. I blog since 2005 and this is my brand new blog. Like Us on Facebook, Follow on Twitter, be a Member on Blogger and Join Us on Google Plus+

1 comments:

Unknown said...

grab this awesome social sharing button widget.


Subscribe via Email

Please verify your email by clicking the link from Google Feedburner in your inbox. Yes, we respect your privacy. You can unsubscribe anytime.


PopAds.net - The Best Popunder Adnetwork

Followers

Subscribe via email

Enter your email address:

Delivered by FeedBurner


Track



Sponsor

Tweet Page

Blog Archive

Need Support

If you like our blog, then kindly spread our voice using the badge below:

Bloggerkini Tips

OR

Pick a Cool Banner.

Popular Posts

Recent Tutorial

Recent Posts

Advertisement