Tạo Popup Thông Báo Chạy Bằng Cookie Cực Chất

Popup là một cửa sổ nhỏ xuất hiện ngay trên website, giúp cho chúng ta có thể đưa thông tin đến người dùng 1 cách nhanh chống. Nhằm muốn thông báo hay quảng bá một sản phẩm hay thông tin cần thiết đối với người dùng.
Để tạo ra một Popup hiện thị theo một chu kì thời gian nhất định, thì chúng ta hãy đọc hết bài viết này nhé.

Bây giờ thì bắt đầu thui. Đọc cho kỹ rồi làm theo nha, lỡ một bước thì chẳng hiện Popup đâu.

Các bước thực hiện

Trước tiên hãy truy cập vào Template Blog của bạn, rồi thêm đoạn code dưới đây lên trên thẻ đóng </body> nha.

Bạn có thể thích những bài đăng này

• 
  Tạo Hiệu Ứng Đẹp Với Wow.js Cho Blogspot
• 
  Tuỳ Chỉnh Định Dạng Thời Gian Bằng F12 Cho Blogspot

<!-- Code By Sĩ Ben IT -->
<style>
#tnbdxviii {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: fixed;
    opacity: 0;
    visibility: hidden;
    transition: .5s;
    transform: scale(1.015);
    z-index: 999999999999!important;





}
.tnbdxviii {
    transform: scale(1)!important;
    background: rgba(0,0,0,.2)!important;
    opacity: 1!important;
    visibility: visible!important;
    position: fixed!important;
    top: 0!important;
    left: 0!important;
    right: 0!important;
    bottom: 0!important;
    margin: 0!important;
    transition: .5s!important;
}
.tnbdxviii_{background:#fff;border-radius:4px;z-index:999;width:600px;max-width:100%;position:fixed;top:45%;left:50%;transform:translate(-50%,-50%);margin:0;padding:20px;box-sizing:border-box;box-shadow:0 0 100px rgba(0,0,0,.2)}
.tnbdxviii_ h2{margin:0 0 .75em;padding:0;text-align:center;font-weight:700;font-family:Roboto,sans-serif;color:#4267b2}
.tnbdxviii_ h3{margin:0 0 5px;padding:0;font:500 15px Roboto;text-transform:uppercase}
.tnbdxviii_ p{margin:0;padding:0;font:400 16px Roboto,sans-serif;color:#222;line-height:1.5}
.tnbdxviii_ p a{font-weight:700;color:#222}
.tnbdxviii_ p a:hover{text-decoration:underline}
.tnbdxviii_ a.close {
 padding: 10px 30px;
    display: inline-block;
    margin:0;
    float: right;
    font-size: 12px;
    font-weight: 700;
 text-transform:uppercase;
    color: #888!important;
  }
.tnbdxviii_ a.close:hover {
background-color:#f2f3f5
  }
</style>
<div id='tnbdxviii'>
<div class='tnbdxviii_'>
<h2>THÔNG BÁO</h2>
<p>Mọi người hãy ủng hộ Blog thường xuyên để Ad có động lực đăng bài nhiều bài hay nhé. Mặc dù Ad không có nhiều thể gian để đăng bài, nhưng sẽ cố gắng để không phụ lòng mọi người !</p>
<a class='close ripple' href='javascript:void(0);' id='closes'>Đóng</a>
<a class='close ripple' href='https://fb.com/dangtiensi.it' target='blank'>Liên hệ</a>
</div>
</div>
<script type='text/javascript'>
//<![CDATA[
$('#thongbao').click(function() {
$('#tnbdxviii').toggleClass('tnbdxviii');
})
$('#closes').click(function() {
$('#tnbdxviii').removeClass('tnbdxviii');
})
//]]></script>
<script type='text/javascript'>
//<![CDATA[
// Set cookie
function setCookie(name, value, expires, path, domain, secure) {
document.cookie = name + "=" + escape(value) +
((expires == null) ? "" : "; expires=" + expires.toGMTString()) +
((path == null) ? "" : "; path=" + path) +
((domain == null) ? "" : "; domain=" + domain) +
((secure == null) ? "" : "; secure");
}
// Read cookie
function getCookie(name){
var cname = name + "=";
var dc = document.cookie;
if (dc.length > 0) {
begin = dc.indexOf(cname);
if (begin != -1) {
begin += cname.length;
end = dc.indexOf(";", begin);
if (end == -1) end = dc.length;
return unescape(dc.substring(begin, end));
}
}
return null;
}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var luuCookie = getCookie("cookiename");
if(luuCookie != 'hello'){
var expiration = new Date();
expiration.setTime(expiration.getTime() + 5*60000);
setCookie("cookiename","hello",expiration);
var thogbao = document.getElementById("tnbdxviii");
thogbao.classList.add("tnbdxviii");
}
});
//]]>
</script>

Cách sử dụng

Trong đoạn code trên có dòng:

expiration.setTime(expiration.getTime() + 5*60000);

Số 5*6000 có nghĩa là 5 phút sẽ xuất hiện một lần. Có thể chỉnh thành 15*6000 thì 15 phút sẽ hiện một lần nhé.
Nếu sử dụng thẻ <button/> hay <a/> thì thêm vào như sau:

<button id='thongbao'>Click Here</button>
<!-- Hoặc -->
<a href='javascript:void(0);' id='thongbao'>Click Here</a>

Lời kết

Chúc các bạn thành công nhé. Style của Popup có thể tuỳ chỉnh thoải mái nhá :P