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.
Nhận xét
Đăng nhận xét