Tạo Hộp Thông Báo Dạng Classic Mỗi Lần Load Trang Cho Blogspot.
- 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'>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.
<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>
Đẹp lắm em <3 anh đã share lên Google Plus để ủng hộ em rồi đó
Trả lờiXóaThank you <3
XóaAnh mượn bài được không em
XóaTự nhiên a :)
XóaOk em hiih
Xóacảm ơn em
Trả lờiXóaKhông có gì a :)
XóaCái này nó làm khó chịu cho người dùng mobile lắm ôg
Trả lờiXóaTui nghĩ nên thêm thẻ cho nó ko hiển thị trên mobile
Đã Edit cảm ơn ông nhé <3
XóaOk
XóaH thì hay rồi đó ôg