Facebook Popup Like box widget For your website stylish Design for blogger

Facebook Popup like box widget will appear in the popup window. when someone visits your website for the first time. the popup like Box is created with Jquery so it will not take so much time in loading. to make it more stylish we also used CSS. in the following screenshot you can see how it looks.

Facebook Popup like Box is really useful it helps you to get more likes on your facebook fan page. if you are thinking of using a stylish facebook like Box then this post helps you. because this post is about how to add Facebook Popup like box widget in your blogger.

Add Facebook Popup Like Box widget in Blogger

1. go to the blogger and log in your google account. 
2. from your blog dashboard click on template link and from the next page click on edit HTML button. 
   
3.  click anywhere on the code and press ctrl+F blogger search box will appear.   
   
4. search </body> and paste following code just before the </body>. 
5. visit your blog to see how it looks.

 <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/pages/92tricks-580765418758066&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>
</div>

in blogger, you can also show facebook Popup like box widget on the home page only. to show it on the homepage only just use the following Blogger B: IF condition.

<b:if cond='data:page.type == "index"'>paste facebook Popup like Box widget code here</b:if>

add Facebook Popup Like Box widget without editing your template

Facebook Popup like box gadget is also usable as a simple javascript/HTML widget. 

1. from your blog dashboard click on the layout link.
2. the layout page will appear here you will see add gadget link click on the add gadget link. 
   
3. a new window will be shown from this window click on javascript/HTML. 
   
4. Paste the above code in the text box and click on save button. 
   

that's it the facebook Popup like Box is successfully added to your blogger blog.
thanks for reading my post keep visiting for more useful posts. if this post was useful for you then drop your comments below.