Today I am share a beautiful automatic Facebook pop up like bo.I previously shared How to add Floating facebook like box in blogger? and
How to Add Pop up like box to blog?
How to Add Pop up like box to blog?
- Go to blogger Layout page
- Add a Gadget >> Select HTML/JavaScript.
- Paste below code inside that HTML/JavaScript.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="http://exeideasinternational.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*30;
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/AVvXsEg0mS31WmehJgxsrUaWWrHrCZyanM5oMNInEKB7U32_Rz26vBTjrjizFlq9hMOk9T_SpCNHF3uirKnFfcqX82HIzo07L7nv3HSYGflLipCgposbjyr05kP7b0pJ-RCtcXCbj9Ctp4_L8Ck/s1600/controls.png) no-repeat 0 0}#cboxTopCenter{height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG5casoi2GhyphenhyphenaFHLprVaOhnRXCwGtjjVaPbxnBfGjCBGgKiwd6hRApnRjLGm1ie_QFtVtee97nWBl5iILwrsev7c8-2VZpHbmoTB58uvd1r1y4Jph0y9eRo1WL5sLSBs-zqq9PaQOKptQ/s400/border.png) repeat-x top left}#cboxTopRight{width:14px;height:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mS31WmehJgxsrUaWWrHrCZyanM5oMNInEKB7U32_Rz26vBTjrjizFlq9hMOk9T_SpCNHF3uirKnFfcqX82HIzo07L7nv3HSYGflLipCgposbjyr05kP7b0pJ-RCtcXCbj9Ctp4_L8Ck/s1600/controls.png) no-repeat -36px 0}#cboxBottomLeft{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mS31WmehJgxsrUaWWrHrCZyanM5oMNInEKB7U32_Rz26vBTjrjizFlq9hMOk9T_SpCNHF3uirKnFfcqX82HIzo07L7nv3HSYGflLipCgposbjyr05kP7b0pJ-RCtcXCbj9Ctp4_L8Ck/s1600/controls.png) no-repeat 0 -32px}#cboxBottomCenter{height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgG5casoi2GhyphenhyphenaFHLprVaOhnRXCwGtjjVaPbxnBfGjCBGgKiwd6hRApnRjLGm1ie_QFtVtee97nWBl5iILwrsev7c8-2VZpHbmoTB58uvd1r1y4Jph0y9eRo1WL5sLSBs-zqq9PaQOKptQ/s400/border.png) repeat-x bottom left}#cboxBottomRight{width:14px;height:43px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mS31WmehJgxsrUaWWrHrCZyanM5oMNInEKB7U32_Rz26vBTjrjizFlq9hMOk9T_SpCNHF3uirKnFfcqX82HIzo07L7nv3HSYGflLipCgposbjyr05kP7b0pJ-RCtcXCbj9Ctp4_L8Ck/s1600/controls.png) no-repeat -36px -32px}#cboxMiddleLeft{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mS31WmehJgxsrUaWWrHrCZyanM5oMNInEKB7U32_Rz26vBTjrjizFlq9hMOk9T_SpCNHF3uirKnFfcqX82HIzo07L7nv3HSYGflLipCgposbjyr05kP7b0pJ-RCtcXCbj9Ctp4_L8Ck/s1600/controls.png) repeat-y -175px 0}#cboxMiddleRight{width:14px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg0mS31WmehJgxsrUaWWrHrCZyanM5oMNInEKB7U32_Rz26vBTjrjizFlq9hMOk9T_SpCNHF3uirKnFfcqX82HIzo07L7nv3HSYGflLipCgposbjyr05kP7b0pJ-RCtcXCbj9Ctp4_L8Ck/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/AVvXsEj-1oSHrbzGx7fBwBxzscFqy2k0Nde2LX7a-jkpB46CUARzPSqe-VmfZ93uLGOXued8vdAli6OTl5CtxrFdV1dTXoTOONHxtHLaWxlQ3YLvM8QlgjXn5ojm4yJpAzlQFqjr2yxpnjHUs7E/s400/loadingbackground.png) no-repeat center center}#cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgjvsb952Z7KRcnZ0JVV27P5qKk-eCCP7gdnPbpfowrKQrUz7yeP_BLSYIj-fp3zSzpvcsDTO2_5xdo2ZJzASoKeBo_37VfNYZCKcFDB1edG7x9G_h4loFlBSSVu-1r7njbBW1IA_ZcGYI/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/AVvXsEg0mS31WmehJgxsrUaWWrHrCZyanM5oMNInEKB7U32_Rz26vBTjrjizFlq9hMOk9T_SpCNHF3uirKnFfcqX82HIzo07L7nv3HSYGflLipCgposbjyr05kP7b0pJ-RCtcXCbj9Ctp4_L8Ck/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%2FMr.FarhanKayani&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>
</div></div>
Customization:
- The blue color text is the text which will be displayed above the Facebook like box in the pop up, so you can change it to whatsoever you like.
- And the red color text "Mr.FarhanKayani" is the user name of my facebook page, so you must replace it with your FaceBook page user name.

No comments:
Post a Comment
Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
Note:
1. Make sure to click the "Subscribe By Email" link below the comment to be notified of follow up comments and replies.
2. Please "Do Not Spam" - Spam comments will be deleted immediately upon our review.
3. Please "Do Not Add Links" to the body of your comment as they will not be published.
4. Only "English" comments shall be approved.
5. If you have a problem check first the comments, maybe you will find the solution there.