Share CODE POPUP Like Fanpage FaceBook Đẹp cho Blogger Blogspot

Code hiển thị Popup Like Fanpage FaceBook chắc không còn xa lạ gì. Tác dụng của code này sẽ hiển thị khung like fanpage trên trang của các bạn khi người dùng lướt xuống. Lưu ý code này phải trượt xuống mới hiện bảng thông báo. Khá hay khi người dùng tương tác.

Điểm đặc biệt là code này sẽ không hiển thị mỗi lần người dùng click mà chỉ hiển thị 1 lần duy nhất và không hiển thị lại nữa. Điều này sẽ khiến người dùng không cảm thấy khó chịu và bỏ rơi web bạn đâu nhé ^^

Giao diện hiển thị của code sẽ như hình dưới


Sau đây là toàn bộ code bao gồm thư viện jquery + css + html

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

<style>

#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 #3a5795;

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: 0px;

top: 0px;

}



#fbox-button:before {

content: "CLOSE";

padding: 5px 8px;

background: #3a5795;

color: #eaeaea;

font-weight: bold;

font-size: 10px;

font-family: Tahoma;

}



#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {

color: #aaaaaa;

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 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_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/xemvuilams&amp;width=402&amp;height=255&amp;colorscheme=light&amp;show_faces=true&amp;show_border=false&amp;stream=false&amp;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://codeseo.net" rel="nofollow">codeseo</a></div>

</div>

</div>

Thay đoạn bôi đỏ bên trên thành link Fanpage facebook của các bạn
Các bạn nên chèn code này bên trên thẻ sẽ khiến blog của bạn load mượt mà hơn là để ở đầu trang

Powered by codeseo