Facebook, Twitter, Google Plus, Subscribe E-Mail J-Query PoP Out Widgets For Your Blog & Website

Here Is The Screen Shoot And Demo Is Right Here --->

PART 1 :
CSS Code:
Go To Blogger >> Template >> Edit Html
Search For The Code ]]></b:skin>
Add Below CSS Code 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;}





PART 2 :
J-Query Code:
Go To Blogger >> Template >> Edit Html
Search for the code </head>
Add below jquery code above 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); }); });
</script>



PART 3 :
HTML Code:
Go To Blogger->>Layout >>Add HTML-CSS-JAVASCRIPT Gadget
Add Below HTML Code In It:


<div id="on">
<div id="facebook_right" style="top: 18%;">
<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: 35%;">
<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: '#FFFFFF'
},
tweets: {
background: '#FFFFFF',
color: '#000000',
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: 52%;">
<div id="google_plus_div">
<img id="google_plus_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjV7kx0Sl1Xi_sodzfZVDLYOWN5hLLktF1L4UyrZ0SYB30HNe7qqz9T52yhiSqV62DQoRMPhyphenhyphenzxYqet-7WrRT2R7v3D5XUyFtRXWkrXBZf-H0gHMMroRigLF5lQLoEJaVpM0SekUI3xHg/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: 69%;">
<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=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>

Done, Now Change Red Text To Your Desire One.

Widget UpDated