PopUp Facebook Like Box with Mr-Bean

English French German Spain Italian Dutch Russian Portuguese Japanese Korean Arabic Chinese Simplified
 Follow the steps below to install it to your page:
  • Login to Blogger 
  • Layout / Add gadget 
  • Select HTML / JavaScript 
  • Paste the following code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://bloggertipsandtricks.googlecode.com/svn/trunk/color-box.js"></script> 
<style>
#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%; height: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:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLOEXVtJbCxpon0JZlh71vQpjLmecjB92chTv-DqG6gg_CCSUbwjscO14-tobBM91p7a3IBMZ7ukdHb5N6j5qN8OwcUIbY6clBsiLfR7KYXizWx5ojwDfnaqPOm6lpkN-2EyhAgI1ikmij/s1600/overlay.png) repeat 0 0;}
#colorbox{}
    #cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFu9nhG8wkyBTy-jWmCpKaiuVaFljEo0D6kMHSB7UviXwgkFA0745QZG0LANP2VCYcEz8atxM0HKw67F395K6yMcJZHwycYRSToQCsC0bv7q6BDfUMbjIEM1MFE-vn4uFnysq2OgYHmGs/s1600/controls.png) no-repeat -101px 0;}
    #cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFu9nhG8wkyBTy-jWmCpKaiuVaFljEo0D6kMHSB7UviXwgkFA0745QZG0LANP2VCYcEz8atxM0HKw67F395K6yMcJZHwycYRSToQCsC0bv7q6BDfUMbjIEM1MFE-vn4uFnysq2OgYHmGs/s1600/controls.png) no-repeat -130px 0;}
    #cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFu9nhG8wkyBTy-jWmCpKaiuVaFljEo0D6kMHSB7UviXwgkFA0745QZG0LANP2VCYcEz8atxM0HKw67F395K6yMcJZHwycYRSToQCsC0bv7q6BDfUMbjIEM1MFE-vn4uFnysq2OgYHmGs/s1600/controls.png) no-repeat -101px -29px;}
    #cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFu9nhG8wkyBTy-jWmCpKaiuVaFljEo0D6kMHSB7UviXwgkFA0745QZG0LANP2VCYcEz8atxM0HKw67F395K6yMcJZHwycYRSToQCsC0bv7q6BDfUMbjIEM1MFE-vn4uFnysq2OgYHmGs/s1600/controls.png) no-repeat -130px -29px;}
    #cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFu9nhG8wkyBTy-jWmCpKaiuVaFljEo0D6kMHSB7UviXwgkFA0745QZG0LANP2VCYcEz8atxM0HKw67F395K6yMcJZHwycYRSToQCsC0bv7q6BDfUMbjIEM1MFE-vn4uFnysq2OgYHmGs/s1600/controls.png) left top repeat-y;}
    #cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFu9nhG8wkyBTy-jWmCpKaiuVaFljEo0D6kMHSB7UviXwgkFA0745QZG0LANP2VCYcEz8atxM0HKw67F395K6yMcJZHwycYRSToQCsC0bv7q6BDfUMbjIEM1MFE-vn4uFnysq2OgYHmGs/s1600/controls.png) right top repeat-y;}
    #cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-_A6I9cAU9GJkUjBmxmEatCJ-xxG_iYY8uoyPnrDGOJAEjW5-2ungZbfK0Bj5nAPwQTPJH03_58ox3Py_MzlgDFBx3s3g-mI0qwVF3SJmhdyBpDR0AC8YraPf3zS_-UOtOE5vSppYezlu/s1600/border.png) 0 0 repeat-x;}
    #cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-_A6I9cAU9GJkUjBmxmEatCJ-xxG_iYY8uoyPnrDGOJAEjW5-2ungZbfK0Bj5nAPwQTPJH03_58ox3Py_MzlgDFBx3s3g-mI0qwVF3SJmhdyBpDR0AC8YraPf3zS_-UOtOE5vSppYezlu/s1600/border.png) 0 -29px repeat-x;}
    #cboxContent{background:#fff; overflow:hidden;}
        .cboxIframe{background:#fff;}
        #cboxError{padding:50px; border:1px solid #ccc;}
        #cboxLoadedContent{margin-bottom:28px;}
        #cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
        #cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
        #cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
        #cboxPrevious{position:absolute; bottom:0; left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFu9nhG8wkyBTy-jWmCpKaiuVaFljEo0D6kMHSB7UviXwgkFA0745QZG0LANP2VCYcEz8atxM0HKw67F395K6yMcJZHwycYRSToQCsC0bv7q6BDfUMbjIEM1MFE-vn4uFnysq2OgYHmGs/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxPrevious:hover{background-position:-75px -25px;}
        #cboxNext{position:absolute; bottom:0; left:27px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFu9nhG8wkyBTy-jWmCpKaiuVaFljEo0D6kMHSB7UviXwgkFA0745QZG0LANP2VCYcEz8atxM0HKw67F395K6yMcJZHwycYRSToQCsC0bv7q6BDfUMbjIEM1MFE-vn4uFnysq2OgYHmGs/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxNext:hover{background-position:-50px -25px;}
        #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR1qVJSsrJiGqpOjN0v6xNenqHy8hf8eQBU9i9zEj_68E4fBGRItP6v4jygTH95BmhwSpsMpCzc-vusC5vpCD_NGoXANDLCE0bAYJYQFeAMiA0kwlYZN79DpgcUVfowgbs2xor348AfTg0/h120/loading.gif) no-repeat center center;}
        #cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjR1qVJSsrJiGqpOjN0v6xNenqHy8hf8eQBU9i9zEj_68E4fBGRItP6v4jygTH95BmhwSpsMpCzc-vusC5vpCD_NGoXANDLCE0bAYJYQFeAMiA0kwlYZN79DpgcUVfowgbs2xor348AfTg0/h120/loading.gif) no-repeat center center;}
        #cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhiFu9nhG8wkyBTy-jWmCpKaiuVaFljEo0D6kMHSB7UviXwgkFA0745QZG0LANP2VCYcEz8atxM0HKw67F395K6yMcJZHwycYRSToQCsC0bv7q6BDfUMbjIEM1MFE-vn4uFnysq2OgYHmGs/s1600/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
        #cboxClose:hover{background-position:-25px -25px;}
 
 
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}
 
