irst If you are new here then kindly read my previous versions first so that you may have a clear idea on how this widget works and how can you customize it. Kindly have a look at them:
And now I’m Back here With 4 In 1 Social Share sliding pop out widget Using jQuery ,
and it's not only for facebook like box , but here you will also see your twitter widget sliding same like facebook like box , similarly for the google +1and Subscribe Popup form ,this look much useful and cute on it slide on your blog , live at a side of your blog when some one over his/her mouse over it , it pop up with a cute sliding effect , the Jquery effect ,
so ...let see how to get this.
<link rel="stylesheet" href="https://gj37765.googlecode.com/svn/trunk/[www.gj37765.blogspot.com]multipopoutwidget.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://apis.google.com/js/plusone.js"></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: -154}, 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>
<div id="on">
<div id="facebook_right" style="top: 18%;">
<div id="facebook_div">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj26fdlmmL4UmkPTFZZK_Ac-O-m4KceC_SF_Wfp-d0arriKP3lwOu21gCFb2gj0xE66-idtgsmmHZ5N4Yb-KRaCtZrVOFAnnqoHY7MzY33AhxDP_7FMUZkjJwIsV9t4CYePOhVu_bry0AxA/s1600/%255Bwww.gj37765.blogspot.com%255Dfacebook_right.png" alt="" />
<iframe src="http://www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Ffacebook.com%2F
makingdifferent&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: 35%;">
<div id="twitter_div">
<img id="twitter_right_img" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgW8Jd0W8G2rbVsOp0McgdwwXEPc-H7P7glYO4-koEq_fNaUj32ICWA1nLaR2xFkbkCsCv4pp9GLegTt34bT65ZlSqHTaBx0iLK9wp7WaL_J6Iinu1n-qNtnaog1qBORGTuUHFM_AYSJFXk/s1600/%255Bwww.gj37765.blogspot.com%255Dtwitter_right.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('
nitinmaheta').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/AVvXsEicTeWqNKb05vIxuJRdQb1SF6uXvd1Biqu0Jx68mslCfwpWDxDPC6deFBw7RQixx7S0vJPS1_3T11uR0K8J1k3TjhDs_2bgUsX0-0kYELnjI_zQwJPil3kWLVoOagvzEH1KUIIk4Ydk99YS/s1600/%255Bwww.gj37765.blogspot.com%255Dgoogle_plus_right.png">
<div style="float:left;margin:10px 10px 10px 0;"><g:plusone size="tall" expr:href="data:post.url"></g:plusone></div>
</div>
</div>
<div id="on">
<div id="feedburner_right" style=" top: 69%;">
<div id="knfeedburner_div">
<center>
<h4 style="color:#F66303;">You can also receive Free Email 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=
MakingDiffrent', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="
MakingDiffrent" 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/AVvXsEhRTQDmMvArrzJknDjTs2Bv3U3VfsI4FuORlzn9NISJKsUKYMbqWcBVrkIiqBww6x_ipJ0jCUMP_cJHeFiOJlYCjdKFq553WnW00cbOjPDZ9he0OHRUk3mB7GyVN4z19Lh9IB9IcdyxNTFy/s1600/%255Bwww.gj37765.blogspot.com%255Dfeedburner_right.png">
</div>
</div>
</div>
Digg It!
Stumble
Delicious
Technorati
Tweet It!
Facebook
