Tạo popup thông báo bằng cookie cho blogger

- Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
- Mọi chi tiết xin liên hệ:
• Email: tiennau1212@gmail.com
• Facebook: www.fb.com/tiennausenpai

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é.
Tạo Popup Thông Báo, Tạo Popup Chạy Bằng Cookie, Tạo Popup Chạy Bằng Js, Javascript, Jquery, 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.

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.

<!-- 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 0100px rgba(0,0,0,.2)}
.tnbdxviii_ h2{margin:00 .75em;padding:0;text-align:center;font-weight:700;font-family:Roboto,sans-serif;color:#4267b2}
.tnbdxviii_ h3{margin:005px;padding:0;font:50015px Roboto;text-transform:uppercase}
.tnbdxviii_p{margin:0;padding:0;font:400 16pxRoboto,sans-serif;color:#222;line-height:1.5}
.tnbdxviii_ p a{font-weight:700;color:#222}
.tnbdxviii_ pa: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'>
<divclass='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>
<scripttype='text/javascript'>
//<![CDATA[
$('#thongbao').click(function() {
$('#tnbdxviii').toggleClass('tnbdxviii');
})
$('#closes').click(function() {
$('#tnbdxviii').removeClass('tnbdxviii');
})
//]]>
</script>
<scripttype='text/javascript'>
//<![CDATA[
// Set cookie
functionsetCookie(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
functiongetCookie(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;
returnunescape(dc.substring(begin, end));
}
}
return null;
}
//]]>
</script>
<scripttype='text/javascript'>
//<![CDATA[
$(document).ready(function(){
var luuCookie = getCookie("cookiename");
if(luuCookie != 'hello'){
var expiration = newDate();
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:
<buttonid='thongbao'>Click Here</button>
<!-- Hoặc -->
<ahref='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

No comments