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 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.<!-- 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
Subscribe Our Newsletter
0 Response to "Tạo popup thông báo bằng cookie cho blogger"
Đăng nhận xét