Tác giả Chủ đề: 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  (Đã xem 42 lần)

0 Thành viên và 1 Khách đang xem chủ đề.

CCNACCNP

  • Administrator
  • Hero Member
  • *****
  • Bài viết: 3373
  • Số Lần: +72/-0
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.

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 type='text/javascript'>
      //<![CDATA[
        var text = 'Nội dung bạn cần thông báo';
        var icon_close = 'Để xem được liên kết hãy Đăng ký hoặc Đăng nhập'
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.



Để 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 type='text/javascript'>
      //<![CDATA[
        var link_image = 'Linh hình ảnh hiển thị';
        var link = 'Link trang đích';
        var icon_close = 'Để xem được liên kết hãy Đăng ký hoặc Đăng nhập'
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>


Chúc các bạn thành công.


 

Related Topics

  Tiêu đề / Tác giả Trả lời Bài mới
0 Trả lời
494 Lượt xem
Bài mới Tháng Mười 01, 2012, 10:53:57 AM
gửi bởi CCNACCNP
0 Trả lời
573 Lượt xem
Bài mới Tháng Mười 01, 2012, 04:02:51 PM
gửi bởi CCNACCNP
0 Trả lời
945 Lượt xem
Bài mới Tháng Tám 31, 2014, 12:14:15 PM
gửi bởi CCNACCNP
0 Trả lời
36 Lượt xem
Bài mới Tháng Bảy 10, 2018, 03:41:15 PM
gửi bởi QuanTriMayChu
0 Trả lời
386 Lượt xem
Bài mới Tháng Mười Một 27, 2018, 04:42:16 PM
gửi bởi CCNACCNP