Thêm Hộp Thông Báo Đẹp Mắt cho Blogger

Bạn có thể sử dụng các đoạn mã sau để thêm các hộp thông báo đẹp mắt vào trang web của mình. Các hộp thông báo này có thể dùng để hiển thị các thông điệp thành công, thông tin, cảnh báo hoặc lỗi.

Bước 1: Thêm HTML

Chèn đoạn mã HTML sau vào trang web của bạn:

<div class="notification success">

  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> 

  Đây là thông báo thành công!

</div>

<div class="notification info">

  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> 

  Đây là thông báo thông tin!

</div>

<div class="notification warning">

  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> 

  Đây là thông báo cảnh báo!

</div>

<div class="notification error">

  <span class="closebtn" onclick="this.parentElement.style.display='none';">×</span> 

  Đây là thông báo lỗi!

</div>

    

Bước 2: Thêm CSS

Thêm đoạn mã CSS sau vào phần <style> trong tệp HTML của bạn hoặc trong tệp CSS riêng:

.notification {

    padding: 15px;

    background-color: #f4f4f4;

    border-left: 6px solid #2196F3;

    margin-bottom: 15px;

}

.notification.success {

    border-color: #4CAF50;

}

.notification.info {

    border-color: #2196F3;

}

.notification.warning {

    border-color: #ff9800;

}

.notification.error {

    border-color: #f44336;

}

.closebtn {

    margin-left: 15px;

    color: #aaa;

    font-weight: bold;

    float: right;

    font-size: 22px;

    line-height: 20px;

    cursor: pointer;

    transition: 0.3s;

}

.closebtn:hover {

    color: black;

}

    

Kết luận

Đây là cách thêm hộp thông báo đẹp mắt vào trang web của bạn. Hy vọng bạn thấy bài viết này hữu ích. Hãy chia sẻ nếu bạn thấy thú vị. Nếu bạn có thắc mắc, hãy để lại bình luận.

Bài viết được dịch từ nguồn fineshopdesign.com