To install pop out Facebook Like Box
See DEMO http://newitechworlds.blogspot.com/
1. Go to your blogger Layout page
2. Add new Gadget
3. Select HTML/JavaScript
Copy Past Below code and save.
Note: Change Red Colored text with your facebook fan page iframe.
How to get iframe code?
1. Open http://developers.facebook.com/docs/plugins/
2. Chose like box.
3. Insert facebook page url.
4. Set width="200" height="290"
5. Remove Mark from Show Stream and Show Header.
6. Click on Get code.
7. You find four option HTML5,XFBML,IFRAME and URL.
8. Choose IFRAME.
9. Copy code and past at the Red Marked Text.
Now You find pop out like box on your page.
<!-- Static Facebook Pop Out Like Box Widget For Blogger @ http://newitechworlds.blogspot.com/-->
<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;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;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.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("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("facebook").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/AVvXsEj4l4RwRhsFzelGuwLHcM29hYvlq5rRCoh9LahrKJNFi4oPuQ6Nlgp4X8zLJ_pt2Fnzr907HEFmxPxURHn-_ATAqV-R0oo4-MJ3SNoDaLGZ7eQ_xulCbZZnckPm_pyK50wTHFNF-79cOEA/s1600/facebook-icon.png" alt="" /><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnewitechworlds&width=200&height=290&show_faces=true&colorscheme=light&stream=false&border_color&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:290px;" allowtransparency="true"></iframe>
<br><a href="http://widgetsites.blogspot.com/2012/12/static-facebook-pop-out-like-box-widget.html/">Get This</a></div></div></div>
<!-- Static Facebook Pop Out Like Box Widget For Blogger @ http://http://widgetsites.blogspot.com/-->
See DEMO http://newitechworlds.blogspot.com/
1. Go to your blogger Layout page
2. Add new Gadget
3. Select HTML/JavaScript
Copy Past Below code and save.
Note: Change Red Colored text with your facebook fan page iframe.
How to get iframe code?
1. Open http://developers.facebook.com/docs/plugins/
2. Chose like box.
3. Insert facebook page url.
4. Set width="200" height="290"
5. Remove Mark from Show Stream and Show Header.
6. Click on Get code.
7. You find four option HTML5,XFBML,IFRAME and URL.
8. Choose IFRAME.
9. Copy code and past at the Red Marked Text.
Now You find pop out like box on your page.
<!-- Static Facebook Pop Out Like Box Widget For Blogger @ http://newitechworlds.blogspot.com/-->
<style>img,a{border:0;}#on{visibility:visible;}#off{visibility:hidden;}#facebook_div{width:196px;height:353px;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;}#facebook_left{z-index:10005;border:2px solid #3c95d9;background-color:#fff;width:196px;height:353px;position:fixed;left:-200px;}#facebook_left img{position:absolute;top:-2px;right:-35px;}#facebook_left iframe{border:0px solid #3c95d9;overflow:hidden;position:static;height:360px;right:-2px;top:-3px;}</style><script type="text/javascript" src="http://widcraft.googlecode.com/svn/jquery.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("facebook").hover(function(){ jQuery(this).stop(true,false).animate({right: 0}, 500); },function(){ jQuery("facebook").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/AVvXsEj4l4RwRhsFzelGuwLHcM29hYvlq5rRCoh9LahrKJNFi4oPuQ6Nlgp4X8zLJ_pt2Fnzr907HEFmxPxURHn-_ATAqV-R0oo4-MJ3SNoDaLGZ7eQ_xulCbZZnckPm_pyK50wTHFNF-79cOEA/s1600/facebook-icon.png" alt="" /><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnewitechworlds&width=200&height=290&show_faces=true&colorscheme=light&stream=false&border_color&header=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:200px; height:290px;" allowtransparency="true"></iframe>
<br><a href="http://widgetsites.blogspot.com/2012/12/static-facebook-pop-out-like-box-widget.html/">Get This</a></div></div></div>
<!-- Static Facebook Pop Out Like Box Widget For Blogger @ http://http://widgetsites.blogspot.com/-->
