A new share button widget for 2013 with RSS Facebook Twitter and Google+ buttons (YouTube too on request)Tried to make as looks as simple as possible like Windows 8 :p
It'll consume a very little space of your blog & can even be placed in a size of search bar's area :)
Qualities of the gadget are same as we had in earlier versions v1, v2. These versions were colored. But this one is Black & White for education or decent tech blogs.
I got the idea for this from one of the educational open source website edx.org
There are four buttons here & the code below also contains these 4 buttons but if you need YouTube then you may leave a comment, I will send you the code for that too.
Since these four are widely used I'm posting a general code for them.
Live Demo: Top right corner of this blog
<style>
.rlab {
display: block;
margin: 30px -50px -30px 50px;
width: 200px;
}
.rlab span {
float: left;
display: inline;
margin-right: 10px;
}
.rlab span a {
display: block;
width: 32px;
height: 34px;
text-indent: -9999px;
background-color: none;
background: transparent url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjm2Ab6tydMNHcqqzNbXiWUg1_XQT2oZD5x2bjQKo8c6H19TjOHPqmSW31NbweCcbrBYGL3zxwd4aeKcxPvkYimJbzDQvOA8SHkLVmKQH-yuDrW-mP0FVwjQp5XKvHRwRi6zTyEpqqIAgbQ/s1600/RookiesLab_share_buttons.png") 0 0 no-repeat;
}
#iconRSS {background-position: 0 -32px;}
#iconFacebook {background-position: -66px -32px;}
#iconTwitter {background-position: -33px -32px;}
#iconGooglePlus {background-position: -132px -32px;}
#iconRSS:hover{background-position:0 0}
#iconFacebook:hover{background-position:-66px 0}
#iconTwitter:hover {background-position: -33px 0;}
#iconGooglePlus:hover{background-position:-132px 0}
</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?rel=author' id='iconGooglePlus' target='_blank' title='Google Plus'>Google</a></span></div>
<a title="Get this Widget or try more social sharing buttons" style=" font-size:9px; color:#E4E3E3; text-decoration:none; on-hover: underline; float:right; margin-right: 80px;" href="http://www.rookieslab.com/search/label/Essential%20Widgets%20-%20worth%20trying">Widget</a>That's it.
Change the links highlighted to your respective links.
Copy & Paste the above code in Layout >> Add a new Gadget >> HTML/JavaScript
Save and you'll see a decent new Social Sharing Buttons on your blog.
Do 'Like' us on FB or 'Follow' us on Twitter for more such Gadgets and Tutorials.
Happy Blogging.
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.
Related Widgets:
Floating Share Bar with FB,Tweet,G+,Stumble
Colored Facebook, Twitter, RSS ,Google+ Buttons with Hover Effect
Floating Share bar with FB,G+,Stumble,AddThis
Email Subscription Widget
