[Blogger] Tạo hộp thông báo của admin ẩn hiện cho blogspot

Trong quá trình vận hành website của mình, có đôi khi bạn cần gửi một thông báo nào đó tới người xem, và bạn không muốn người xem phải chuyển tab để đọc thông báo. Dialog ẩn hiện sẽ giúp bạn giải quyết vấn đề trên !

Tạo 1 button hoặc 1 thẻ a khi click vào sẽ hiện ra bảng thông báo vừa đảm bảo tính thẩm mỹ, vừa tăng tính chuyên nghiệp. Bạn có thể xem demo ngay tại đây

 DEMO
Giờ chúng ta bắt đầu thủ thuật, đăng nhập vào trang quản trị blogger và vào mục chỉnh sửa HTML

Tích hợp fontawesome nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </head>

<link href='//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' type='text/css'/>

Tích hợp JQuery nếu blog bạn chưa có, chèn đoạn mã sau trước thẻ đóng </head>

<script src='//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js' type='text/javascript'/>

Viết CSS, dán code sau vào trước thẻ ]]></b:skin>

/* Modal dialog by hung1001 */
.modal{display:none;position:fixed;z-index:100;left:0;top:0;width:100%;height:100%;overflow:auto;background-color:rgb(0,0,0);background-color:rgba(0,0,0,0.8)}
.modal-content{background-color:#fefefe;padding:20px;border:1px solid #888;width:50%;left:50%;top:50%;position:relative;-webkit-transform:translateX(-50%) translateY(-50%)!important;transform:translateX(-50%) translateY(-50%)!important}
.close{color:#000;float:right;font-size:28px;font-weight:bold;position:relative;top:-15px}
.close:hover,.close:focus{color:#000;text-decoration:none;cursor:pointer}
.myBtn{cursor:pointer}

Đặt đoạn jquery sau trước thẻ đóng </body>

<script>
    $(".myBtn").click(function() {
        $("#myModal").fadeIn(400).css({
            display: 'block'
        });;
    });
    $(".close").click(function() {
        $("#myModal").css("display", "none");
    });
</script>

Code HTML chứa lời nhắn gửi của bạn đặt trước thẻ đóng </body>

<div id="myModal" class="modal">
    <div class="modal-content">
        <span class="close">&times;</span>
        <p>Viết thông báo vào đây..</p>
    </div>
</div>

Cuối cùng sẽ là nút nhấn để hiển thị bảng thông báo

+ Dạng button

<button class="myBtn">Button mở thông báo</button>

+ Dạng liên kết

<a class="myBtn" href="javascript:void(0)">Liên kết mở thông báo</a>

+ Dạng icon

<a class="myBtn" href="javascript:void(0)"><i class="fa fa-bell"></i></a>

đặt nó ở bất cứ chỗ nào bạn thích

* Tùy chỉnh và fix class,id: nếu có bất kì id hoặc class nào ở trên trùng với template của bạn, hãy đổi sang tên khác để tránh xung đột. Code css của button, icon hoặc liên kết bạn tự code theo ý thích

Kết luận: Đây là 1 khung thông báo không quá cồng kềnh, nhẹ nhàng dễ thao tác và đặc biệt là responsive rất thích hợp cho website của bạn

Chúc thành công !