How to add Facebook POPUP Like Box in Blogger (Updated)

How to install in blogger platform:

1. Go to- Blogger.com and Login your Account
2. Open Your Blog where you Get This Widget.
3. Go to under the Option Layout
    & Click to +Add a Gadget Option
4. Now Scroll To "HTML-JAVASCRIPT"
5. Click "+" Icon To Add It
6. Now Copy The Below Code And Paste It To There.
7. Leave The Title Empty.
8. Click Save, Now You Are Done.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script> <script src="http://24blogger-com.googlecode.com/files/jquery.colorbox-min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){ if (document.cookie.indexOf('visited=true') == -1) { var fifteenDays = 1000*60*60*24*7; var expires = new Date((new Date()).valueOf() + fifteenDays); document.cookie = "visited=true;expires=" + expires.toUTCString(); $.colorbox({width:"400px", inline:true, href:"#exestylepopups"}); } }); </script> <style type="text/css"> /* ColorBox v1.3.16 (Copyright (c) 2011 Jack Moore - jack@colorpowered.com) */ #colorbox,#cboxOverlay,#cboxWrapper{position:absolute;top:0;left:0;z-index:9999;overflow:hidden}#cboxOverlay{position:fixed;width:100%;height:100%}#cboxMiddleLeft,#cboxBottomLeft{clear:left}#cboxContent{position:relative}#cboxLoadedContent{overflow:auto}#cboxTitle{margin:0}#cboxLoadingOverlay,#cboxLoadingGraphic{position:absolute;top:0;left:0;width:100%}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{cursor:pointer}.cboxPhoto{float:left;margin:auto;border:0;display:block}.cboxIframe{width:100%;height:100%;display:block;border:0}#cboxOverlay{background:#000;opacity:0.5 !important}#colorbox{box-shadow:0 0 15px rgba(0,0,0,0.4);-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4)}#cboxTopLeft{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfa8VTn8FMCNnFiVem7Vp2wEWlmVqkxgn3Twk6P_jD64XRAmiDM9OrvwzxsjkO25uGb9MthQNjsJ437GZWIJyUat2k7CuCj9YaXHVmlWYzHk1HrOsmmwLx6RC5sl8Ia7bY2xN2w7-ZuM/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVhs1BMzzg2NXFj_0YnMXWUiCQ9pTmia4Bk0cP9BCKpt2vh79tpe8Uxj0a6NdH3t-hu4wtxpr6RtaGGqaYDUaMFmIUIDacf3I-AsxGpQRo0rRSvkIK_BASCAZWAWFCvn-_oA_B5qsnqqA/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfa8VTn8FMCNnFiVem7Vp2wEWlmVqkxgn3Twk6P_jD64XRAmiDM9OrvwzxsjkO25uGb9MthQNjsJ437GZWIJyUat2k7CuCj9YaXHVmlWYzHk1HrOsmmwLx6RC5sl8Ia7bY2xN2w7-ZuM/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfa8VTn8FMCNnFiVem7Vp2wEWlmVqkxgn3Twk6P_jD64XRAmiDM9OrvwzxsjkO25uGb9MthQNjsJ437GZWIJyUat2k7CuCj9YaXHVmlWYzHk1HrOsmmwLx6RC5sl8Ia7bY2xN2w7-ZuM/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgVhs1BMzzg2NXFj_0YnMXWUiCQ9pTmia4Bk0cP9BCKpt2vh79tpe8Uxj0a6NdH3t-hu4wtxpr6RtaGGqaYDUaMFmIUIDacf3I-AsxGpQRo0rRSvkIK_BASCAZWAWFCvn-_oA_B5qsnqqA/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfa8VTn8FMCNnFiVem7Vp2wEWlmVqkxgn3Twk6P_jD64XRAmiDM9OrvwzxsjkO25uGb9MthQNjsJ437GZWIJyUat2k7CuCj9YaXHVmlWYzHk1HrOsmmwLx6RC5sl8Ia7bY2xN2w7-ZuM/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfa8VTn8FMCNnFiVem7Vp2wEWlmVqkxgn3Twk6P_jD64XRAmiDM9OrvwzxsjkO25uGb9MthQNjsJ437GZWIJyUat2k7CuCj9YaXHVmlWYzHk1HrOsmmwLx6RC5sl8Ia7bY2xN2w7-ZuM/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfa8VTn8FMCNnFiVem7Vp2wEWlmVqkxgn3Twk6P_jD64XRAmiDM9OrvwzxsjkO25uGb9MthQNjsJ437GZWIJyUat2k7CuCj9YaXHVmlWYzHk1HrOsmmwLx6RC5sl8Ia7bY2xN2w7-ZuM/s1600/controls.png) repeat-y -211px 0}#cboxContent{background:#fff;overflow:visible}#cboxLoadedContent{margin-bottom:5px}#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1i4V7XzlitcKsijR6M0JV54tsl9Ej-2LXIqBXhhn0ya-b9g-krneQ_onRXGd5PA91CSIB8aiQJxtEzA6VxJFoKEFKp4fXjVqGpc_Ul-9qB77xeR3tfSuqcx3bmy7m1ljyh7U7wEHrL6Y/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh3Jfb9SSnc0QfXPsBudrF7StsWN9jJZ6r9Mcz8SKFFJsEudUlx4i68IuFqVZVVVXTjoU7mmSV0ZPY8YEWtETyY3wGLnuCxMNOsE-VKeLjvL3M_byaqmRnncBIB9MFtfifPuZDp6wO0LNM/s400/loading.gif) no-repeat center center}#cboxTitle{position:absolute;bottom:-25px;left:0;text-align:center;width:100%;font-weight:bold;color:#7C7C7C}#cboxCurrent{position:absolute;bottom:-25px;left:58px;font-weight:bold;color:#7C7C7C}#cboxPrevious,#cboxNext,#cboxClose,#cboxSlideshow{position:absolute;bottom:-29px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgWfa8VTn8FMCNnFiVem7Vp2wEWlmVqkxgn3Twk6P_jD64XRAmiDM9OrvwzxsjkO25uGb9MthQNjsJ437GZWIJyUat2k7CuCj9YaXHVmlWYzHk1HrOsmmwLx6RC5sl8Ia7bY2xN2w7-ZuM/s1600/controls.png) no-repeat 0px 0px;width:23px;height:23px;text-indent:-9999px}#cboxPrevious{left:0px;background-position:-51px -25px}#cboxPrevious.hover{background-position:-51px 0px}#cboxNext{left:27px;background-position:-75px -25px}#cboxNext.hover{background-position:-75px 0px}#cboxClose{right:0;background-position:-100px -25px}#cboxClose.hover{background-position:-100px 0px}.cboxSlideshow_on #cboxSlideshow{background-position:-125px 0px;right:27px}.cboxSlideshow_on #cboxSlideshow.hover{background-position:-150px 0px}.cboxSlideshow_off #cboxSlideshow{background-position:-150px -25px;right:27px}.cboxSlideshow_off #cboxSlideshow.hover{background-position:-125px 0px}#mdfb{font:12px/1.2 Arial,Helvetica,san-serif;color:#666}#mdfb a,#mdfb a:hover,#mdfb a:visited{text-decoration:none}.mdbox-title{background:#000;color:#fff;font-size:20px !important;font-weight:bold;margin:10px 0;border:20px solid #ddd;-moz-border-radius:6px;-webkit-border-radius:6px;border-radius:6px;box-shadow:5px 5px 5px #CCC;padding:10px;line-height:25px;font-family:arial !important} </style> <div style='display:none'> <div id='exestylepopups' style='padding:10px; background:#fff;'> <center> <h3 class="mdbox-title"> Receive all updates via Facebook. Just Click the Like Button Below...</h3> </center> <center> <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fnewtricksandhacks&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe> </center> <p style=" float:right; margin-right:35px; font-size:9px;" > Get this <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://newtricksandhacks.blogspot.in/2013/09/how-to-add-facebook-popup-like-box-in.html" rel="Dofollow" >Here</a></p> </div> </div>


Customization:


1.) Replace newtricksandhacks With Your Facebook Username.
2.) It Will Not POP Up Again And Again On Every Reload Or Every Pages. To Review The Widget Just Delete Your Browser Cookies And Refresh The Page To See It Appearing Again.
3.) If You Want To Appear This Widget On Every Reload Of Your Visitor On Every Page, Just Change true To false
4.) This Widget Will Again POPUP On Your Viewer Desktop After 30 Day If He Is Clearing His Browser Cookies, If You Want To Minimize This Time, Just Change*30 From The Above Code To Your Desire Day With 30.
5.) You Can Also Change The Text In Receive all updates via Facebook. Just Click the Like Button Below....
6.) Save And Done..

Enjoy....

NOTE- Please Don't Edit this Code Other Wise It's stop Working in few days

Facebook POP UP Widget
Reviewed by Tricks & Hacks on 14 Sep 2013
Rating: 5