RSS Facebook Twitter Google+ Buttons with Hover Effect (without javascript)




You may get lots of widgets from thousands of blogs, but one thing all those widgets include is JavaScript file. It would be somewhere in the code and end with .js extension.

Facebook RSS Twitter Google+ Sharing buttons without javascript with hover effect like labnol
When pointer was on fb icon
These java-scripts are responsible for the increase in your site load time. The more .js files you have in your blog more time it will take to load which may result in losing your visitors. Many of them annoyingly clicks on the cross mark of the tab due to load time.

So, I advice you to make minimum use of .js files(albeit we can't prevent using)
I'll try my best not to have many of those .js files in my codes.

Here we go. This is darker version for colorful blogs (beauty-fashion), for pro or tech blogs you may try light theme version.

Sharing Buttons RSS, Facebook, Twitter, Google+ with Hover Effect.


Live Demo


/*code starts here*/

<style>
.rlab {
display: block;
margin: 2em auto;
width: 200px;
height:10px;
}
.rlab span {
float: left;
display: inline;
margin-right: 8px;
}
.rlab span a {
display: block;
width: 32px;
height: 31px;
text-indent: -9999px;
background-color: none;
background: transparent url("http://2.bp.blogspot.com/-bVuLYldCT1c/T-0_t0-7L-I/AAAAAAAAAXw/hkr-xc8Lp10/s1600/RookiesLab.PNG") 0 0 no-repeat;
}
#iconRSS {background-position: 0 -33px;}
#iconFacebook {background-position: -66px -33px;}
#iconTwitter {background-position: -33px -33px;}
#iconGooglePlus {background-position: -132px -33px;}
#iconRSS:hover{background-position:0 0}
#iconFacebook:hover{background-position:-66px 0}
#iconTwitter:hover {background-position: -33px 0;}
#iconGooglePlus:hover{background-position:-132px 0}
h6 {font: 90%/1.5em arial, helvetica, sans-serif;
color: #909090;text-transform:uppercase;margin-bottom:10px;}
#footer-logo{text-align:center;margin:10px 0 20px;clear:both}
#footer-logo a{color:#000;text-decoration:none}
.footer-rss{background:url("http://2.bp.blogspot.com/-bVuLYldCT1c/T-0_t0-7L-I/AAAAAAAAAXw/hkr-xc8Lp10/s1600/RookiesLab.PNG") no-repeat scroll 0 -180px transparent;display:inline-block;height:20px;width:42px;margin-right:12px;vertical-align:baseline;border-radius:3px;-webkit-border-radius:3px;-moz-border-radius:3px}
.footer-nav{margin:0 auto 20px;width:100%}
.footer-nav a{margin:0 4px; color: #666;}
.footer-nav{margin:0 auto 20px;padding:15px 0 0;border-top:solid 1px #ccc;width:86%;text-align:center}.footer-nav
li{padding:0;margin:0;display:inline;list-style:none}.footer-nav a{font:100% "OFL Sorts Mill Goudy TT", Georgia, Times, serif;margin:0 8px;text-transform:uppercase;text-decoration:none}​
</style>
<div class='rlab'><span><a href='http://feeds.feedburner.com/RookiesLab' id='iconRSS' target='_blank' title='RSS Feed'>RSS</a></span><span><a href='http://www.facebook.com/RookiesLab' id='iconFacebook' target='_blank' title='Facebook'>Facebook</a></span><span><a href='http://www.twitter.com/RookiesLab' id='iconTwitter' target='_blank' title='Twitter'>Twitter</a></span>  <span><a href='https://profiles.google.com/103866379854774290108' id='iconGooglePlus' target='_blank' title='Google Plus'>Google</a></span></div>
<a style=" font-size:9px; color:#C4C3C3; text-decoration:none; float:right; margin-right: 75px;" href="http://www.rookieslab.com/2012/06/rss-facebook-twitter-google-buttons.html">Widget</a> 

/*code ends here*/ 


Above code is very effective because it doesn't make use of JavaScript and the widget looks professional (typically on white background)

Just copy the code and paste it in the HTML/JavaScript of your blog by using Add a new widget in Layout in Blogger.

Don't forget to change the Usernames highlighted in blue to your respective usernames.:)

Here's the more lighter version of this widget, as you can see on top-right corner of this blog.

Originally the widget was developed by labnol.org and modified by Rookies Lab(me :-P). Thanks to Amit Agarwal for the amazing plugin.

Footnote: Bloggers who copy the above code and publish it in their posts are requested to give a backlink to this post.!Imp Also please respect the hard work & don't remove the Widget link. I'd be glad to help you customize the widget on your request.


Also Try: New 2013 Social Sharing Buttons with hover effect
newer post older post