Superb Jquery Social widget v5 Multi tab style for Blogger

I've published tons of widgets including social widget.But,yet no Jquery widget has been published yet.Yes,this time we got a Jquery surprise for you.I've designed this multi tab Jquery social widget for Blogger.This widget holds 4 main fields of social media.Though 'I've discussed about Social media integration with Blogger,thus I will cordially suggest you to grab this amazing looking Jquery widget that couldn't be more better as it contain some fascinating features to make up your blog.So lets see our first social widget that is powered By Jquery and designed for Blogger.

First check out the demo.

Demo

Features

Fixed widget of 200px.
Animation is pure Jquery.
Major browser supported.
Held 4 social media accounts (Facebook,Twitter,Googleplus,RSS)
Easy to edit.

So lets start.

First go to template > Edit HTML

If you have installed Jquery then leave these steps.

Find <head>
Add the following snippet just after it.

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Now find ]]></b:skin> and paste the following code just above it.

#be-social-v5-buttons
{
display: block;
height: 40px;
width: 200px;
}
#be-social-v5-buttons button
{
border: none;
color: #fff;
cursor: pointer;
display: block;
float: left;
font-size: 11px;
height: 40px;
margin: 0;
padding: 0;
width: 50px;
}
#be-social-v5-cus
{
font-family: verdana;
font-size: 30px;
}
#be-social-v5
{
background: #3661A0;
color: #fff;
display: block;
font-family: verdana;
font-size: 15px;
height: 160px;
padding: 20px;
width: 160px;
}
#be-social-v5-cus
{
}
#fb-v5
{
}
#twitter-v5,
#google-v5,
#rss-v5
{
display: none;
}
#be-fb-v5
{
background: #3661A0;
}
#be-twitter-v5
{
background: #1BB2E9;
}
#be-google-v5
{
background: #E81814;
}
#be-rss-v5
{
background: #FE9900;
}
.betextarea-v5
{
background: #3e3e3e;
border: none;
color: #fff;
height: 30px;
margin-top: 5px;
moz-transition: all 0.3s ease-in-out;
ms-transition: all 0.3s ease-in-out;
o-transition: all 0.3s ease-in-out;
padding: 5px;
transition: all 0.3s ease-in-out;
webkit-transition: all 0.1s ease-in-out;
width: 90%;
}
.betextarea-v5:focus
{
width: 100%;
}
.besubmit-v5
{
background: #3e3e3e;
border: none;
color: #fff;
moz-transition: all 0.3s ease-in-out;
ms-transition: all 0.3s ease-in-out;
o-transition: all 0.3s ease-in-out;
padding: 6px;
transition: all 0.3s ease-in-out;
webkit-transition: all 0.1s ease-in-out;
}
.besubmit-v5:hover
{
background: #000;
}

Now find </head> and paste the following code just above it.

<script>
$(document).ready(function(){
$("#be-fb-v5").click(function(){
$("#be-social-v5-cus,#twitter-v5,#google-v5,#rss-v5").fadeOut(500);
$("#be-social-v5").css("background","#3661a0")
$("#fb-v5").delay(500).fadeIn(500);
});
$("#be-twitter-v5").click(function(){
$("#be-social-v5-cus,#fb-v5,#google-v5,#rss-v5").slideUp(500);
$("#be-social-v5").css("background","#1BB2E9")
$("#twitter-v5").delay(500).slideDown(500);
});
$("#be-google-v5").click(function(){
$("#google-v5").show(500);
$("#be-social-v5").css("background","#E81814")
$("#be-social-v5-cus,#twitter-v5,#fb-v5,#rss-v5").hide();
});
$("#be-rss-v5").click(function(){
$("#be-social-v5-cus,#twitter-v5,#google-v5,#fb-v5").slideUp(500);
$("#be-social-v5").css("background","#FE9900")
$("#rss-v5").delay(500).slideDown(500);
});
});
</script>

Now Save Template.
Go to Layout >Add widget>HTML/javascript.
Paste the following code in it.

<div id="be-social-v5-buttons">
<button id="be-fb-v5">Facebook</button>
<button id="be-twitter-v5">Twitter</button>
<button id="be-google-v5">Google Plus</button>
<button id="be-rss-v5">RSS & E-mail</button>
</div>
<div id="be-social-v5">
<div id="fb-v5">
Like Us On <b>Facebook</b>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fbloggerever&width=200&height=62&show_faces=false&colorscheme=light&stream=false&show_border=false&header=false" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:62px;" allowTransparency="true"></iframe>
</div>
<div id="twitter-v5">
Follow us on <b>twitter</b> via our official twitter account.<br><br>
<a href="https://twitter.com/bloggerever" class="twitter-follow-button" data-show-count="false" data-size="large" data-dnt="true">Follow @bloggerever</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');</script>
</div>
<div id="google-v5">
Follow us on our official <b>Google Plus</b> page.<br><br>
<a href="//plus.google.com/101891357869529871731?prsrc=3"
rel="publisher" target="_top" style="text-decoration:none;">
<img src="//ssl.gstatic.com/images/icons/gplus-32.png" alt="Google+" style="border:0;width:32px;height:32px;"/>
</a>

</div>

<div id="rss-v5">
Either subscribe via <a style="color:#fff;padding:5px;border-radius:5px;background:#FE9900;line-height:30px;text-decoration:none;" href="http://feeds.feedburner.com/FEEDBURNER_USERNAME">RSS</a> or by E-mail form below
<form action="http://feedburner.google.com/fb/a/mailverify" id="feedform" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=FEEDBURNER_USERNAME', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true">
<input gtbfieldid="3" class="betextarea-v5" name="email" onblur="if (this.value == "") {this.value = "Enter email address here";}" onfocus="if (this.value == "Enter email address here") {this.value = "";}" value="Enter email address..." type="text" />
<input type="hidden" value="FEEDBURNER_USERNAME" name="uri"/><input type="hidden" name="loc" value="en_US"/>
<input class="besubmit-v5" value="Submit" type="submit" />
</form>
</div>

</div>