Cách thêm hộp thoại cảnh báo đẹp mắt trong bài đăng/trang của Blogger

Xin chào, Chào mừng các bạn đến với Anh Tuấn Blog. Đôi khi chúng ta cần các hộp cảnh báo để làm nổi bật một số thông tin nhưng những hộp cảnh báo này không có trong mọi mẫu, vì vậy không có gì phải lo lắng vì hôm nay trong bài đăng này, chúng ta sẽ tìm hiểu cách thêm các hộp cảnh báo trong blogger.

Hộp cảnh báo được sử dụng khi bạn cần một số thông tin để tiếp cận người dùng. Các hộp này được sử dụng để thông báo cho người dùng về các loại tin nhắn khác nhau, chẳng hạn như: Cảnh báo, Cập nhật, Thông báo, Lỗi, Thành công, v.v.

Cách thêm hộp thoại cảnh báo đẹp mắt trong bài đăng/trang của Blogger

Làm cách nào để thêm hộp cảnh báo trong Blogger?

Bạn phải sử dụng Code CSS và HTML để thêm hộp cảnh báo trong blogger. Chúng tôi đã đưa ra cả hai Code dưới đây và giải thích tốt. Vì vậy, hãy làm theo các bước đó và tìm hiểu cách thêm hộp cảnh báo vào blog của bạn.

Bước 1. Thêm Code CSS

Thêm các Code CSS sau ngay phía trên thẻ ]]></b:skin> này.

/*Alert Box by Ngohoanganhtuan.net*/
.avbox{
background-color:#e9ebee;
color: #58606B;
padding:10px;
margin:20px 0px;
border:1px solid #dddfe2;
border-radius:5px;
}
.avbox a{
  color: #1E2326;
  font-weight: bold;
}
.avbox.sucess{
color:#145724;
background-color:#d4edda;
border:1px solid #c3e6cb;
}
.avbox.sucess a{
  color: #0A2E12;
  font-weight: bold;
}
 .avbox.primary{
color:#014286;
background-color:#CBE5FE;
border:1px solid #b8daff;
}
.avbox.primary a{
    color: #0A315A;
    font-weight: bold;
}
 .avbox.danger{
color:#7A2930;
background-color:#f8d7da;
border:1px solid #f5c6cb;
}
.avbox.danger a{
  color: #491217;
  font-weight: bold;
}
 .avbox.warning{
color:#856404;
background-color:#fff3cd;
border:1px solid #ffeeba;
}
.avbox.warning a{
  color: #554104;
  font-weight: bold;
}

Bước 2. Thêm Code HTML

Bây giờ sao chép và dán Code của hộp cảnh báo nơi bạn muốn thêm.

Đây là hộp cảnh báo mặc định.
Đây là một hộp cảnh báo thành công.
Đây là hộp cảnh báo chính.
Đây là một hộp cảnh báo nguy hiểm.
Đây là hộp cảnh báo cảnh báo.
Định dạng viết Code:
<div class='avbox'>Đây là một hộp cảnh báo mặc định.</div>
<div class='avbox sucess'>Đây là một hộp cảnh báo thành công.</div>
<div class='avbox primary'>Đây là một hộp cảnh báo chính.</div>
<div class='avbox danger'>Đây là một hộp cảnh báo nguy hiểm.</div>
<div class='avbox warning'>Đây là một hộp cảnh báo cảnh báo.</div>
Hộp Cảnh báo có Liên kết

Nếu bạn muốn thêm liên kết trong hộp cảnh báo, hãy sử dụng Code bên dưới

Đây là cảnh báo mặc định với một liên kết ví dụ.
Đây là cảnh báo mặc định với một liên kết ví dụ.
Đây là cảnh báo mặc định với một liên kết ví dụ.
Đây là cảnh báo mặc định với một liên kết ví dụ.
Đây là cảnh báo mặc định với một liên kết ví dụ.
Định dạng viết Code:

<div class='avbox'>Đây là cảnh báo mặc định với một <a href='#'>liên kết ví dụ</a></div>
<div class='avbox sucess'>Đây là một cảnh báo thành công với một <a href='#'>liên kết ví dụ</a></div>
<div class='avbox primary'>Đây là cảnh báo chính với một <a href='#'>liên kết ví dụ</a></div>
<div class='avbox danger'>Đây là một cảnh báo nguy hiểm với một <a href='#'>liên kết ví dụ</a></div>
<div class='avbox warning'>Đây là một cảnh báo cảnh báo với một <a href='#'>liên kết ví dụ</a></div>

Click To Download

Vì vậy, đây là tất cả về việc thêm các hộp cảnh báo trong blogger. Tôi hy vọng bạn không gặp bất kỳ vấn đề gì khi thêm hộp cảnh báo.

Nếu bạn thấy bài viết này hữu ích, hãy chia sẻ nó và đừng quên cho chúng tôi phản hồi của bạn trong phần bình luận. Một phản hồi của bạn truyền cảm hứng để chúng tôi viết thêm nhiều hướng dẫn hay như vậy

Reference:
AS Themes World