FANCY DOTTED STYLE FB POP UP LIKE BOX WIDGET

Fancy dotted popup Facebook widget

Fb pop up widget is predominant for growing viewers Like rapidly. There are various good internet site which is making use of popup like field for pushing the viewers to click on Like button. And with the aid of producing like Blogger can effectively broaden their web publication popularity.

The fundamental idea of this widget when a visitor will consult with your web publication then after loading the touchdown web page within three seconds the widget will show up. However for those who want that you can increase the Fan field loading time. Furthermore this widget can be load per page view or one time inside 6 days. This widget will maintain viewers cookie so it any traveler click on on shut button then within 6 days this popup widget won't be seen. So  let's proceed to the primary tutorial to add this lovely fb popup widget.

Step 1 Log in to your Blogger account and Go to your Blogger Dashboard

Step 2 Go to your layout tab.

Step 3 click on on "Add a widget" then opt for "HTML/JavaScript" system.

Step 4 Now copy the below code and paste it in "HTML/JavaScript" widget.

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fbcontainer-bg {
background: #444444;
display: none;
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#close-button {
width: 100%;
height: 100%;
}
#widget-display {
background: #FFFFFF;
padding-top:7px;
padding-left:8px;
border:5px dotted #000000;
border-bottom-right-radius: 30px;
border-top-left-radius: 30px;
width: 340px;
height: 228px;
position: absolute;
top: 30%;
left: 35%;
}
#button-position {
float:right;
cursor: pointer;
position: absolute;
right: 2px;
top: 5px;
}

#button-position:before {
content: "Close";
padding: 4px 6px;
background: #000000;
border-bottom-right-radius: 20px;
border-top-left-radius: 20px;
color: #eaeaea;
font-weight: bold;
font-size: 10px;
font-family: Trebuchet MS;
}

#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
color: # BAB9B9;
font-size: 9px;
text-decoration: none;
text-align: center;
padding: 5px;
}
</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 to 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_ box') != 'yes'){
$('#fbcontainer-bg').delay(3000).fadeIn('medium');
$('#button-position, #close-button').click(function(){
$('#fbcontainer-bg').stop().fadeOut('medium');
});
}
$.cookie('popup_ box', 'yes', { path: '/', expires: 6 });
});
</script>
<div id='fbcontainer-bg'>
<div id='close-button'>
</div>
<div id='widget-display'>
<div id='button-position'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/androidtips28&width=402&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>

Step 5. Now click save button.

CUSTOMIZATION

You can cut below Jquery file if your template already included another Jquery file.

<script src='http://ajax.Googleapis.Com/ajax/libs/jquery/1.7.2/jquery.Min.Js' type='text/javascript'></script>

Replace

https://www.Facebook.Com/androidtips28 with your facebook Fan web page URL.

To vary the widget loading time alter .Delay(3000) with kind of digit more or less.

To display the widget each time just delete

$.Cookie('popup_ box', 'yes',  route: '/', expires: 6 ); line.

To change the Doted colour alter
border:5px, dotted #000000;
colour code most effective.

To change the close button historical past colour please alter background: #000000; color code only.