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

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.

Nội dung chính

<script type='text/javascript'>
//<![CDATA[
var text = 'Nội dung bạn cần thông báo';
var icon_close = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5O69sj17z4B_z8reicYEi1O1L2KKeSyTZUg2eKw6w8IMye41q670Wx6XvSE9M-_8dWnsACUiNtZjbX2l0ZuYNUVZ0cQPz2Fjvl_XdVHk8rLslKutTDHA6HEYwNb1yiuvx_VdXYZzWL4UH/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>
#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%);
background:#fff;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 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>
<script type='text/javascript'>
//<![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/AVvXsEg5O69sj17z4B_z8reicYEi1O1L2KKeSyTZUg2eKw6w8IMye41q670Wx6XvSE9M-_8dWnsACUiNtZjbX2l0ZuYNUVZ0cQPz2Fjvl_XdVHk8rLslKutTDHA6HEYwNb1yiuvx_VdXYZzWL4UH/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>
#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>

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 type='text/javascript'>
//<![CDATA[
var text = 'Nội dung bạn cần thông báo';
var icon_close = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5O69sj17z4B_z8reicYEi1O1L2KKeSyTZUg2eKw6w8IMye41q670Wx6XvSE9M-_8dWnsACUiNtZjbX2l0ZuYNUVZ0cQPz2Fjvl_XdVHk8rLslKutTDHA6HEYwNb1yiuvx_VdXYZzWL4UH/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>
#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%);
background:#fff;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 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.