How To Add jQuery Facebook Popup Like Box/Floating/ Pop up like box.

1. Go to Blogger Dashboard > Template
2. Download a copy of your template Before beginning.
3. Click on Edit HTML> Proceed
4. Now find below code in your template





5. Copy the below code and paste it Just above the < /body > tag.



You don’t need to go through the template html, just add a gadget and paste the code.
[Update: Go to Layout> Add a Gadget> Html/JavaScript> Paste the code]

<!—www.awesome-bd.blogspot.com Pop up Facebook Likebox Code Start --> <style>#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 6*/width:450px;border:10px solid #6F6F6F;z-index:200;-moz-border-radius: 9px;-webkit-border-radius: 9px;margin:0pt;padding:0pt;color:#333333;text-align:left;font-family:arial,sans-serif;font-size:13px;}#fblikepop body{background:#fff none repeat scroll 0%;line-height:1;margin:0pt;height:100%;}.fbflush{cursor: pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;}#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 6*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;}#fblikepop #closeable{float:right;margin:7px 15px 0 0;}#fblikepop h1{background:#6D84B4 none repeat scroll 0 0;border-top:1px solid #3B5998;border-left:1px solid #3B5998;border-right:1px solid #3B5998;color:#FFFFFF !important;font-size:14px !important;font-weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;}#fblikepop #actionHolder{height:30px;overflow:hidden;}#fblikepop #buttonArea{background:#F2F2F2;border-top:1px solid #CCCCCC;padding:10px;min-height:50px;}#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;}#fblikepop #buttonArea a:hover{color:#333 !important;text-decoration:none !important;border:0 !important;}#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#fff !important;}#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;}</style> <script src="http://www.google.com/jsapi"></script><script>google.load("jquery", "1");</script> <script type="text/javascript" src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script> <script type="text/javascript"> //<![CDATA[                 kakinetworkdotcom01username="awesome-bd", kakinetworkdotcom01title="Join us at Facebook!", kakinetworkdotcom01skin="01", kakinetworkdotcom01time="60", kakinetworkdotcom01wait="0", kakinetworkdotcom01lang="en" //]]> </script> <script type="text/javascript" src="https://dl.dropbox.com/u/70534161/likeboxfbfan____ByShemul.js"></script> <script type="text/javascript"> //<![CDATA[                 $(document).ready(function(){$().kakinetworkdotcom({ closeable: true });}); //]]> </script> <!—www.awesome-bd.blogspot.com Pop up Facebook Likebox Code End -->

How To Customize Facebook Popup Like Box:

1. Replace username “awesome-bd”  with your Facebook fan page user name.
2. Change the Title of the page title=”Join us at Facebook!”.
3.Change the skin skin=”01″,  With change 01 with 01,02,03 or 04.
4. Change the time The pop up will disappear after that time=”60″
5. To remove the cross button find this code closeable: true and change it to false.

See here some demo of Skin foe Facebook pop up likebox:

How To Add jQuery Facebook Popup Like Box For Blogger

If you enjoyed it Please take some seconds to share it with your friends.
Any problems ! Feel free to comment.