Hi mọi người, hôm này mình sẽ hướng dẫn mọi người tạo thông báo có giao diện đơn giản dễ nhìn và làm đẹp cho nội dung thông báo để người đọc phân biệt ra đó là nội dung đặc biết của người viết cần lưu y.
Tiện ích này hoàn toàn đơn giản cho người mới bắt đầu, chỉ cần các bạn dán đoạn code CSS bên dưới vào trung khung <b:skin><![CDATA[ /* là được 80% rồi. Hoặc mọi người có thể để ở vị trí bất kỳ trong giao diện.

Chúng ta bắt đầu tới thủ thuật này nhé.

Bước 1. Thêm đoạn code sau vào sau <b:skin><![CDATA[ /*

.hung-note {
  position: relative !important;
  padding: 20px 20px 20px 50px !important;
  background: #e1f5fe !important;
  color: #01579b !important;
  font-size: 0.85rem !important;
  font-family: var(--fontB) !important;
  line-height: 1.6em !important;
  border-radius: 10px !important;
  overflow: hidden !important;
}
.hung-note:before {
  content: "" !important;
  width: 60px !important;
  height: 60px !important;
  background: #01579b !important;
  display: block !important;
  border-radius: 50% !important;
  position: absolute !important;
  top: -8px !important;
  left: -12px !important;
  opacity: 0.05 !important;
}
.hung-note:after {
  content: "\21F2" !important;
  position: absolute !important;
  left: 18px !important;
  top: 20px !important;
  font-size: 22px !important;
  min-width: 15px !important;
  text-align: center !important;
}

Bước 2. Ở trang bài viết bạn chỉ cần bỏ thêm đoạn code bên dưới này vào để hiển thị nội dung bạn muốn lưu ý trong bài viết.

<div class='hung-note'> NỘI DUNG BẠN MUỐN HIỂN THỊ </div>

Như vậy các bạn đã hoàn thành thủ thuật rồi, chúc các bạn thành công với thủ thuật trên.

DEMO THỦ THUẬT

DEMO THỦ THUẬT TẠI ĐÂY
MỌI NGƯỜI CÓ THỂ TÙY BIẾN GIAO DIỆN THÔNG BÁO THEO KHẢ NĂNG CỦA BẢN THÂN NHÉ.