Bạn cần thông báo cho mọi người truy cập blogspot về một vấn đề gì đó bạn nên có một bảng thông báo có thể là hình ảnh hoặc văn bản.
Code cho tiện ích này chia sẻ cũng đã khá lâu nên có nhiều bất cập trong tình trạng blogger và google có nhiều cập nhật mới do vậy nhiều code không còn phù hợp.
Sau đây là hướng dẫn cài đặt code hiển thị Popup thông báo bằng hình ảnh hoặc văn bản chỉ xuất hiện 1 lần hỗ trợ giao diện Mobile-Code popup notification responsive for blogspot with image and text.
I- Code sử dụng Cookie để tính phiên truy cập
1- Trường hợp chỉ dùng thông báo dạng văn bản
Demo
Để cài đặt popup thông báo dạng văn bản như trên bạn vào chỉnh sử mẫu dán đoạn code sau vào trước thẻ </head> rồi lưu lại
<script>/*<![CDATA[*/
var text = 'Nội dung bạn cần thông báo';
var icon_close = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVcuZkkCPmHoTx5cSB-uxeS0ihagbeqC0DZSyz2e91hWRvyhTFZjECeDHJKNCsTx_l1v1xZ09O40ZfVsX2atNl_0NOPASlR81o49zF_dF30Nas3w0Hc_HjKnB53wcmwoBxfAXIFuX3_ehe/s1600/clock-icon.png'
function closePopup() {
document.getElementById("popup_banner").remove(), setCookie("showPopupBanner", 1,1)
}
function setCookie(e, n, o) {
var t = "";
if (o) {
var i = new Date;
i.setTime(i.getTime() + 24 * 60 * 60 * 1000), t = "; expires=" + i.toUTCString()
}
document.cookie = e + "=" + (n || "") + t + "; path=/"
}
function getCookie(e) {
for (var n = e + "=", o = document.cookie.split(";"), t = 0; t < o.length; t++) {
for (var i = o[t];
" " == i.charAt(0);) i = i.substring(1, i.length);
if (0 == i.indexOf(n)) return i.substring(n.length, i.length)
}
return null
}
1 != getCookie("showPopupBanner") && (document.addEventListener("DOMContentLoaded", function(event) {
var e = '<div id="popup_banner"><div onclick="closePopup()" class="mask_popup_banner"></div><div class="content_popup_banner"><img src="' + icon_close + '" class="close_icon" onclick="closePopup()" alt="Close Image"> ' + text + ' </div></div>';
setTimeout(function() {
document.body.innerHTML += e
}, 1000)
}));
/*]]>*/</script>
<style>/*<![CDATA[*/
#popup_banner{position:fixed;width:100%;height:100vh;z-index:99999;top:0;left:0}
.mask_popup_banner{background:rgba(0,0,0,.1);cursor:pointer;position:absolute;width:100%;height:100vh;top:0;z-index:9;left:0}
.content_popup_banner{position:absolute;top:50%;left:50%;z-index:10;transform:translate(-50%,-50%);
background:#fff;
-webkit-box-shadow: inset 0 0 5px 0 #939393;
-moz-box-shadow: inset 0 0 5px 0 #939393;
box-shadow: inset 0 0 5px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
font-family:Arial;
font-size:22px;
color:#000;
padding:15px;
}
.close_icon{position:absolute;top:-10px;right:-10px;width:35px;cursor:pointer}
@media only screen and (max-width:480px){.content_popup_banner{width:100%;margin:0 10px 0 5px !important}
.close_icon{top:0p;right:20px;width:24px}}
/*]]>*/</style>
2- Trường hợp chỉ dùng thông báo dạng hình ảnh có dẫn link tới trang đích
Đây là popup thông báo sử dụng hình ảnh có liên kết và khi click vào hình ảnh thì sẽ được đưa tới trang đích.
Demo
Để cài đặt popup thông báo dạng hình ảnh có dẫn linh như trên bạn vào chỉnh sử mẫu dán đoạn code sau vào trước thẻ </head> rồi lưu lại
<script>/*<![CDATA[*/
var link_image = 'Linh hình ảnh hiển thị';
var link = 'Link trang đích';
var icon_close = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVcuZkkCPmHoTx5cSB-uxeS0ihagbeqC0DZSyz2e91hWRvyhTFZjECeDHJKNCsTx_l1v1xZ09O40ZfVsX2atNl_0NOPASlR81o49zF_dF30Nas3w0Hc_HjKnB53wcmwoBxfAXIFuX3_ehe/s1600/clock-icon.png'
function closePopup() {
document.getElementById("popup_banner").remove(), setCookie("showPopupBanner", 1,1)
}
function setCookie(e, n, o) {
var t = "";
if (o) {
var i = new Date;
i.setTime(i.getTime() + 24 * 60 * 60 * 1000), t = "; expires=" + i.toUTCString()
}
document.cookie = e + "=" + (n || "") + t + "; path=/"
}
function getCookie(e) {
for (var n = e + "=", o = document.cookie.split(";"), t = 0; t < o.length; t++) {
for (var i = o[t];
" " == i.charAt(0);) i = i.substring(1, i.length);
if (0 == i.indexOf(n)) return i.substring(n.length, i.length)
}
return null
}
1 != getCookie("showPopupBanner") && (document.addEventListener("DOMContentLoaded", function(event) {
var e = '<div id="popup_banner"><div onclick="closePopup()" class="mask_popup_banner"></div><div class="content_popup_banner"><img src="' + icon_close + '" class="close_icon" onclick="closePopup()" alt="Close Image"><a href="'+link+'"><img class="popup_banner_image" src="'+link_image+'" alt="Image Popup Banner"/></a></div></div>';
setTimeout(function() {
document.body.innerHTML += e
}, 1000)
}));
/*]]>*/</script>
<style>/*<![CDATA[*/
#popup_banner{position:fixed;width:100%;height:100vh;z-index:99999;top:0;left:0} .mask_popup_banner{background:rgba(0,0,0,.38);cursor:pointer;position:absolute;width:100%;height:100vh;top:0;z-index:9;left:0}
.content_popup_banner{position:absolute;top:50%;left:50%;z-index:10;
transform:translate(-50%,-50%);
-moz-transform:translate(-50%,-50%);
-o-transform:translate(-50%,-50%);
-webkit-transform:translate(-50%,-50%)}
.popup_banner_image{width:500px;height:250px;margin:0 auto}
.close_icon{position:absolute;top:-20px;right:-20px;width:40px;cursor:pointer}
@media only screen and (max-width:480px){
.content_popup_banner{width:300px}
.content_popup_banner a img:nth-of-type(1){width:100%}
.close_icon{top:-10px;right:-5px;width:30px}}
/*]]>*/ </style>
Chỉ xuất hiện 1 lần: Thời gian mặc định của code là 1 ngày(24h) trên một trình duyệt, một ip.
Nếu muốn nó xuất hiện liên tục tức là bỏ qua set cookie thì trong đoan code: for (var n = e + "=", o = document.cookie.split(";"), t = 0; t < o.length; t++) thay t=0 thành t=1
Chúc các bạn cài đặt thành công.II- Code Popup thông báo xuất hiện 1 lần sử dụng sessionStorage để tính phiên truy cập của đối tượng
Thuộc tính chỉ đọc sessionStorage truy cập vào đối tượng phiên Storagecho. sessionStorage tương tự như localStorage, sự khác biệt là mặc dù dữ liệu vào localStorage không hết hạn nhưng dữ liệu vào sessionStorage sẽ bị xóa khi phiên trang kết thúc.Bất cứ khi nào một tài liệu được tải vào một tab cụ thể trong trình duyệt, một phiên trang duy nhất sẽ được tạo và gán cho tab cụ thể đó. Phiên trang đó chỉ hợp lệ cho tab cụ thể đó. Phiên trang kéo dài miễn là tab hoặc trình duyệt được mở và tồn tại sau khi tải lại và khôi phục trang.
Do vậy khi khách truy cập blog popup thông báo sẽ xuất hiện 1 lần duy nhất, nếu có chuyển trang thì popup cũng không xuất hiện lại trừ khi thoát trang và tắt trình duyệt và vào lại.
Với popup thông báo sử dụng sessionStorage có thể tạo thông báo bằng văn bản hoặc hình ảnh tại phần nội dung thông báo trong code.
1- Popup thông báo sessionStorage sử dụng văn bản
DemoCách thực hiện cài đặt thông báo.
Dán toàn bộ code trước thẻ đóng </body>
<style>
/*<![CDATA[*/
.overlay-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:99}
.close-icon{position:absolute;top:10px;right:10px;cursor:pointer;font-size:20px}
.popuptb{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:20px;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,0.2)}
/*]]>*/
</style>
<div class='overlay-popup' id='overlay'>
<div class='popuptb'>
<span class='close-icon' onclick='closePopup()'>×</span>
<p>Nội dung của popup...</p>
</div>
</div>
<script>
/*<![CDATA[*/
document.addEventListener("DOMContentLoaded",function(){sessionStorage.getItem("popupShown")||(document.getElementById("overlay").style.display="block")});function closePopup(){document.getElementById("overlay").style.display="none",sessionStorage.setItem("popupShown","true")}
/*]]>*/
</script>
2- Popup thông báo sessionStorage sử dụng hình ảnh có gắn liên kết tới trang đích
DemoCách thực hiện cài đặt thông báo.
Dán toàn bộ code trước thẻ đóng </body>
<style>
/*<![CDATA[*/
.overlay-popup{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.5);z-index:99}
.close-icon{position:absolute;top:10px;right:10px;cursor:pointer;font-size:25px;font-weight:bold;color:green;}
.popuptb{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);padding:25px;background-color:#fff;box-shadow:0 0 10px rgba(0,0,0,0.2)}
/*]]>*/
</style>
<div class='overlay-popup' id='overlay'>
<div class='popuptb'>
<span class='close-icon' onclick='closePopup()'>×</span>
<p><a href="Liên kết cần tới" rel='' target='_blank'><img alt="" height="150px" width="300px" src="Hình ảnh thông báo của bạn" /></a></p>
</div>
</div>
<script>
/*<![CDATA[*/
document.addEventListener("DOMContentLoaded",function(){sessionStorage.getItem("popupShown")||(document.getElementById("overlay").style.display="block")});function closePopup(){document.getElementById("overlay").style.display="none",sessionStorage.setItem("popupShown","true")}
/*]]>*/
</script>
nguồn:nguyencaotu.com
