Hướng dẫn các bạn Tạo thông báo Popup giữa mà hình blogspot sau một thời gian được cài đặt trước, trong quá trình truy cập trang web khoảng một thời gian sẽ hiển thị thông báo lên.
Các bước thực hiện như sau:
Đâu tiên blog phải được sử dụng thư viện jQuery, đa số blog nào cũng có, ngoại lệ nếu blog của bạn chưa có thì tự thêm vô.
Bước 1: Thêm CSS
.overlay{position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0.7);transition:opacity 500ms;visibility:hidden;opacity:0;display:none}
.overlayed{visibility:visible;opacity:1;display:block}
.popup{margin:70px auto;padding:20px;background:#fff;border-radius:5px;width:30%;position:relative;transition:all 5s ease-in-out}
.popup h2{margin-top:0;color:#333;font-family:Tahoma,Arial,sans-serif}
.popup .close{position:absolute;top:20px;right:30px;transition:all 200ms;font-size:30px;font-weight:bold;text-decoration:none;color:#333}
.popup .close:hover{color:#06D85F}
.popup .content{max-height:30%;overflow:auto}
@media screen and (max-width:700px){.popup{width:70%}}
Bước 2: Thêm HTML trước </body>
<div id="popup1" class="overlay">
<div class="popup">
<h2>Tôi là Hòa Trần</h2>
<a class="close" href="#">×</a>
<div class="content"> Người sáng lập trang web Giaodien.blog xin chào các bạn đã ghé thăm!</div>
</div>
</div>
Bước 3: Thêm đoạn jQuery như sau
<script>
$(document).ready(function() {
setTimeout(function() {
$('#popup1').addClass('overlayed');
}, 4000);
$("#popup1 a.close").click(function() {
$('#popup1').removeClass('overlayed');
});
});
</script>
Trong đó 4000 là 4 giây sẽ hiển thị thông báo, tùy các bạn chỉnh sửa, kết hợp thêm thẻ điều kiện áp dụng cho trang chủ hoặc bài viết.
Còn nội dung thì các bạn tự chỉnh sửa, như vậy là mình đã hướng dẫn các bạn Tạo thông báo Popup giữa mà hình blogspot.
Trước tiên mình xin cảm ơn tất cả khách hàng đã luôn tin tưởng và ủng hộ mình trong suốt thời gian qua (2016 tới hiện tại).
Nhằm nâng cao chất lượng phục vụ Quý khách hàng và hoàn thiện chất lượng như hỗ trợ, template. Hôm nay ngày 04/2/2021 mình là Hòa Trần admin trang Giaodien.blog sẽ tiến hành mở một trang Feedback để khách hàng đã mua, sử dụng dịch vụ bên mình toàn quyền nhận xét đánh giá công khai ở trang này.
Từ những Feedback này những gì mình làm được và chưa làm được, từ đó mình sẽ rút ra được những kinh nghiệm, và hoàn thiện tốt dịch vụ bên mình.
Quý khách hàng có thể để lại nhận xét reviews tại trang Feedback
Nhận xét
Đăng nhận xét