Thủ thuật Blogspot bật thông báo sử dụng Popup hiển thị 1 lần trong ngày khi người dùng vào xem blog.

Popup được xem là 1 dạng quảng cáo do đó, khi Popup bật lên " người dùng " thường có cảm giác khó chịu và thường " Tắt nó ngay ". Tuy nhiên Popup cũng là cách giúp chủ Blog tạo thông báo truyền tải nội dung đến độc giả thân yêu trên Web/Blog của mình như thông báo quà tặng, đăng ký email,....

Hôm nay Gia Bảo Chia sẻ thủ thuật blogspot khá thú vị hướng dẫn sử dụng phương thức bật thông báo bằng kỹ thuật code Popup chỉ hiển thị đúng 1 lần trong 1 ngày giúp Chủ blog hiển thị thông tin "hot / nổi bật " kết nối thông tin người đọc và người viết blog.

#Popup thông báo hiển thị 1 lần bằng hình ảnh : ( Dạng thông báo này phù hợp với các bạn có khả năng thiết kế đồ họa quảng cáo đẹp, mịn, xịn.

<script>
        var link_image = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhEAKzWt4lfpoAeqV-nq64ZhdprkwR-NfsLlmCVQBO3QCb2QRypD2PjR6Ahha0NfPnqKQ5ADcGw9uC0kTumtilJjCYvUT1sC2smPw4uPZkfM8b751Afpn0Ltu_5joYiiwsCxf5Syi1o98w/s600/BlogGiaBao-popup600x250.png';
        var link = 'https://www.digitalnomad.vn/search/label/Marketing';
        var icon_close = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh10cmkQvPhg_cIHMImeG6FGCvwhcpc-wHfEOfY5CncTPzl9PN3OHMqw_khNxqyO0GlOIetXb1PaDVQtCeMXFBFqV2HwQ01eyM6c0Edr1MQX4dLjrdasvf_fA7wpV-EmLT-c3OqIOZx8nvB/s1600/clock-icon.png';
        function closePopupBeta(){document.getElementById("popup_banner_beta").remove(),setCookie("showPopupBannerBeta",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("showPopupBannerBeta")&&(document.addEventListener("DOMContentLoaded", function(event) { var e='<div id="popup_banner_beta"><div onclick="closePopupBeta()" class="mask_popup_banner_beta"></div><div class="content_popup_banner_beta"><img src="'+icon_close+'" class="close_icon" onclick="closePopupBeta()" alt="Close Image"><a href="'+link+'"><img src="'+link_image+'" alt="Image Popup Banner"/></a></div></div>';setTimeout(function(){document.body.innerHTML+=e},3000)}));
    </script>
    <style>
        #popup_banner_beta{position:fixed;width:100%;height:100vh;z-index:99999;top:0;left:0}.mask_popup_banner_beta{background:rgba(0,0,0,.38);cursor:pointer;position:absolute;width:100%;height:100vh;top:0;z-index:9;left:0}.content_popup_banner_beta{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%)}.close_icon{position:absolute;top:-70px;right:-60px;width:70px;cursor:pointer}@media only screen and (max-width:480px){.content_popup_banner_beta{width:300px}.content_popup_banner_beta a img:nth-of-type(1){width:100%}.close_icon{top:-60px;right:-20px;width:50px}}
    </style>

#Popup thông báo chỉ hiển thị 1 Lần dạng Text : Gia Bảo thích dạng quảng cáo này dễ tùy biến kiểu thông báo đa dạng phong cách.

Popup 1 lần dạng Text mẫu 1 - Cực Đẹp :

<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>

<style>
.shorcodePopUp1LanBlogGiaBao{display:block;overflow:hidden;padding:5px 10px 5px 5px;background:#f8f8f8;border:1px solid #f89406;border-radius:8px;margin:5px auto;max-width:650px;box-sizing:border-box;box-shadow:0 2px 6px rgba(0,0,0,.1);position:relative}
.shorcodePopUp1LanBlogGiaBao:after{content:"";width:5px;height:5px;border-top:1px solid #f89406;border-right:1px solid #f89406;transform:rotate(45deg);position:absolute;right:10px;bottom:50%}
.shorcodePopUp1LanBlogGiaBao .detail-content .shorcodePopUp1LanBlogGiaBao .img{float:left;width:100px;border-radius:8px;margin:0 30px 0 0}.detail-content .shorcodePopUp1LanBlogGiaBao img{width:100%;height:auto;border-radius:10px}
.shorcodePopUp1LanBlogGiaBao .inforPopUp1LanBlogGiaBao{display:block;overflow:hidden}
.shorcodePopUp1LanBlogGiaBao .inforPopUp1LanBlogGiaBao strong{display:block;overflow:hidden;font-size:16px;color:#333;line-height:155%}
.shorcodePopUp1LanBlogGiaBao .inforPopUp1LanBlogGiaBao span{display:block;overflow:hidden;font-size:12px;color:#666;padding:5px 0}
.shorcodePopUp1LanBlogGiaBao .inforPopUp1LanBlogGiaBao span.publisherPopUp1LanBlogGiaBao{padding:2px 0}
.shorcodePopUp1LanBlogGiaBao .inforPopUp1LanBlogGiaBao span.publisherPopUp1LanBlogGiaBao b{color:#288ad6}
.shorcodePopUp1LanBlogGiaBao .inforPopUp1LanBlogGiaBao span.hasfeePopUp1LanBlogGiaBao{color:#fff;background:#07a358;border-radius:4px;padding:1px 5px;font-size:13px;margin-right:6px;display:inline-block;vertical-align:middle}
.shorcodePopUp1LanBlogGiaBao .inforPopUp1LanBlogGiaBao span.hasfeePopUp1LanBlogGiaBao.fee{background:#eb5757}
.shorcodePopUp1LanBlogGiaBao .inforPopUp1LanBlogGiaBao span.catenamePopUp1LanBlogGiaBao{display:inline-block;vertical-align:middle;font-size:13px;line-height:155%}
.shorcodePopUp1LanBlogGiaBao .inforPopUp1LanBlogGiaBao span.commentcount,.shorcodePopUp1LanBlogGiaBao .inforPopUp1LanBlogGiaBao span.viewcountPopUp1LanBlogGiaBao{display:inline-block;vertical-align:middle;margin-right:15px;padding:0}
.shorcodePopUp1LanBlogGiaBao .inforPopUp1LanBlogGiaBao span.commentcount i{display:inline-block;vertical-align:middle;margin:0 3px -1px 0}
.shorcodePopUp1LanBlogGiaBao .inforPopUp1LanBlogGiaBao span.viewcountPopUp1LanBlogGiaBao i{display:inline-block;vertical-align:middle;margin:0 3px 3px 0}.shorcodePopUp1LanBlogGiaBao .ratingresult{display:inline-block;vertical-align:middle;margin-right:15px}
.shorcodePopUp1LanBlogGiaBao .ratingresult p{display:inline-block;vertical-align:middle;font-size:12px;color:#666;padding:0;width:unset;margin-right:5px;margin-top:3px}
.shorcodePopUp1LanBlogGiaBao .ratingresult span{display:inline-block;vertical-align:middle;margin-right:3px}
.shorcodePopUp1LanBlogGiaBao .ratingresult span:last-child{margin-right:3px;padding:0;margin-top:2px}
.shorcodePopUp1LanBlogGiaBao .ratingresult span i{display:block}
.shorcodePopUp1LanBlogGiaBao .ratingresult span.star .icontgdd-star{background-position:-295px -30px}
.shorcodePopUp1LanBlogGiaBao .ratingresult
.detail-content .shorcodePopUp1LanBlogGiaBao .ratingresult .img{display:inline-block;vertical-align:middle;width:15px !important;height:15px;float:unset;margin:0 3px 0 0}
.detail-content .shorcodePopUp1LanBlogGiaBao .ratingresult .img img{border-radius:unset}
</style>

<script>
var text = '<div class="shorcodePopUp1LanBlogGiaBao"><div><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaQxq6ww6IKziBofqYGB0ohiYzmSOiecyq7ftSkZKKXUypYBpLNZylCxwnj62Z_uGPPDMRvD3RGk7HMZTrkcZV56ka6bH8YEcI6HnGPGy_S_3yfEgpiHYs2jFaLqtA2dJrJjgHTwZpCE8/s1600/Logo-Blog-Gia-Bao300.png" style="float:left;width:25px;margin:0 2px"/></div><div class="inforPopUp1LanBlogGiaBao" style="text-align: justify"><strong class="titlePopUp1LanBlogGiaBao" style="font-size: 14px;color:blue">#CHÀO MỪNG BẠN ĐẾN VỚI BLOG GIA BẢO !</strong><b style="font-size: 12.5px;text-align: justify;line-height: normal;">Hỗ Trợ Giải Pháp Marketing, Giúp Doanh Nghiệp và Cá Nhân Kinh Doanh Bán Hàng Online Gia Tăng Doanh Số & Lợi Nhuận</b><br/><span class="publisherPopUp1LanBlogGiaBao" style="font-size: 12.5px;text-align: justify;"><b style="color:black">➠ Gia Bảo Blog là nơi giới thiệu sản phẩm cho doanh nghiệp kinh doanh sản xuất : Thớt gỗ, Gỗ ghép, Ván Mdf, Plywood...</b><b style="font-size: 14.5px;color:red"> Bạn cần mua </b><a href="https://www.digitalnomad.vn/search/label/Nam%20Trung%20JSC"><b style="color:#fff;background:#07a358;border-radius:4px;padding:1px 5px;font-size:15px;margin-right:6px;display:inline-block;vertical-align:middle">Click Here</b></a></span><span class="publisherPopUp1LanBlogGiaBao" style="font-size: 12.5px;text-align: justify;"><b style="color:black">➠ Gia Bảo Blog trợ thủ đắc lực trong việc quảng bá thương hiệu, giới thiệu sản phẩm, dịch vụ giúp gia tăng doanh số và lợi nhuận cho doanh nghiệp.</b><b style="font-size: 14.5px;color:red"> Bạn quan tâm </b><a href="https://www.digitalnomad.vn/search/label/Marketing"><b style="color:#fff;background:#07a358;border-radius:4px;padding:1px 5px;font-size:15px;margin-right:6px;display:inline-block;vertical-align:middle">Click Here</b></a></span><span class="publisherPopUp1LanBlogGiaBao" style="font-size: 12.5px;text-align: justify;"><b style="color:black">➠ Gia Bảo Blog không phải cửa hàng kinh doanh bán hàng online mà là nơi giới thiệu nhà cung cấp, giải pháp, thông tin hữu ích nhằm giúp người đọc chọn mua hàng đúng chất lượng với giá tốt nhất.</b><b style="font-size: 14.5px;color:red"> Bạn quan tâm </b><a href="https://www.digitalnomad.vn/search/label/%C4%90i%20Ch%E1%BB%A3%20T%E1%BA%A1i%20Nh%C3%A0"><b style="color:#fff;background:#07a358;border-radius:4px;padding:1px 5px;font-size:15px;margin-right:6px;display:inline-block;vertical-align:middle"> Click Here</b></a></span></div></div>';
        var icon_close = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh10cmkQvPhg_cIHMImeG6FGCvwhcpc-wHfEOfY5CncTPzl9PN3OHMqw_khNxqyO0GlOIetXb1PaDVQtCeMXFBFqV2HwQ01eyM6c0Edr1MQX4dLjrdasvf_fA7wpV-EmLT-c3OqIOZx8nvB/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>

Popup 1 lần dạng Text Mẫu 2 :

<script>

var text = '<div style="font-size: 12.5px;margin: 2.5px;background: white;padding: 5.5px 8px !important;border-radius: 4px;border: 1px solid #ccc;border-radius: 3px;text-align: justify;"><p><b style="color :blue;font-size: 14.5px;">#CHÀO MỪNG BẠN ĐẾN VỚI BLOG GIA BẢO !</b></p><p><b>➠ Gia Bảo Blog là nơi giới thiệu sản phẩm cho doanh nghiệp kinh doanh sản xuất :</b><b style="color :black"> Thớt gỗ, Gỗ ghép, Ván Mdf, Plywood...</b> <b style="color :red">Bạn cần mua</b> <a href="https://www.digitalnomad.vn/search/label/Nam%20Trung%20JSC"><b style="color :blue">Click Here</b></a><br/><b>➠ Gia Bảo Blog trợ thủ đắc lực trong việc quảng bá thương hiệu, giới thiệu sản phẩm, dịch vụ giúp gia tăng doanh số và lợi nhuận cho doanh nghiệp.</b> <b style="color :red">Bạn quan tâm</b> <a href="https://www.digitalnomad.vn/search/label/Marketing"><b style="color :blue">Click Here</b></a><br/>➠ <b style="color :black;">Gia Bảo Blog chuyên trang giới thiệu nhà cung cấp, giải pháp, thông tin hữu ích nhằm giúp người đọc chọn mua hàng đúng chất lượng với giá tốt nhất, Gia Bảo Blog không phải cửa hàng kinh doanh bán hàng online.</b></p></div>';

Bạn có thể tạo thêm mẫu thông báo bằng cách thay thế đoạn code màu đỏ phía trên bằng đoạn code màu xanh phía dưới vào vị trí var text = : 'đoạn code thay thế'.

<div style="background: rgb(255, 233, 233) none repeat scroll 0% 0%; border-color: rgb(251, 196, 196); border-image: none; border-radius: 2px; border-style: solid; border-width: 1px; border: 1px solid rgb(251, 196, 196); box-sizing: border-box; color: red; float: none; font-family: Arial,sans-serif; font-size: 16px; margin: 0px auto; outline: 0px none; padding: 15px 20px; text-align: justify; vertical-align: baseline;"><b> #CHÀO MỪNG BẠN ĐẾN VỚI BLOG GIA BẢO</b><p>Blog là nơi giới thiệu sản phẩm cho doanh nghiệp sản xuất :</p><li style="background: transparent none repeat scroll 0% 0%; border-color: currentcolor; border-image: none; border-style: none; border-width: 0px; border: 0px; box-sizing: initial; list-style: outside none disc; margin: 5px 0px; outline: 0px none; padding: 0px; vertical-align: baseline;">Thớt gỗ, Gỗ ghép, Ván Mdf, Plywood...<font color="#001e6f">Bạn cần mua </font><b><a href="https://www.digitalnomad.vn/search/label/Nam%20Trung%20JSC" target="_blank"> Click Here</a></b></li><li style="background: transparent none repeat scroll 0% 0%; border-color: currentcolor; border-image: none; border-style: none; border-width: 0px; border: 0px; box-sizing: initial; list-style: outside none disc; margin: 5px 0px; outline: 0px none; padding: 0px; vertical-align: baseline;">Gia Bảo Blog trợ thủ đắc lực trong việc quảng bá thương hiệu, giới thiệu sản phẩm, dịch vụ giúp gia tăng doanh số & lợi nhuận cho doanh nghiệp.<font color="#001e6f"> Bạn quan tâm </font><b><a href="https://www.digitalnomad.vn/search/label/Marketing" target="_blank"> Click Here</a></b></li><li style="background: transparent none repeat scroll 0% 0%; border-color: currentcolor; border-image: none; border-style: none; border-width: 0px; border: 0px; box-sizing: initial; list-style: outside none disc; margin: 5px 0px; outline: 0px none; padding: 0px; vertical-align: baseline;">Gia Bảo Blog giới thiệu nhà cung cấp, giải pháp, thông tin hữu ích nhằm giúp người đọc chọn mua hàng đúng chất lượng với giá tốt nhất, Gia Bảo Blog không phải cửa hàng kinh doanh bán hàng online. </li></div>

#Popup hiển thị 1 lần dạng Form đăng ký ( Email, Like Facebook,... ) :