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 Terocket 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ờ Terocket 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.

Live Demo

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 Terocket 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/AVvXsEjJ92_Wc80nK1_jSQBOj8KLjEw4rjuVO52EWjgkKxZ4PKbjtpdFoXr1-Yr2C8DB6ugrnUEzDY6YAgLe-WssxC4sUKwekD4dPqBaGpXfFi__6qBoIqtoS3wkyJe3WisnmZ5D4lri9PirJ8Wl/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/VNuento&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>

Read more »