Khung hộp / box like fanpge trôi nổi dạng Lightbox cho Blogspot Blogger

Để nâng cao trải nghiệm người dùng tốt hơn, hộp chỉ xuất hiện một lần duy nhất khi người dùng vào website và chỉ xuất hiện trở lại khi khởi động lại máy tính!

Hôm nay có một bạn hỏi Ngọc Quang là làm cách nào để tạo một cái khung box like fanpage, trôi nổi trước mặt người dùng khi họ vào website để giúp tăng lượt like cho fanpage facebook? Thì giờ Ngọc Quang sẽ giải đáp cho bạn và hướng dẫn bạn, cùng các bạn khác thủ thuật này đây. Thủ thuật blog này có tên là [Tips] - Khung hộp/box like fanpge trôi nổi dạng Lightbox cho Blogspot Blogger. Cách thực hiện nó vô cùng đơn giản.

Demo như ảnh trên

Lợi thế của thủ thuật [Tips] - Khung hộp/box like fanpge trôi nổi dạng Lightbox cho Blogspot Blogger này đó là khi người dùng vào website, nó sẽ tự động xuất hiện, tạo ấn tượng đập ngay vào người dùng, gây sự chú ý của họ và kích thích khả năng hành động của họ dễ dàng hơn. Thủ thuật tiện ích này phù hợp để kéo follow Google Plus, Facebook Like hay Subcribe Email cho blogspot, hoặc đơn giản hơn là một thông báo nhỏ...rất nhiều lợi ích của tiện ích này. Giờ thì cùng KTHEME thực hiện nhé!

Để thực hiện thủ thuật này rất đơn giản, chỉ cần chèn đoạn mã code sau vào một Widget HTML/Javascript và Lưu lại.

Đầu tiên các bạn vào Blog Title → Layout → Add Widget → HTML/JavaScript → Copy đoạn code sau vào → Thay đổi cho phù hợp → Lưu lại.

<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/AVvXsEjw4ZxAzWeDCSnnSU7MT5scC3kVaisnNaHseFdZSp7s2V-XjIYZQcXOkP8-Ksi36Z2eL2tV5pTLPk4-5wOZ6-vFyqU2mnT7BZCmAozaXpb3dIK7Msuw2qoESz6PPi4ENZ5qxDg3uiipt3dc/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(100).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/haivlmax&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>

Ghi chú: Thay đoạn Màu Xanh thành URL fanpage của bạn nhé và các bạn hãy để ý, nếu website của mình đã có file jquery.min.js thì hãy xóa đoạn mã sau khỏi code trên nha. Còn chưa có thì để lại như vậy!

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

Vậy là đã xong thủ thuật blog [Tips] - Khung hộp/box like fanpge trôi nổi dạng Lightbox cho Blogspot Blogger này rồi, chúc các bạn thành công nhé!

Nếu bạn nào đã làm được rồi, hãy share thủ thuật này đến với bạn bè của mình, nếu chưa được, hãy gửi bình luận dưới đây, KTHEME sẽ giải đáp và giúp bạn hoàn thành thủ thuật.