Thư viện

Trải nghiệm

Thứ Năm, tháng 12 18, 2014

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

Hướng dẫn thực hiện thủ thuật blog Khung hộp/box like fanpge trôi nổi dạng Lightbox cho Blogspot Blogger tại Terocket cả nhà nhé!

Chia sẻ:
[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(http://3.bp.blogspot.com/-NRmqfyLwBHY/T4nwHOrPSzI/AAAAAAAAAdQ/8b9O7O1q3c8/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.
Trứng Vịt - Terocket

13 nhận xét:

  1. Chào Nam. Cho mình hỏi cái này có gây ảnh hưởng tới seo hoặc trải nghiệm của người dùng không cậu?

    Trả lờiXóa
  2. rất hay, mình sẽ thử xem sao
    http://giaitricungbe.blogspot.com

    Trả lờiXóa
  3. Bài viết rất bổ ích!
    Cách tạo bài viết liên quan đẹp cho blogger >> http://vnminhtriet.blogspot.com/2015/03/cach-tao-bai-viet-lien-quan-ep-cho.html

    Trả lờiXóa
  4. Chào Nam ;
    Mình có xài code tạo Lightbox mà bạn từng chia sẻ ( http://namkna-demo.blogspot.com/2012/04/thu-thuat-tao-hieu-ung-lightbox.html ).

    Bạn cho mình hỏi : Mình có cách nào chèn HTML vào trong Lightbox hay ko bạn nhỉ ? Ví dụ là nếu mình muốn chèn cả 1 Widget vào lightbox .... :D

    Hy vọng có cách .

    Trả lờiXóa
  5. Chào bạn.
    Mình đã làm theo hướng dẫn của bạn và làm được rồi nek.
    Nhưng chều ngang khung này hơi dài nên hình bị tràn ra ngoài.
    Bạn có thể chỉ mình cách chỉnh lại kích thước khung và màu chữ trong khung được không.

    Cám ơn bạn nhiều ạ.

    Trả lờiXóa
  6. Ad ơi sao mình làm nó không xuất hiện là sao ad? giúp mình với thanks web mình http://tinhyeuamthuc.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Bạn chú ý là cái Facebook là cái page nhà, chứ không phải trang cá nhân của bạn đâu (nếu để trang cá nhân nó ko lên đâu).

      Like trang mình nhé :) http://datdai24h.blogspot.com/

      Xóa
  7. Mình cũng làm theo hướng dẫn mà không có được like button trôi nổi như hướng dẫn, hix

    Giúp mình với

    http://vattuthanhphat.blogspot.com/

    Trả lờiXóa
  8. mình đã thử và web nặng quá @@ www.bao3s.com

    Trả lờiXóa
  9. Giúp mịn với http://www.thoibaoconggiao.com/

    Trả lờiXóa
  10. thanks, mình làm được rồi

    http://www.wallhdfree.com/

    Trả lờiXóa