Tạo Khung Thông Báo Khi Ấn Vào Cho Bogspot

Khung thông báo là một yếu tố cần thiết để thông báo đến người dùng những thông tin quan trọng mà bạn muốn cung cấp cho họ, về các sự kiện, các dịp khuyến mãi, giảm giá từ website của mình đến người dùng. Giúp tăng tính chuyên nghiệp cho website của chúng ta hơn. Vì vậy bây giờ hãy cùng nhau theo dõi mình để thực hiện nhé.

Tạo Khung Thông Báo Khi Ấn Vào Cho Bogspot

Hướng Dẫn Cài Đặt

Bước 1: Hãy thêm đoạn css bên dưới vào ]]></b:skin hoặc bên trong thẻ <style> nhé
a.waves-light.close-sf{font-size:14px;color:#fff}
.blanternotif,.matilampu{visibility:hidden;opacity:0}
.blanternotif{background:#fff;position:fixed;padding:25px;top:15%;transition:all .3s ease-in-out;max-width:450px;left:35%;z-index:99;border-radius:4px;box-shadow:0 9px 46px 8px rgba(0,0,0,.14),0 11px 15px -7px rgba(0,0,0,.12),0 24px 38px 3px rgba(0,0,0,.2)}
.blanternotif button{border:none;position:absolute;margin-top:17px;right:30px;cursor:pointer;background:#e8e8e8;padding-left:7px;outline:0}
a.waves-light.close-sf{background:#3949ab;margin-top:15px;display:inline-block;padding:10px 13px;border-radius:3px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 3px 1px -2px rgba(0,0,0,.2),0 1px 5px 0 rgba(0,0,0,.12);float:right;text-transform:uppercase}
.matilampu{position:fixed;top:0;background:rgba(0,0,0,.59);left:0;right:0;bottom:0;margin:0;z-index:97;transition:all .4s ease-in-out}
.blantertitle{margin-bottom:15px}
.blanternotif.aktif,.matilampu.aktif{visibility:visible;opacity:1}
.blanternotif.aktif{top:20%}
.icx{position:absolute;top:10px;right:10px;background:url(https://3.bp.blogspot.com/-ku_TRSeCPD8/WYsWU06DseI/AAAAAAAAG4E/VykKXnkItQEO9GGCOBZjSCDXMVpgsg1mwCLcBGAs/s1600/mdclose.png)no-repeat;background-size:15px;margin:10px 8px;width:15px;height:15px}
.notiftext{font-size:14px;line-height:1.5}
@media screen and (max-width:768px){.blanternotif{left:10%;right:10%}}
Bước 2: Tiếp tục, hãy copy paste đoạn code bên dưới dán bên trên </body> nhé.
<div class='blanternotif'>
<div class='blantertitle'>Notification</div>
<div class='notiftext'>
JASMERAH (Jangan sekali-kali melupakan sejarah), Karena Bangsa yang besar adalah bangsa yang menghargai jasa para pahlawannya.</div>
<a class='waves-effect waves-light close-sf' href='javascript:;' title='Done'>Done</a>
<a class='waves-effect icx close-sf' href='javascript:;'></a>
</div>
<div class='matilampu'></div>
<script type='text/javascript'>
$(document).ready(function(){$(".close-sf").click(function(){$(".blanternotif,.matilampu").removeClass("aktif")})}),$(document).ready(function(){$(".shownotif").click(function(){$(".blanternotif,.matilampu").toggleClass("aktif")})});
</script>
Bước 3: Hãy dùng điền đoạn class='shownotif' vào bên trong thẻ gọi của bạn nhé

VD: <a class='shownotif' title='Test'> Thông Báo </a>

Hoặc bạn có thể đặt nó trong

<li><a class='shownotif' href='javascript:;' title='Notification'>Notification</a></li>


Để gắn vào Menu nhé.

Cuối cùng xin cảm ơn các bạn đã đọc bài nhé.
Demo

How To Download File :

Download Here

How To Download File :

Howktech

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!. Xem thêm về tôi

» Nhận Xét Của Bạn - Hãy Comment Lịch Sự Vì Bạn Có Hiểu Biết.

Loading...