How to add social networking slideouts on a blog

Today i am going to share with you a few tips on how you can add a few attractive social networking sliders such as Facebook,twitter, Google plus,YouTube and subscribe to your blog(as shown in the screenshot on the right hand side).These tabs show the profile you set(Like your Facebook page or your twitter user id etc)to your blog readers when they hover over it and looks quite attractive as well without taking up much space on the blog.There are two steps you need to follow to get this on your blog.

Step 1:

Go to your blogger dashboard-->Template--->Edit Html--->Proceed

Press the CTRL+F key which will open up the search box

Search for </head> tag and input the following code just above it.

<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 on save template.

Half of it is complete.You are almost there.

Step 2:

This is a little easier.This has to be done just as normally as you would add a gadget through layout on blogger.

Go to your blogger dashboard--->Layout--->Add a Gadget

and then input the following code

<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/AVvXsEinkV_MnMUwAQ2lAUzIGs5_SOTQtUeGw-UMmARzJudrJSZ89tQatQ9qJde7Y2McIhwZCFyIlXQCg8TabqTl57b0twnLbijbAk8vJykN_TmlUHQPOPyPnbzqGduCu5CvA1ZUpBst9RE4ow/s1600/Facebook.png" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2Fyour facebook page address&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/AVvXsEiGRCO5wK79A7wp0-vVjWNB_-mt55MSbm0TYM4iaWKrQqnNhPOB0rK5zp7ML0OLMfMbuGoBR0MzsJE8lbTaPqeQu474nxJtGTq2GRGtVHTJj6qNTC4c45WG7rKDzFBn0KogYXfwu7I_DQ/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("userid");</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/AVvXsEjVuJkBQA9HR7-Z8agTGDdVfL-gDPKrgIfYV6KLanM114VYARgNx1CxX3SuqYCgfuW6axiFaJhR_DkdvM9H5Vz1LfXdZ6N3R-FT6Ap6A_olV80CkH5jQMh2X5JXMSMgG0DDqvE9sW2Kng/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/AVvXsEimrVEH7pAwQly2UubTRO_vhHkWebW-ItSmdJMCmrQiuP9GkJPbiGEfutE1Q9dCSAz1-uVljme1QDMgwLf3FqS40oG4-o0m-cYNimWKpaxl6ZWF2T3uqyironbKOakMd2rtSiN0FRhhOA/s1600/YouTube.png" />
<div style="float:left;margin:1px 0px 0px 2px;">
<iframe src=http://www.youtube.com/subscribe_widget?p=Youtube Channel Name/id 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=Feed ID', '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="Youruserid" 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/AVvXsEhOlKigJe2-E6270OU3U32kiKm4FfMr_41HF6DUVSLwMB_O-mXcwRY8ed6-xW1JknDQwFCqH5Si44U3X_0z7GL_WgAYbMkX9RK7pCv5hX11dGRHTJw-_J8hYrhfAztUyGqmMk2HYfp3Ig/s1600/Subscribe.png" />
</div>
</div>
</div>

Note:Don't forget to input your userid to the fields highlighted on the code above

Once you input this in "add a gadget" you are done.You will now see these amazing sliders on your blog.

Below is a video tutorial in case you are still a little confused of how to do this