Tạo Hộp Thông Báo Dạng Classic Mỗi Lần Load Trang Cho Blogspot.

tháng 6 02, 2018

- Dưới đây mình hướng dẫn mọi người cách tạo ra một hộp thông báo như trên.
- Mục đích tạo cái ra cái này là dùng để trang trí blog hay thông báo một vấn đề gì đó cho mọi người.
- Cách làm cũng khá là đơn giản với 3 bước:

Bước 1: Login Blogger => Chủ Đề => Edit HTML.

Bước 2: Dán Đoạn Code Phía Dưới Vào Trước </body>

<div class='tc_overlay'>
<div id='Tb-Huydz'><a class='close' href='#'>x</a>
<h3>Xin Thông Báo</h3>
<p style='text-align:center;'>Text text text text<br/><center>
<a href='/' target='_blank'>Text text text text</a></center></p>
</div>
</div>
<style> #Tb-Huydz .close{ float: right; font-size: 20px; font-weight: bold; line-height: 20px; right: 10px; top: 5px; color: #000; position: absolute; text-shadow: 0 1px 0 #fff; opacity: 0.2; filter: alpha(opacity=20); }
#Tb-Huydz .close:hover, #Tb-Huydz .close:focus{ color:#000; text-decoration:none; cursor:pointer; opacity:0.4; filter:alpha(opacity=40);}
#Tb-Huydz{ box-shadow: 0 0 12px rgba(0,0,0,0.1);position: fixed; width: 420px; background: white; top: 45%; z-index: 9999999999; left: 42%; margin-top: -120px; margin-left: -120px; padding: 25px 35px; border-radius: 10px; }
#Tb-Huydz h3{margin-bottom: 5px; background: #f9f9f9; text-align: center; border: 1px solid #ddd; border-radius: 25px;}
#Tb-Huydz p{margin: 10px 0; text-align: justify; font-size: 15px;}
#Tb-Huydz center a { background: #000; color: #fff; padding: 5px 10px 6px; }</style>
<script>
$(document).ready(function() {
$(".tc_overlay").toggleClass("tc_overlay"), $("#pop-toggle").click(function() {
$("#Tb-Huydz").toggle(), $(".tc_overlay").toggleClass("tc_overlay")
}), $(".close").click(function() {
$("#Tb-Huydz").toggle(), $(".tc_overlay").toggleClass("tc_overlay")
})
$('#Tb-Huydz').hide().show('slow').delay(10000).hide('slow');
});
</script>

Bước 3: Lưu Lại Và Tận Hưởng.

=> Nếu bạn chỉ muốn nó xuất hiện ở trang chủ thì thay thế đoạn code sau:

<b:if cond='data:blog.url == data:blog.homepageUrl'> <div class='tc_overlay'>
<div id='Tb-Huydz'><a class='close' href='#'>x</a>
<h3>Xin Thông Báo</h3>
<p style='text-align:center;'>Text text text text<br/><center>
<a href='/' target='_blank'>Text text text text</a></center></p>
</div>
</div>
<style> #Tb-Huydz .close{ float: right; font-size: 20px; font-weight: bold; line-height: 20px; right: 10px; top: 5px; color: #000; position: absolute; text-shadow: 0 1px 0 #fff; opacity: 0.2; filter: alpha(opacity=20); }
#Tb-Huydz .close:hover, #Tb-Huydz .close:focus{ color:#000; text-decoration:none; cursor:pointer; opacity:0.4; filter:alpha(opacity=40);}
#Tb-Huydz{ box-shadow: 0 0 12px rgba(0,0,0,0.1);position: fixed; width: 420px; background: white; top: 45%; z-index: 9999999999; left: 42%; margin-top: -120px; margin-left: -120px; padding: 25px 35px; border-radius: 10px; }
#Tb-Huydz h3{margin-bottom: 5px; background: #f9f9f9; text-align: center; border: 1px solid #ddd; border-radius: 25px;}
#Tb-Huydz p{margin: 10px 0; text-align: justify; font-size: 15px;}
#Tb-Huydz center a { background: #000; color: #fff; padding: 5px 10px 6px; }</style>
<script>
$(document).ready(function() {
$(".tc_overlay").toggleClass("tc_overlay"), $("#pop-toggle").click(function() {
$("#Tb-Huydz").toggle(), $(".tc_overlay").toggleClass("tc_overlay")
}), $(".close").click(function() {
$("#Tb-Huydz").toggle(), $(".tc_overlay").toggleClass("tc_overlay")
})
$('#Tb-Huydz').hide().show('slow').delay(10000).hide('slow');
});
</script> </b:if>

=> Vì chưa Responsize nên sẽ khó chịu với người dùng điện thoại, nếu bạn không thích nó hiển thị trên điện thoại thì bạn thêm code như sau:

<b:if cond='data:blog.isMobileRequest == "false"'> <div class='tc_overlay'>
<div id='Tb-Huydz'><a class='close' href='#'>x</a>
<h3>Xin Thông Báo</h3>
<p style='text-align:center;'>Text text text text<br/><center>
<a href='/' target='_blank'>Text text text text</a></center></p>
</div>
</div>
<style> #Tb-Huydz .close{ float: right; font-size: 20px; font-weight: bold; line-height: 20px; right: 10px; top: 5px; color: #000; position: absolute; text-shadow: 0 1px 0 #fff; opacity: 0.2; filter: alpha(opacity=20); }
#Tb-Huydz .close:hover, #Tb-Huydz .close:focus{ color:#000; text-decoration:none; cursor:pointer; opacity:0.4; filter:alpha(opacity=40);}
#Tb-Huydz{ box-shadow: 0 0 12px rgba(0,0,0,0.1);position: fixed; width: 420px; background: white; top: 45%; z-index: 9999999999; left: 42%; margin-top: -120px; margin-left: -120px; padding: 25px 35px; border-radius: 10px; }
#Tb-Huydz h3{margin-bottom: 5px; background: #f9f9f9; text-align: center; border: 1px solid #ddd; border-radius: 25px;}
#Tb-Huydz p{margin: 10px 0; text-align: justify; font-size: 15px;}
#Tb-Huydz center a { background: #000; color: #fff; padding: 5px 10px 6px; }</style>
<script>
$(document).ready(function() {
$(".tc_overlay").toggleClass("tc_overlay"), $("#pop-toggle").click(function() {
$("#Tb-Huydz").toggle(), $(".tc_overlay").toggleClass("tc_overlay")
}), $(".close").click(function() {
$("#Tb-Huydz").toggle(), $(".tc_overlay").toggleClass("tc_overlay")
})
$('#Tb-Huydz').hide().show('slow').delay(10000).hide('slow');
});
</script></b:if>

Lưu Ý Quan Trọng: Thời gian từ khi xuất hiện của hộp thông báo là 10000 mili giây tức là 10 giây. Nếu bạn muốn ít hoặc nhiều hơn hãy edit số 10000 được tô đỏ ở bước 2.

Demo--- Chúc Các Bạn Thành Công ---

Tìm kiếm Blog này

Hỗ trợ DealShaker