Tạo cửa sổ popup fanpage facebook trên Blogspot/Blogger

Các blogger hoặc vài người có 1 website đều muốn giới thiệu đến fanpage của mình đến cho độc giả, khi độc giả xem bài viết không hiểu thì có thể qua fânpage mà inbox qua giải đáp.

Sau đây Blog sẽ hướng dẫn các bạn làm đều đó

Bước 1: Vào đăng nhập Blogger

Bước 2: Các bạn chọn Blog mà các bạn muốn hiện popup fanpage

Bước 3: Tiếp theo, các bạn làm theo các mục hướng dẫn để thêm:

chọn Bố cục -> Thêm tiện ích -> HTML/Javascript

Bước 4: Các bạn copy đoạn code bên dưới này & dán vào

<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 #18a2f7;
    width: 410px;
    height: 235px;
    position: absolute;
    top: 32%;
    left: 35%;
    -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: "THÍCH TRANG PHƯỚC AN BLOG [X]";
    padding: 5px 8px;
    background: #18a2f7;
    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: #0000EE;
    font-size: 11px;
    text-decoration: Tahoma;
    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_user_login', '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/phuocanofficial&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 400px; height: 200px;'></iframe>
<div id="fbox-link">Nhấn - [Thích Trang] - Đã Rồi Tắt Nhé :* <a style="padding-left: 0px;" href="http://www.tranphuocan.tk" rel="nofollow">Phước An Blog</a></div>
</div>
</div>

trong đó

• phần màu đỏ là để thay đổi thời gian xuất hiện của popup fanpage khi vào blog hoặc chuyển trang, 5000 tương ứng với 5giây.

VD: các bạn muốn 3giây hiện thì chỉ việc sửa 5000 thành 3000.

• còn phần màu xanh là địa chỉ link fanpage để popup để hiện, hay thay dòng màu xanh trên thành địa chỉ fanpage của bạn.

Bước 5: Cuối cùng là Lưu & xem kết quả.

CHÚC CÁC BẠN THÀNH CÔNG! cám ơn các bạn đã xem bài viết này.

Author : Admin

Share this

Related Posts