Add Facebook Popup Like Box Widget in Blogger

Today we have something worthwhile.It can be used to beautify your blog.Blogger Tutorials can help you on our site.Today we brought you a Popup Like Box Widget.So let's just lets see how to add Facebook Popup Like Box Widget in Blogger

Today we have something worthwhile.It can be used to beautify your blog.Blogger Tutorials can help you on our site.Today we brought you a Popup Like Box Widget.So let's just lets see how to add Facebook Popup Like Box Widget in Blogger

Add Facebook Popup Like Box Widget in Blogger

This is very simple.This is done through your blog's Layout tab.There is an article about Layout tab on our site.Read it too.First, go to your blog's Dashboard for do this.For the first , visit www.blogger.com.You can then see the layout tab on the left.Go to the Layout tab at the image below.

Add Facebook Popup Like Box Widget in Blogger

Now you have to choose a place you want.Select where to place your Facebook Popup Like Box Widget.

• Then click the add a gadget to the site.
• Then you can see most of the gadgets.
• now Choose  HTML / javascript gadget.

Now you can see  gadgets in the two section, title and content of that gadget.Once you've added this slider, just type a title if you want to show something above.Otherwise, it is best to leave it blank.Next, 
1.we give you the following code.First copy it.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>

<style>

#fanback {

display:none;

background:rgba(0,0,0,0.8);

width:100%;

height:100%;

position:fixed;

top:0;

left:0;

z-index:99999;

}

#fan-exit {

width:100%;

height:100%;

}

#fanbox {

background:white;

width:420px;

height:270px;

position:absolute;

top:58%;

left:63%;

margin:-220px 0 0 -375px;

-webkit-box-shadow: inset 0 0 50px 0 #939393;

-moz-box-shadow: inset 0 0 50px 0 #939393;

box-shadow: inset 0 0 50px 0 #939393;

-webkit-border-radius: 5px;

-moz-border-radius: 5px;

border-radius: 5px;

margin: -220px 0 0 -375px;

}

#fanclose {

float:right;

cursor:pointer;

background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgF_SDEA5H_D4Eo2fkcwZpyv1kNLGXe9rxMwrfQkRSpC5EPQhljRMBb3hWGrX_P3gnYxqLjoC2bdrO-KcSQMluyLmvlNdcck4RZyfkt3FRQrc2Jv-K8eZFhQggod0q_ovY4BgEcXiWUnRSH/s1600/fanclose.png) repeat;

height:15px;

padding:20px;

position:relative;

padding-right:40px;

margin-top:-20px;

margin-right:-22px;

}

.remove-borda {

height:1px;

width:366px;

margin:0 auto;

background:#F3F3F3;

margin-top:16px;

position:relative;

margin-left:20px;

}

</style>

<script type='text/javascript'>

//<![CDATA[

jQuery.cookie = function (key, value, options) {

// key and at least value given, set cookie...

if (arguments.length > 1 && String(value) !== "[object Object]") {

options = jQuery.extend({}, options);

if (value === null || value === undefined) {

options.expires = -1;

}

if (typeof options.expires === 'number') {

var days = options.expires, t = options.expires = new Date();

t.setDate(t.getDate() + days);

}

value = String(value);

return (document.cookie = [

encodeURIComponent(key), '=',

options.raw ? value : encodeURIComponent(value),

options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE

options.path ? '; path=' + options.path : '',

options.domain ? '; domain=' + options.domain : '',

options.secure ? '; secure' : ''

].join(''));

}

// key and possibly options given, get cookie...

options = value || {};

var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;

return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;

};

//]]>

</script>

<script type='text/javascript'>

jQuery(document).ready(function($){

if($.cookie('popup_user_login') != 'yes'){

$('#fanback').delay(1000).fadeIn('medium');

$('#fanclose, #fan-exit').click(function(){

$('#fanback').stop().fadeOut('medium');

});

}

$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });

});

</script>

<div id='fanback'>

<div id='fan-exit'>

</div>

<div id='fanbox'>

<div id='fanclose'>

</div>

<div class='remove-borda'>

</div>

<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?

href=http://www.facebook.com/28sbmade&width=402&height=255&colorscheme=light&show_faces=true&border_color=%23E2E2E2&stream=false&header=false'

style='border: none; overflow: hidden; margin-top: -19px; width: 402px; height: 230px;'></iframe>

</div>

</div>

2.Now paste the copy code into your HTML / Javascript gadget.
3.Then click on the Gadget's content and press CTRL + F.You can then find a search bar above the top.
4.Now you type 28sbmade in the top search bar.
5.Give it your username on your facebook page.
6.Now our work is over.Finally, click Save button.

View your blog now.You can see that your facebook page pops up after you've done a little while.You still need to remind one.Do not continue adding this widget.This will be annoying to your users.

If you did not understand the process, check the video below.You can see this process below the video.

happy blogging!Then comment your question below your problem or our site.Also, your ideas are very useful for our success.See the article next & share this article with your friends.