Code hiển thị Popup thông báo bằng hình ảnh hoặc văn bản

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.

Google có nhiều cập nhật mới do vậy nhiều code không còn phù hợp.

Các bạn có thể dùng thử nếu phù hợp.

1- Trường hợp chỉ dùng thông báo dạng văn bản

Để 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://4.bp.blogspot.com/-K2abxSSGK9I/W4JGheVSp7I/AAAAAAAAEc4/SWOCU1vtTaoFvwXEKc3Oef227zq7c1NQwCLcBGAs/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,.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.

Để 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://4.bp.blogspot.com/-K2abxSSGK9I/W4JGheVSp7I/AAAAAAAAEc4/SWOCU1vtTaoFvwXEKc3Oef227zq7c1NQwCLcBGAs/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.

Chúc các bạn cài đặt thành công.

=> Tăng tương tác MXH giá rẻ, uy tín tại: SubLikeNgon.Com