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

Result

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKfwryF2Aok_dhGPBQuFjIBnubHAf_V_9v8SN7RKNJwvLkV3UKnIhCjphVW-cBo10VkSQO_u6qQHlx6T50q8RngR1M3mi7SRoAdkilmlVsSiyBvnb7qguyJiK1DQnf8NhcVgo8tZiaTQM/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