.cboxIE6 #cboxTopLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLFy8Vpq8GZG_iU-Y66Pus5f_uk0F40VRAMV8si4-iYh_PZPjRRWZnDVhNPzwnOaIFaDsGwAUrRmiWjXgx7daFGMs2M9jvzSmXqGZNATe33cDmpO0ZT9nV35Jqzu0eekJZZaSfWD7N8RCc/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2GipnF-H7sfQKMLoltQHEtLIpgEiaLD-UYQ9G-Hi-ea5koTjVdauug0YqYXBLEy8xixfU45q-ufgAhxQmo9JzoFZZQqfpDnxuC5cd-MjeWwutiqx3YDNDzpjvlyQkITyZX8rATrXj4M1c/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuN0Ir_uzICn0RPo_Z-hgX_uIuqaVzsXExhRm4RNVTt7pslaJYCYXyC1I_yCJbJzkjYNZbibl6GXXh2VsqDePrRDywRgNOdSIg6FKIGfxlI1f0O5dAds-usNtqdKw-6tTxwjdsq9_4_6YP/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiuN0Ir_uzICn0RPo_Z-hgX_uIuqaVzsXExhRm4RNVTt7pslaJYCYXyC1I_yCJbJzkjYNZbibl6GXXh2VsqDePrRDywRgNOdSIg6FKIGfxlI1f0O5dAds-usNtqdKw-6tTxwjdsq9_4_6YP/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgfJRb5JfQohXkGMWPxN0ngy3xzvA15ste0gXEHHevUuBS4I7rl2bZYj4KeMceLwGdhkKTu2L9nG9aHZXDJcXZ4SBnTbyN3Z7vojDDFdXUyOfFqV0DX4A18kTTcX5H20RF8362SsXP0Tr-d/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgSskjRruj1sgeFcRbYjcxDcHd-0EKDZ9QoA1em1EL7iTwmc4rvIVi2CfJlioklT7jDTYxy4G9zdEch-pRKnwIbVdGAS2mGxqm7QrfXavlDdJzWdYoFddPAQ4Coc0_CAZf1IiNONgKCvtd/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhnLfAdeZWHf6Cq9miR8JGI0YJWIXISuDVkpsLO7OOHITx8FrvEYffKPFeFJZSYvpmtDokZjGgaEozj34V65KQmsFrx3yPRSLPabmK6AZ5DFqUihI83sDS46h2KtbhdbkGTYCvakSMjjim/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJJitqmZGwMeQjjtd-QPc52mCgy3ogL_7PFMrdZ3lwBkv4evupfw1MswrGi-hwLCCWABHL09E4vEzDk7GnKTqKu5qSCkm6ZPzwxFUkHW5Va3B7QrmJ-3x78B-_bELMj_nTtdHpDn8eCurT/s1600/borderMiddleRight.png);}
 
.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
    _behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}
 
 
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}
 
.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script type="text/javascript"> 
jQuery(document).ready(function(){ 
   if (document.cookie.indexOf('visited=false') == -1) { 
       var fifteenDays = 1000*60*60*24*30; 
       var expires = new Date((new Date()).valueOf() + fifteenDays); 
       document.cookie = "visited=true;expires=" + expires.toUTCString(); 
   $.colorbox({width:"600px", inline:true, href:"#btt"}); 
       } 
}); 
</script> <div style='display:none'><div id='btt' style='padding:10px; background:#fff;'><center><table align="center"background="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhR2kUdN5xBeqG9x2fT01GiJlmdge1tuJGCxmf2LTdEbcN6H4kfmMp4Y9J0aBXl_ztUtKDPRRTOhCMaBLUY1M2OJrk6C4ahAIUH4YDIX0GUtUknegWx4qAnB0M3_Oq7WvdMvmiqSHIbVJ7a/s1600/popup_fb2.jpg" border="0" height="300" style="width: 512px;"><tbody><tr><td height="342" width="513"><div align="right">
 
<iframe src="//www.facebook.com/plugins/likebox.php?href=YOUR LINK TO PAGE ON FACEBOOK &amp;width=320&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=255" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:320px; height:255px;" allowtransparency="true"></iframe></div></td></tr></tbody></table></center><p style=" float:right;  margin-right:35px;  font-size:6px;" >Powered By <a style=" font-size:6px; color:#3B78CD; text-decoration:none;" href="http://courses4.blogspot.com/2012/12/popup-facebook-like-box-with-mr-bean.html" target='_blank'>BloggerZine</a></p></div></div>

  • Replace YOUR LINK TO PAGE ON FACEBOOK with your own and click save.
Live Demo

1 comment:

  1. UnknownDecember 24, 2012 at 6:01 AM

    nice but did not work in http://unlock4modem.blogspot.com

    ReplyDelete

Subscribe to: Post Comments (Atom)