How to Add Social Media Slide out widget to Your blogger

Friends, Now i share a good social media widget to your blogger. it is a hidden widget. When visitors mouse over on this widget it slide out from side. If we move mouse from this widget, It automatic hide in blogger body. If you want to install in your blogger. Follow this post….

Select Templates

Click on Edit HTML

Tick On Expand Widget Templates.

Find (Ctrl + F) ]]></b:skin>

Copy the code shown below and paste Before/Above it.

#on {visibility:visible;}
#off {visibility:hidden;}
#facebook_div {width:196px;height: 353px;overflow: hidden;}
#twitter_div {width:246px;height: 353px;overflow: hidden;}
#google_plus_div {width:200px;height: 143px;overflow: hidden;}
#knfeedburner_div {width:300px;height: 97px;overflow: hidden;}
#facebook_right {z-index: 10005;border:2px solid #3c95d9;background-color: #fff;width:196px;height: 353px;position: fixed;right: -200px;}
#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:246px;height: 353px;position: fixed;right: -250px;}
#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:200px;height: 143px;position: fixed;right: -203px;}
#google_plus_right_img {position: absolute;top: -2px;left: -33px;border: 0;}
#feedburner_right {z-index: 10002;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;}
#youtube_right {z-index: 10001;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: 106px;position: fixed;right: -303px;}
#youtube_right_img {position: absolute;top: -2px;left: -33px;border: 0;}

Again Find (CTRL+F) </head> tag.

Now Copy below code and paste before It.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'></script>
<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: -200}, 500); });
jQuery("#twitter_right").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },
function(){ jQuery("#twitter_right").stop(true,false).animate({right: -250}, 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: -203}, 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); });
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); });
});
</script>

Save Templates.

Then go to Layout

Now Click On Add Gadget Button.

Select HTML/Javascript option from given list.

Copy below code and paste it .

<div id="on"><div id="facebook_right"style="top:8%;"><div id="facebook_div"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjYhe7m42DAFJmP39In6SxRLCPuoCXy0KOys59nDLcTRPPLL7M8LOk7JFnn8gaq-xnS7RUT55Cqhv3Z1UO4P-4h8fMugA7RkYq4T0sMjuxkBi9L0a9ad3lwiOdL7KXB_EopJfifYHdEyw/s1600/Facebook.png"alt=""/><iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FYOUR-FACEBOOK-FANPAGE-LINK-HERE&locale=en_GB&width=200&connections=9&stream=&header=false&show_faces=0&height=356"scrolling="no"></iframe></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/AVvXsEjZLX25kCYW5Y0i_LwmZrVwCeHZa6Sxl2Q-5z77NU1khcrhb-RNMFO9Um4xEubfxkFeo6vPr1v7RZlGsalVm7q_MR69dPpHpmmt6UgIKnenqmocvPTAdfmIDx1n1AKJ1wYpy0dhBoUsBw/s1600/Twitter.png"/><script src="http://widgets.twimg.com/j/2/widget.js"></script><script>new TWTR.Widget({version:2,type:'profile',rpp:4,interval:1000,width:246,height:265,theme:{shell:{background:'#63BEFD',color:'#FFF'},tweets:{background:'#FFF',color:'#000',links:'#47a61e'}},features:{loop:false,live:true,scrollbar:false,hashtags:false,timestamp:true,avatars:true,behavior:'all'}}).render().setUser('YOUR-TWITTER-ID-HERE').start();</script></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/AVvXsEgOFWCWlFHwNW8Lu0kovikEuS2GcsorA7E9-j4lonw1JGAeL_ISIBCTtQJiARBlV7Wvs9nbQ7c7-gYhnW9fdkpSxE4CNrJKaFxAsZ9SYD2IEMXHu0ajtBZbUQc6lwqnmP4x_LXb4e1-jg/s1600/Google+Plus.png"/><div style="float:left;margin:1px 0px 0px 2px;"><script type="text/javascript">mbgc='006ec9';ww='200';mbc='006ec9';bbc='006ec9';bmobc='3b71c6';bbgc='006ec9';bmoc='3F79D5';bfc='FFFFFF';bmofc='ffffff';tlc='ffffff';tc='ffffff';nc='ffffff';bc='ffffff';l='y';t='Add_Me_To';fs='20';fsb='13';bw='3F79D5';ff='4';pc='4889F0';b='0';pid='102256859586166648016';</script><script type="text/javascript"src="http://widgetsplus.com/google_plus_widget.js"></script></div></div></div></div><div id="on"><div id="feedburner_right"style="top:59%;"><div id="knfeedburner_div"><center><br />▼▼▼▼▼▼▼▼▼▼▼▼<h4 style="color:#F66303;">You Can Also Receive 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=YOUR-FEEDBURNER-ID-HERE','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 == ''){this.value = 'Enter Your E-Mail Here...'}"onfocus="if (this.value == 'Enter Your E-Mail Here...'){this.value = ''}"type="text"/><input value="FEEDNAME-HERE"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/AVvXsEiT3aLKofkDbJ3vKmORaYHjvNJbZLaZfBs9YsqRcp-d4K5ku3_wEFXkjLqs5SuCI2BsYH7BbKHPZ6GJwpl7_r1c4Ad-ZFo9ShxzNLMsYYaJW1-Nztdq0sDFpthRB7NkvFObUt_I7jcXgA/s1600/Subscribe.png"/></div></div></div><div id="on"><div id="youtube_right"style="top:76%;"><div id="youtube_div"><img id="youtube_right_img"src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjbbNFq81NGxmUuNEgebiAVGAWWC-0AqLpYqg4Mm-3uweKd6AzFgfR0R_g5ugdREtReHbCmImp58u7m6WQYfKEV-y9oSXm-uNRAsoZF9wAl2d1zbP86gD8mlGI726zpUE8nao1bFR02jg/s1600/YouTube.png "/><div style="float:left;margin:1px 0px 0px 2px;"><iframe src=http://www.youtube.com/subscribe_widget?p=YOUTUBE-ID-HERE ="height:105px;width:300px;border:0;"scrolling="no"frameBorder="0"></iframe>

</div></div></div>

</div>