Add this enticing widget to your site and a facebook like box will pop up with the lightbox effect when a user visits your page.
- Login into your blogger blog
- Go to Layout
- Click on Add Gadget
- Select HTML/JavaScript
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script> <style type="text/css"> #fbox-background{display:none;background:rgba(0,0,0,0.8);width:100%;height:100%;position:fixed;top:0;left:0;z-index:99999}#fbox-close{width:100%;height:100%}#fbox-display{background:#eaeaea;border:5px solid #828282;width:340px;height:230px;position:absolute;top:32%;left:37%;-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px}#fbox-button{float:right;cursor:pointer;position:absolute;right:0;top:0}#fbox-button:before{content:"CLOSE";padding:5px 8px;background:#828282;color:#eaeaea;font-weight:700;font-size:10px;font-family:Tahoma}#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover{color:#aaa;font-size:9px;text-decoration:none;text-align:center;padding:5px} </style> <script type='text/javascript'> //<![CDATA[ jQuery.cookie=function(a,b,c){if(arguments.length>1&&"[object Object]"!==String(b)){if(c=jQuery.extend({},c),null!==b&&void 0!==b||(c.expires=-1),"number"==typeof c.expires){var d=c.expires,e=c.expires=new Date;e.setDate(e.getDate()+d)}return b=String(b),document.cookie=[encodeURIComponent(a),"=",c.raw?b:encodeURIComponent(b),c.expires?"; expires="+c.expires.toUTCString():"",c.path?"; path="+c.path:"",c.domain?"; domain="+c.domain:"",c.secure?"; secure":""].join("")}c=b||{};var f,g=c.raw?function(a){return a}:decodeURIComponent;return(f=new RegExp("(?:^|; )"+encodeURIComponent(a)+"=([^;]*)").exec(document.cookie))?g(f[1]):null}; //]]> </script> <script type='text/javascript'> jQuery(document).ready(function($){ if($.cookie('popup_facebook_box') != 'yes'){ $('#fbox-background').delay(5000).fadeIn('medium'); $('#fbox-button, #fbox-close').click(function(){ $('#fbox-background').stop().fadeOut('medium'); }); } $.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 }); }); </script> <div id='fbox-background'> <div id='fbox-close'> </div> <div id='fbox-display'> <div id='fbox-button'> </div> <iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php? href=https://www.facebook.com/KS-Webblog-TOOLS-548388695500504&width=339&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false' style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe> <div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://KS WEB/BLOG TOOLS.blogspot.com/2014/12/facebook-popup-like-box-blogger-widget.html" rel="nofollow">KS WEB/BLOG TOOLS</a></div> </div> </div>
CONFIGURE THE CODE
1.LOOK FOR AND REPLACE IT WITH YOUR OWN FACEBOOK PAGE LINKhttps://www.facebook.com/KS-Webblog-TOOLS-548388695500504
2.Change the 10 Second Time Delay
By default the widget pops up 10 seconds after the page finishes loading. Search for the code below and change the number 20000 to a greater or lesser number.
1 second = 1000. 10 seconds = 10000. 60 seconds = 60000.
3. .delay(10000) Popup every time the page loads By default, the like box widget only shows up the first time the user visits your page. If you would like the facebook box to popup every time the page loads, then remove this line of code:
4. $.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
Change the 7 to any number of days you want it to show up
(EXAMPLE)
1 for every day
To make it show every time the page reload remove the link
AND SAVE
No comments:
Post a Comment