VietNetwork.Vn

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 này 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 một lần.

1. Trường hợp chỉ dùng thông báo dạng văn bản.
Để sử dụng Popup thông báo dạng văn bản như trên thì các bạn hãy vào chỉnh sửa mẫu và dán đoạn mã 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 = 'httpss://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>
#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 liên kết tới trang đích.

Đây là Popup thông báo sử dụng hình ảnh có liên kết và khi nhấn vào hình ảnh thì sẽ được đưa tới trang đích.
Để sử dụng Popup thông báo dạng hình ảnh có dẫn liên kết như trên thì các bạn hãy vào chỉnh sửa mẫu và dán đoạn mã sau vào trước thẻ '</head>' rồi lưu lại.

<script type='text/javascript'>
      //<![CDATA[
        var link_image = 'Linh hình ảnh hiển thị';
        var link = 'Link trang đích';
        var icon_close = 'httpss://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"/>[/url]</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>