Add Facebook, Twitter, Google +, Youtube, RSS Feed Slide/Pop Out Widget To Your Blog/Site

After a little break, i think i should come back with something unique, so i will will be sharing with how you can add a five different social media widget to your blog/site.
This widget comprises of facebook like box, twitter follower box, Google plus, Youtube and RSS feed subscribe box, and this widget will slide out smoothly when you place your cursor on any of the widget, due to the jQuery effect that is included.
Follow the simple procedure below on how you can use this five stylish widgets to spice up your blog/site.



How To Add The Widget To Your Blog

STEP 1

• Login to your blogger dashboard
• Click on "Design" > "Edit HTML" > back up your template
• Use ctrl F to find </head> and paste the following code above/before </head>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>
jQuery(document).ready (
function(){jQuery("#facebook_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#facebook_right").stop(true,false).animate({right: -249}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -264}, 500); });
jQuery("#google_plus_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#google_plus_right").stop(true,false).animate({right: -323}, 500); });
jQuery("#youtube_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#youtube_right").stop(true,false).animate({right: -303}, 500); });
jQuery("#feedburner_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#feedburner_right").stop(true,false).animate({right: -303}, 500); });
});
</script>

• Click "SAVE TEMPLATE"

STEP 2

• Go to "Design" > "Page Elements" > "Add a Gadget"
• Choose "HTML/JavaScript" from the list of the gadget that appear in the pop-up window
• Copy and paste the code below in the content box leaving the title box blank.

<style>
img, a { border: 0; }
#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:245px;height: 260px;overflow: hidden;}
#twitter_div {width:260px;height: 238px;overflow: hidden;}
#google_plus_div {width:320px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#youtube_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:245px;height: 260px;position: fixed;right: -249px;}
#facebook_right img {position: absolute;top: -2px;left: -35px;}
#facebook_right iframe {border:0px solid #3c95d9;overflow: hidden;position: static;height: 360px;left:-2px;top:-3px;}
#twitter_right {z-index: 10004;border:2px solid #6CC5FF;background-color: #6CC5FF;width:260px;height: 238px;position: fixed;right: -264px;}
#twitter_right_img {position: absolute;top: -2px;left: -35px;border: 0;}
#google_plus_right {z-index: 10003;background-color: #006ec9;border:2px solid #006ec9;border-top:2px solid #0056a0;border-bottom: 2px solid #0056a0;border-right:2px solid #0056a0;border-left: hidden;width:320px;height: 143px;position: fixed;right: -323px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#youtube_right {z-index: 10002;background-color: #fefefe;border:2px solid #ff0000;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:301px;height: 100px;position: fixed;right: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10001;background-color: #fefefe;border:2px solid #5b5b5b;border-top:2px solid #5b5b5b;border-bottom: 2px solid #5b5b5b;border-right:2px solid #5b5b5b;border-left: hidden;width:300px;height: 97px;position: fixed;right: -303px;}
#feedburner_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
</style>
<div id="on">
<div id="facebook_right" style="top: 8%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgoa4fbDtfFvhdKisAmPvfz-zMAj7JT5hRwIyYJCU72lxLnrmDRZaExFUAy1fnofz77GtVAIX7o_H9yA98aMbNZx_mesW8OwAF1nyGTvktO1XL7B5xbF0tFXNgu1zSdNZm51X3Aj7TiGA/s1600/Facebook.png" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FHowtoalltools&amp;locale=en_GB&amp;width=245&amp;connections=9&amp;stream=&amp;header=false&amp;show_faces=0&amp;height=260" scrolling="no"></iframe>
</div>
</div>
</div>
</div>
<div id="on">
<div id="twitter_right" style="top: 25%;">
<div id="twitter_div">
<img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhxCFRJ8r9HYD5DluBJDamqcav3-G7OFLD_KAIZeofWBYDtC-oX0xuV0d3Q9-SCwgo9cBnboCa6T0Fl__CSTfghXTlfnw_piEXFF9iAuDCjFtpRifr8Lwf-E1HGK5Ut4OCyt4fYpKweg/s1600/Twitter.png" />
<script type="text/javascript" src="http://script-ot.googlecode.com/svn/twitterbox.js"></script>
<div id="twitterfanbox"></div>
<script type="text/javascript">fanbox_init("Howtoalltools");</script>
</div>
</div>
</div>
</div>
<div id="on">
 <div id="google_plus_right" style="top: 42%;">
  <div id="google_plus_div">
   <img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiBCnJ6cuMs7MJXlNFa_uCVumUW-09PgFqZmTvaVmnt-zFkIB1b-BE0BVQTnIJ7FrJngju_L2aDsAztOi3oVm3OVqCJN0EkwyN-yBv8SPP5iAxP95goRIbfh_7SQ1Wu38FmkIk0yePyeg/s1600/Google+Plus.png"/>
   <div style="float:left;margin:1px 0px 0px 2px;">
    <g:plusone size="tall" expr:href="data:post.url"></g:plusone>
</div>
</div>
</div>
</div>
<div id="on">
<div id="youtube_right" style="top: 59%;">
<div id="youtube_div">
<img id="youtube_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo2jQ7VcYfi14E0F4-i4PYchzGco-bVuUKndMJuwbA_xcxULJTGm856wJDClRry1iRRTWQNuhOpjcYyM2rVeafY7eJxIdA_Usue5JACMJ9V6M61DXUHAXa7uAIPHJN0XyhxhiT_2TtIA/s1600/YouTube.png" />
<div style="float:left;margin:1px 0px 0px 2px;">
<iframe src=http://www.youtube.com/subscribe_widget?p=howtoalltools style="height: 105px; width: 300px; border: 0;" scrolling="no" frameborder="0"></iframe>
</div>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 76%;">
<div id="knfeedburner_div">
<center><br/>
<h4 style="color:#F66303;">Subscribe And Get Free E-Mail Updates:</h4>
<form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=HowToAllToolsTopTutriolsToolsAndTips', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter Your E-Mail Here..." onblur="if (this.value == &#39;&#39;) {this.value = &#39;Enter Your E-Mail Here...&#39;;}" onfocus="if (this.value == &#39;Enter Your E-Mail Here...&#39;) {this.value = &#39;&#39;;}" type="text" /><input value="HowToAllToolsTopTutriolsToolsAndTips" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form>
</center>
<img id="feedburner_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEir705gPYdIXYUwQ8BbgLoP2ow6dxQC9dOF_7Ubwfld_HUVq-Qj_kqrxNpmCpawZxGm9L_Fmrv2whWlHrqwo8smRsfIqU6KzgNBl5YV3HVOOVHgou5LJs_Ho57MOvFVNSWDtzz9W8b3HA/s1600/Subscribe.png" />
</div>
</div>
</div>

• Replace howtoalltools with your facebook fan page username
• Replace howtoalltools with your twitter username
• Replace howtoalltools with your youtube username
• Replace http://feedburner.google.com/fb/a/mailverify?uri=HowToAllToolsTopTutriolsToolsAndTips with your feedburner url
• Replace HowToAllToolsTopTutriolsToolsAndTips with your feedburner username
• Click "Save" when you are through with your editing