Blogger Ever

Superb Jquery Social widget v5 Multi tab style for Blogger

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.

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&amp;width=200&amp;height=62&amp;show_faces=false&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;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 == &quot;&quot;) {this.value = &quot;Enter email address here&quot;;}" onfocus="if (this.value == &quot;Enter email address here&quot;) {this.value = &quot;&quot;;}" 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> 
Now edit the following.

  • bloggerever with your facebook username.
  • bloggerever with your twitter username.
  • 101891357869529871731 with Google plus ID.
  • FEEDBURNER_USERNAME with your feedburner username.

Blogger

2013-2016 Copyright Blogger E\ver . Coded, managed and founded by Mohammad Hamza (@hamzadhamiya) . Hosted on Blogger and fonts used are Raleway and Open Sans.