Thành công!
TRUCBLOG JOURNAL GÓC ĐỌC • GÓC VIẾT
Bài viết / Góc chia sẻ
Blogspot CSS

Thêm hiệu ứng trượt đẹp mắt cho nhãn Blogspot

Đỗ Trực tháng 12 31, 2018 2 phút đọc 0 bình luận … Lượt xem


Hôm nay trên mình sẽ hướng dẫn các bạn làm mới tiện ích Nhãn bài đăng (Tags/Labels) theo phong cách phẳng hiện đại. Đoạn CSS được mình viết hoàn toàn bằng CSS thuần (Flexbox) siêu nhẹ để tối ưu điểm PageSpeed. Hiệu ứng hover trượt hiển thị số lượng bài viết hoạt động mượt mà và trơn tru hơn rất nhiều. Nào hãy cùng thực hiện nào các bạn


Ảnh minh họa

Cách thực hiện

Bước 1: Chèn CSS tạo kiểu và hiệu ứng

Vào Chủ đề (Theme) > Chỉnh sửa HTML (Edit HTML). Nhấn Ctrl + F tìm thẻ ]]></b:skin> và dán toàn bộ đoạn mã Flexbox dưới đây vào ngay phía trên nó. Bạn có thể tự do thay đổi mã màu ở các dòng background hay color để tiệp với tông màu chủ đạo của blog.

/* =========================================
   CSS TỐI ƯU NHÃN BÀI ĐĂNG (LABELS) - Trực Blog
   ========================================= */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none !important;
}

.tags li {
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Nút nhãn mặc định */
.tags a {
  display: inline-flex;
  align-items: center;
  background: #f8fafc;
  color: #334155;
  font-size: 14px;
  text-decoration: none;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 6px 12px;
  position: relative;
  transition: all 0.3s ease;
  overflow: hidden;
}

/* Hiệu ứng khi di chuột (Hover) */
.tags a:hover {
  border-color: #2563eb;
  background: #eff6ff;
  color: #2563eb;
  box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.1);
  transform: translateY(-2px);
}

/* Số lượng bài đăng (Mặc định ẩn) */
.tags a .label-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #2563eb;
  color: #ffffff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  max-width: 0;
  opacity: 0;
  padding: 0;
  margin-left: 0;
  transform: translateX(-10px);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  white-space: nowrap;
}

/* Trượt số lượng bài đăng ra khi Hover */
.tags a:hover .label-count {
  max-width: 40px;
  opacity: 1;
  padding: 2px 8px;
  margin-left: 8px;
  transform: translateX(0);
}

Bước 2: Kích hoạt class cho thẻ UL

Vẫn trong bảng mã HTML, hãy tìm đến đoạn code chứa cấu trúc của tiện ích Nhãn (Label widget). Hãy tìm kiếm dòng code sau:<div expr:class='"widget-content " + data:display + "-label-widget-content"'>

Ngay bên dưới nó khoảng 2 dòng, bạn sẽ thấy thẻ <ul>. Hãy đổi nó thành:<ul class='tags'>

Bước 3: Nhúng số đếm vào bên trong thẻ liên kết

Mặc định, Blogspot đặt số đếm bài viết nằm ngoài thẻ <a>, khiến hiệu ứng hover không thể lấy được dữ liệu. Bạn cần đưa nó vào trong. Tiếp tục tìm dòng mã sau: 

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'><data:label.name/></a>

Và thay thế toàn bộ dòng đó thành:

<a expr:dir='data:blog.languageDirection' expr:href='data:label.url'>
  <data:label.name/>
  <span class='label-count' dir='ltr'>(<data:label.count/>)</span>
</a>

Lưu mẫu giao diện lại và ra trang chủ tải lại trang để tận hưởng thành quả tiện ích nhãn trượt cực kỳ chuyên nghiệp này nhé.

Chúc thành công.
Chia sẻ bài viết:
Ảnh đại diện tác giả

Đỗ Trực Tác giả / Admin

Chia sẻ kiến thức lập trình, phát triển web, công nghệ và các thủ thuật thực tế. Cảm ơn bạn đã ghé thăm Truc Blog.

Trang chủ Email Zalo WhatsApp

Thảo Luận & Nhận Xét (0)