5 Big Social Network J-Query Slide Out Widget For Your Blog & Website

You Have seen different Types of Like Boxes on Different Blogs, where whenever you Enter a Pop up Appears and ask you to like the Blog's Official page. Sometimes It also irritates visitors because of repeated appearance.So we have three different Pop up Like Boxes which appears on hover on littel image that are at right sidebar on you blog.

One of the best ways to increase your Social fans is to add the Jquery Pop-up Social Box to your Blog. Once this widget is installed on your blog, your visitors will be shown a slide out box with the option to like your Facebook Page, or want to follow on Twitter, or want to add you in there circle, want to subscribe your feedburner email whenever they visit your blog. Advantages this widget is to free space on the page. Because if you add all of these widget on your site/blog, it will take a huge space that will make your visito angry, it can prevent website normal as the box. Static widget as soft box with jQuery effect of activation for the blogger, this is another cool control. Here I have added as the box with simple jQuery hover effect. See the screen shoot on the above image that are sliding out on hovering on there images.

This widget slide out a jQuery window containing Social widgets box as soon as a visitor hover on it. This plugin can be added to both Blogger Blogs and Wordpress and also HTML website. This slide our appears only once to hove and get back on mouse out. It will appear on homepage and sub pages depending which page the visitor is accessing.

Lets get straight to the one step installation process.Grab the Code for this Widget code and Follow the Given Instruction.It is Really easy to Implement just keep in mind to backup your Template before Editing it.

Features:

1. J-Query/JavaScript Widget.
2. Slide-Out On Hover.
3. Awesome And Stylish.
4. Facebook Like Box Included.
5. Twitter Followers Box Included.
6. YouTube Subscribe Box Included.
7. Google Plus Add To Circle Widget Included.
8. FeedBurner RSS Subscribe Through E-Mail Widget Included.
9. Sliding Effect Enabled.
10. Slide Out On Hove And Get Back On Mouse Out.

How To Add In Blogspot?

1. Go To Your www.blogger.com
2. Open Your Desire Blog.
3. Go To "Template".
4. Click "CTRL+F" And Search For ]]></b:skin>
5. Now Copy The CSS Code And Paste Before It.
6. Again Click "CTRL+F" And Search For </head>
7. Now Copy The JQuery/JavaScript Code And Paste Before It.
8. Now Go To "Layout".
9. Click "Add A Gadget" .
10. Now Scroll To "HTML-JAVASCRIPT"
11. Click "+" Icon To Add It.
12. Now Copy The HTML Code And Paste It To There.
13. Leave The Title Empty.
14. Click Save, Now You Are Done.

CSS Code:

#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;}

J-Query/JavaScript Code:

<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>

HTML Code:

<div id="on">
<div id="facebook_right"style="top:8%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg37Hv-expjKivoqo9NPyLcqtanZS6PqX3nz80-wUQRQRw0FaiwoIc2QQwfe-08o3nWN5GnI_HkHIsm0hVqI4yX3IXMLG4Xh71VmrZ1wpsm5rRMAvWk23M7YBsgclnfNAYaWJV3pUxN8g/s1600/Facebook.png"alt=""/>
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2FEXEIdeas2010&amp; locale=en_GB&amp; width=200&amp; connections=9&amp; stream=&amp; header=false&amp; show_faces=0&amp; 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/AVvXsEi6gjS2XI2HelzVIph16vqDiMDVikFtA0o9fGt3ikJRpOhSnQlI8_fZAo4jT2JqKDM6L4_eTH3qw7Js9jmnwRqGMX1IQdKIFRoEY4_L4HMWtlo-wpuJEtwTaI9UYiJTtHra0fwMusk4pQ/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('EXEIdeas').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="http://2.bp.blogspot.com/-92QhBqQOpz8/Tyywzk8GzmI/AAAAAAAABMw/
hxB7RBjWk68/s1600/Google+Plus.png"/>
<div style="float:left; margin:1px 0px 0px 2px;">
<iframe src="http://www.google.com/s2/u/0/widgets/ProfileCard?uid=YourGoogleProfileIDHere" width="100%" height="125″ scrolling="no" style="border:0px solid"/>
</div>
</div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style="top:59%;">
<div id="knfeedburner_div">
<center>
<br />
&#9660; &#9660; &#9660; &#9660; &#9660; &#9660; &#9660; &#9660; &#9660; &#9660; &#9660; &#9660; <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=EXEIdeas', '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="EXEIdeas" 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/AVvXsEgk-6hTCQX-JGspXxy94D39yHmVsES8aHgYvalJ4MTUc8eaxnASpNoTzSzYZ241oVDoPWOqe1jtfw-HSCSrJVx8KAp-V2iDJvtjUMEJqzAK41oDJnkUTFt-32kptZjgk6AV4fCnghh_Ew/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/AVvXsEgjTm2d8HzqfaoVvjyKVAgPvClmjCwwMBZupHnBPkLPjnv_duGRYqCRwh6qZY4el21nZq636VAwAtiVEh2KEhAdTe5vfOTZPgfEXeLWq_92Ns6oPuRt19BaIyW_mnUaFpzTExVsqP95kg/s1600/YouTube.png "/>
<div style="float:left; margin:1px 0px 0px 2px;">
<iframe src=http://www.youtube.com/subscribe_widget?p=EXEIdeas style="height:105px; width:300px; border:0;" scrolling="no" frameBorder="0">
</iframe>
</div>
</div>
</div>
</div>

Customization:

1. Change EXEIdeas2010 With Your Facebook FanPage Name.
2. Change EXEIdeas With Your Twitter UserName.
3. Change 102256859586166648016 With Your Google Plus ID Code.
4. Change Both EXEIdeas With Your Feed Burner URL Name.
5. Change EXEIdeas With Your YouTube User Name.
6. Save And Done.