Tùy Biến Bài Đăng Phổ Biến (Popular Posts) Hiện Đại Cho Blogspot

Dành cho những bạn thích sự sạch sẽ. Không dùng viền thẻ khối, chỉ ngăn cách bằng đường kẻ mỏng và làm nổi bật số thứ tự mờ ở góc.

.PopularPosts ul { padding: 0; margin: 0; list-style: none; counter-reset: pop-num; } .PopularPosts ul li { display: flex; align-items: center; padding: 15px 0; border-bottom: 1px solid #e2e8f0; position: relative; counter-increment: pop-num; } .PopularPosts ul li:last-child { border-bottom: none; } .PopularPosts ul li::before { content: "0" counter(pop-num); position: absolute; right: 0; top: 5px; font-size: 40px; font-weight: 800; color: #f1f5f9; z-index: -1; } .PopularPosts .item-thumbnail { margin-right: 15px; } .PopularPosts .item-thumbnail img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .PopularPosts .item-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; } .PopularPosts .item-title a { color: #1e293b; text-decoration: none; } .PopularPosts ul li:hover .item-title a { color: #2563eb; text-decoration: underline; text-underline-offset: 4px; } .PopularPosts .item-snippet { display: none; }

Mẫu 2: Không Gian Mạng (Cyberpunk / Neon)

 Đặc biệt phù hợp với các blog công nghệ sử dụng nền tối (Dark Mode), tạo ấn tượng mạnh bằng viền sáng neon.

.PopularPosts ul { padding: 0; margin: 0; list-style: none; counter-reset: pop-num; gap: 15px; display: flex; flex-direction: column; } .PopularPosts ul li { display: flex; background: #0f172a; padding: 15px; border: 1px solid #334155; border-radius: 8px; counter-increment: pop-num; position: relative; transition: 0.3s; } .PopularPosts ul li:hover { border-color: #0ea5e9; box-shadow: 0 0 15px rgba(14, 165, 233, 0.4); } .PopularPosts ul li::before { content: "#" counter(pop-num); position: absolute; top: -10px; right: -10px; background: #0ea5e9; color: #fff; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; font-weight: bold; border-radius: 50%; box-shadow: 0 0 10px #0ea5e9; } .PopularPosts .item-thumbnail img { width: 70px; height: 70px; border-radius: 4px; border: 1px solid #334155; margin-right: 15px; } .PopularPosts .item-title a { color: #e2e8f0; font-weight: 600; text-decoration: none; } .PopularPosts ul li:hover .item-title a { color: #0ea5e9; } .PopularPosts .item-snippet { color: #94a3b8; font-size: 12px; margin-top: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

Mẫu 3: Dòng Thời Gian (Timeline Style) 

Liên kết các bài viết bằng một trục dọc bên trái, biến danh sách bài đăng thành một hành trình trôi chảy.

.PopularPosts ul { padding: 0 0 0 20px; margin: 0; list-style: none; counter-reset: pop-num; border-left: 2px solid #e2e8f0; } .PopularPosts ul li { position: relative; padding: 0 0 20px 20px; counter-increment: pop-num; } .PopularPosts ul li::before { content: counter(pop-num); position: absolute; left: -31px; top: 0; width: 24px; height: 24px; background: #2563eb; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; border: 4px solid #fff; } .PopularPosts ul li:hover::before { background: #ea580c; transform: scale(1.1); transition: 0.2s; } .PopularPosts .item-thumbnail img { width: 100%; height: auto; max-height: 120px; border-radius: 8px; margin-bottom: 10px; object-fit: cover; } .PopularPosts .item-title { font-size: 16px; font-weight: bold; margin-bottom: 5px; } .PopularPosts .item-title a { color: #334155; text-decoration: none; } .PopularPosts ul li:hover .item-title a { color: #2563eb; } .PopularPosts .item-snippet { font-size: 13px; color: #64748b; }

Mẫu 4: Nổi Khối 3D (Neumorphism) 

Sử dụng bóng đổ đa chiều tạo cảm giác phần tử nổi lên khỏi màn hình. Tối ưu nhất khi màu nền sidebar là xám nhạt (#e0e5ec).

.PopularPosts ul { padding: 0; margin: 0; list-style: none; counter-reset: pop-num; gap: 15px; display: flex; flex-direction: column; } .PopularPosts ul li { display: flex; padding: 15px; background: #e0e5ec; border-radius: 15px; box-shadow: 7px 7px 14px #a3b1c6, -7px -7px 14px #ffffff; counter-increment: pop-num; align-items: center; } .PopularPosts ul li::before { content: counter(pop-num); font-size: 24px; font-weight: bold; color: #9ba7b6; margin-right: 15px; width: 30px; text-align: center; } .PopularPosts .item-thumbnail img { width: 65px; height: 65px; border-radius: 10px; margin-right: 15px; } .PopularPosts .item-title a { color: #4b5563; font-weight: 600; text-decoration: none; font-size: 15px; } .PopularPosts .item-snippet { display: none; }

Mẫu 5: Viền Nhấn Trái (Left Border Accent) 

Thẻ bài viết phẳng, đường viền màu dày bên trái sẽ mở rộng và đổi màu khi người dùng tương tác.
.PopularPosts ul { padding: 0; margin: 0; list-style: none; counter-reset: pop-num; gap: 10px; display: flex; flex-direction: column; } .PopularPosts ul li { display: flex; padding: 12px; background: #fff; border-left: 4px solid #cbd5e1; box-shadow: 0 1px 3px rgba(0,0,0,0.1); counter-increment: pop-num; transition: 0.3s; align-items: center; } .PopularPosts ul li:hover { border-left: 8px solid #3b82f6; background: #f8fafc; } .PopularPosts .item-thumbnail img { width: 50px; height: 50px; border-radius: 4px; margin-right: 12px; } .PopularPosts .item-title a { color: #1e293b; font-weight: 600; font-size: 14px; text-decoration: none; } .PopularPosts ul li::after { content: counter(pop-num); margin-left: auto; font-size: 20px; font-weight: 800; color: #e2e8f0; } .PopularPosts .item-snippet { display: none; }

Mẫu 6: Hình Ảnh Lên Trên Cùng (Card Image Top)

 Biến danh sách thành cấu trúc lưới (Grid) kinh điển với ảnh hiển thị trọn vẹn ở nửa trên, nội dung ở nửa dưới.

.PopularPosts ul { padding: 0; margin: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 15px; } .PopularPosts ul li { background: #fff; border-radius: 10px; overflow: hidden; box-shadow: 0 4px 6px rgba(0,0,0,0.05); } .PopularPosts .item-thumbnail { margin: 0; width: 100%; height: 120px; } .PopularPosts .item-thumbnail img { width: 100%; height: 100%; object-fit: cover; } .PopularPosts .item-title { padding: 10px; font-size: 14px; text-align: center; } .PopularPosts .item-title a { color: #333; font-weight: 600; text-decoration: none; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .PopularPosts ul li:hover .item-title a { color: #f59e0b; } .PopularPosts .item-snippet { display: none; }

Mẫu 7: Hiệu Ứng Lật (Hover Reveal)

 Nhìn thoáng qua rất gọn gàng, nhưng khi rê chuột vào, đoạn trích dẫn sẽ trượt mở ra tạo tương tác thú vị.

.PopularPosts ul { padding: 0; margin: 0; list-style: none; gap: 10px; display: flex; flex-direction: column; } .PopularPosts ul li { display: flex; flex-direction: column; background: #fff; padding: 15px; border-radius: 8px; border: 1px solid #e2e8f0; transition: 0.3s; } .PopularPosts ul li:hover { box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); } .PopularPosts .item-content { display: flex; align-items: center; } .PopularPosts .item-thumbnail img { width: 60px; height: 60px; border-radius: 6px; margin-right: 15px; } .PopularPosts .item-title a { color: #1e293b; font-weight: 600; text-decoration: none; font-size: 15px; } .PopularPosts .item-snippet { max-height: 0; opacity: 0; overflow: hidden; font-size: 13px; color: #64748b; transition: all 0.4s ease; margin-top: 0; } .PopularPosts ul li:hover .item-snippet { max-height: 100px; opacity: 1; margin-top: 10px; }

Mẫu 8: Khối Màu Bùng Nổ (Solid Block Colors) 

Sử dụng các khối màu nền đồng nhất xen kẽ. Rất phù hợp với các blog giải trí hoặc sáng tạo.

.PopularPosts ul { padding: 0; margin: 0; list-style: none; gap: 10px; display: flex; flex-direction: column; } .PopularPosts ul li { padding: 15px; border-radius: 8px; display: flex; align-items: center; background: #3b82f6; transition: 0.3s; } .PopularPosts ul li:nth-child(even) { background: #10b981; } .PopularPosts ul li:nth-child(3n) { background: #f59e0b; } .PopularPosts ul li:hover { filter: brightness(1.1); transform: scale(1.02); } .PopularPosts .item-thumbnail img { width: 55px; height: 55px; border-radius: 50%; margin-right: 15px; border: 2px solid rgba(255,255,255,0.5); } .PopularPosts .item-title a { color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; } .PopularPosts .item-snippet { display: none; }

Mẫu 9: Cổ Điển Góc Cạnh (Brutalism) 

Xu hướng Brutalism thô mộc với viền đen đặc, đổ bóng cứng và ảnh chuyển xám, đổi màu khi hover.

.PopularPosts ul { padding: 0; margin: 0; list-style: none; gap: 15px; display: flex; flex-direction: column; } .PopularPosts ul li { display: flex; background: #fff; border: 2px solid #000; padding: 12px; box-shadow: 4px 4px 0 #000; transition: 0.2s; align-items: center; } .PopularPosts ul li:hover { transform: translate(4px, 4px); box-shadow: 0 0 0 #000; background: #fef08a; } .PopularPosts .item-thumbnail img { width: 60px; height: 60px; border: 2px solid #000; margin-right: 15px; filter: grayscale(100%); transition: 0.2s; } .PopularPosts ul li:hover .item-thumbnail img { filter: grayscale(0%); } .PopularPosts .item-title a { color: #000; font-weight: 800; text-transform: uppercase; font-size: 14px; text-decoration: none; } .PopularPosts .item-snippet { display: none; }

Mẫu 10: Kính Mờ (Glassmorphism) 

Cực kỳ đẹp mắt nếu Sidebar của bạn đang sử dụng hình nền (background image) có hoa văn hoặc màu gradient gradient xuyên thấu.

.PopularPosts ul { padding: 0; margin: 0; list-style: none; gap: 12px; display: flex; flex-direction: column; } .PopularPosts ul li { display: flex; padding: 15px; background: rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 12px; align-items: center; } .PopularPosts ul li:hover { background: rgba(255, 255, 255, 0.4); } .PopularPosts .item-thumbnail img { width: 60px; height: 60px; border-radius: 8px; margin-right: 15px; } .PopularPosts .item-title a { color: #1e293b; font-weight: bold; font-size: 15px; text-decoration: none; } .PopularPosts .item-snippet { color: #475569; font-size: 12px; margin-top: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }