Thêm Facebook fanpage dạng lightbox có lặp lại vào Blogger

Thêm Facebook fanpage dạng lightbox có lặp lại vào Blogger
Như các bạn đã biết thì Facebook là một trong những mạng xã hội mạnh mẽ nhất trên thế giới nói chung, và nước Việt Nam thân yêu chúng ta nói riêng. Bằng việc sử dụng đúng cách nó sẽ cho chúng ta tăng thêm được lưu lượng truy cập.

Hiện tại đã có rất nhiều người share các dạng lightbox để chèn vào Blogger, nhưng một số thì xuất hiện liên tục làm người dùng cảm thấy rất khó chịu. Hôm nay, tại bài viết này mình xin chia sẻ với các bạn một lightbox đơn giản, đẹp mắt, xuất hiện chỉ một lần để kiếm thêm đọc giả từ Facebook FanPage của mình.


Thêm Facebook fanpage dạng lightbox xuất hiện một lần vào Blogger

1. Đăng nhập vào Blogger >> Mẫu >> Bố cục

Thêm Facebook fanpage dạng lightbox có lặp lại vào Blogger

2. Tiếp tục chọn vào Thêm tiện ích >> HTML/Javascript và dán vào đoạn mã sau bỏ trống tiêu đề

Thêm Facebook fanpage dạng lightbox có lặp lại vào Blogger

<style>
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;z-index: 99999;}
#colorbox{padding-bottom: 0px; padding-right: 0px; display: block; width: 447px !important; height: 272px !important; top: 200px !important; left: 300px !important; position: fixed; z-index: 99999;}
#cboxMiddleLeft{float: left;height: 299px !important;}
#cboxWrapper{height: 270px !important;width: 450px !important;top: 5px;position: relative;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxContent{float: left;width: 450px !important;height: 255px !important;}
#cboxClose{cursor: pointer; float: right; background-image: url(https://googledrive.com/host/0B8D3MQmcZTyvd0ZIMWtvT1BkQ1k); height: 30px; width: 0px; padding-left: 0px; padding-right: 31px; position: fixed; margin-top: 5px; margin-right: 30px; text-indent: 100%; background-repeat: space; display: block; margin-left: 380px;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}
#cboxOverlay{background:#000;opacity:0.5 !important;pointer-events: none;}
#cboxLoadedContent{width: 450px !important;height: 285px !important;position: fixed;}
#cboxTitle{position:absolute; bottom:-25px; left:0; text-align:center; width:100%; font-weight:bold; color:#7C7C7C;}
#cboxCurrent{position:absolute; bottom:-25px; left:58px; font-weight:bold; color:#7C7C7C;}
#subscribe{padding: 10px;height: 233px;width: 375px;margin-top: 20px;background-color: white;}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<script src="https://googledrive.com/host/0B8D3MQmcZTyvc0tSUVBIZzFld0E"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
   if (document.cookie.indexOf('visited=true') == -1) {
       var fifteenDays = 1000*60*60*24*30;
       var expires = new Date((new Date()).valueOf() + fifteenDays);
       document.cookie = "visited=true;expires=" + expires.toUTCString();
       $.colorbox({width:"450px", inline:true, href:"#subscribe"});
       }
});
</script>
<div style='display:none'>
<div id='subscribe'>
<center>
<iframe allowtransparency="true" frameborder="0" scrolling="no" src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FKslZone&amp;width=400&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=255" style="height: 260px;overflow: hidden;width: 396px;margin-left: -10px;margin-top: -11px;">
</iframe>
</center>
</div>
</div>
Mặc định bên trên lightbox sẽ xuất hiện mỗi 30 ngày, về số 1000 bạn không cần phải quan tâm, các con số bạn cần quan tâm là 30 là số ngày, 24 là giờ, 60 là phút, 60 là giây. Đấy là thời gian xuất hiện tại của lightbox, bạn có thể tùy chỉnh lại cho phù hợp với webstie/blog của mình.

4. Thay đổi KslZone thành Fanpage của bạn, và Lưu lại.

Hi vọng lightbox này giúp các bạn có thêm fan cho Facebook page của mình.

1 bình luận:

  1. avatar says

    lúc 06:49 13 tháng 5, 2015

    Code nghoẻo rồi bác ơi -_- . test http://mystown.com hông chạy nhen, xin cái back link luôn :v

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.