[Tips] - 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/AVvXsEj6FsSfnPNMmGbqn66PcblMOGU7Y5uf5492ytqW4yuQhfp5zE37LJHYSKaELvrJslHeCwL4u7z0SxBf2xpCVeIHJryGYcnzkHdipjf6xMV3xNFseuLQP7LZeEIvNeRhvW6lSmCZxBmXdVou/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/Terocket&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, Terocket sẽ giải đáp và giúp bạn hoàn thành thủ thuật.

Bài viết liên quan

Comments[ 0 ]


Đăng nhận xét

SHOPTIMMUA.COM - Siêu Thị Mua Bán Trực Tuyến Uy Tín - Chất Lượng - Nhanh Chóng Hàng Đầu Việt Nam

Trải Nghiệm Mua Sắm Tuyệt Vời Hơn. Chỉ có tại Shoptimmua.com - Mua ngay! với cách thức kinh doanh Mua hàng online - Giao hàng tận nơi trên địa bàn Hà Nội cũng như trên cả nước, SHOPTIMMUA.COM cam kết bán hàng tốt, chất lượng, đảm bảo với các chế độ tốt nhất. Với đội ngũ bán hàng nhiệt tình, có chuyên môn cao, sẵn sàng đưa ra những lời tư vấn miễn phí để khách hàng chọn được sản phẩm ưng ý nhất, SHOPTIMMUA.COM luôn lấy sự hài lòng của khách hàng làm tiêu chí kinh doanh hàng đầu .

Để thay đổi cách nhìn về hình thức mua hàng qua mạng cho mọi người, SHOPTIMMUA.COM cố gắng để cung cấp cho bạn những kinh nghiệm mua sắm trực tuyến tốt nhất và giá cả hấp dẫn nhất . Được hỗ trợ bởi một đội ngũ làm việc chăm chỉ và đam mê,SHOPTIMMUA.COM là sự lựa chọn tốt của bạn khi quyết định mua các sản phẩm tại cửa hàng của chúng tôi, dù bạn mua để sử dụng hay mua với số lượng lớn .

.