Hiển thị ảnh thumbnail của bài viết bất kỳ trên tiện ích Popularposts của blogger

Như các bạn đã biết trong tiện ích Bài đăng phổ biến (Popularposts) của blogger có chức năng giúp bạn cho phép hiện thị ảnh thu nhỏ của bài viết. Tuy nhiên nó có nhược điểm là nó hiển thị toàn bộ hình ảnh của tất cả các bài đăng trong blogspot của bạn. Vậy vấn đề đặt ra ở đây là bạn chỉ muốn một bài nhất định hiển thị hình ảnh như chỉ muốn hiển thị ảnh của bài viết đầu tiên, hay chỉ hiển thị hình ảnh của bài viết cuối cùng trong tiện ích bài đăng phổ biến.

(Ảnh minh họa chỉ hiển thị ảnh thu nhỏ của bài viết đầu tiên trong tiện ích Popularposts của blogspot)

Bài viết này mình sẽ hướng dẫn bạn làm điều đó chỉ với một đoạn CSS nhỏ. Các bạn có thể yên tâm vì nó không làm ảnh hưởng đến tốc độ trang của bạn vì nó hoàn toàn từ CSS đơn giản thôi mà.

☼ Cách để hiển thị hình ảnh thu nhỏ (thumbnail) của bài viết bất kỳ trong tiện ích Popularposts của blogspot.

1. Đăng nhập vào blog.

2. Chọn mẫu (template)

3. Chọn Chỉnh sửa HTML (Edit HTML)

4. Dán đoạn mã bên dưới vào trước thẻ ]]></b:skin> trong mẫu của bạn:

/* Only show thumbnail ramdon post in popularposts of blogger http://namkna.blogspot.com/ */
/* thumbnail 1 */
#PopularPosts1 ul li:first-child .item-thumbnail{display:none}
/* Thumbnail 2 */
#PopularPosts1 ul li:first-child + li .item-thumbnail{display:none}
/* Thumbnail 5 */
#PopularPosts1 ul li:first-child + li + li + li + li .item-thumbnail{display:none}
/* Thumbnail 3 */
#PopularPosts1 ul li:first-child + li + li .item-thumbnail{display:none}
/* Thumbnail 4 */
#PopularPosts1 ul li:first-child + li + li + li .item-thumbnail{display:none}
/* thumbnail 6 */
#PopularPosts1 ul li:first-child + li + li + li + li +li .item-thumbnail{display:none}
/* thumbnail 7 */
#PopularPosts1 ul li:first-child + li + li + li + li + li +li .item-thumbnail{display:none}
/* thumbnail 8 */
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li .item-thumbnail{display:none}
/* thumbnail 9 */
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li .item-thumbnail{display:none}
/* thumbnail 10 */
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li .item-thumbnail{display:none}

» Tùy chỉnh code.

- Trong đoạn code trên mình đã đánh dấu vị trí hình ảnh của từng vị trí ảnh thumbnail. Nếu bạn muốn hiển thị ảnh thumbnail nào hiển thị thì bạn chỉ cần xóa đoạn đó đi là được.

- Ví dụ bạn muốn chỉ hiển thị ảnh thumbnail của bài viết đầu tiên trong tiện ích popularposts thì bạn xóa đoạn.

/* thumbnail 1 */
#PopularPosts1 ul li:first-child .item-thumbnail{display:none}

- Nếu bạn muốn chỉ thiện thị ảnh thu nhỏ thumbnail của bài viết cuối cùng trong tiện ích Popularposts thì bạn xóa đoạn thứ 10 như bên dưới:

/* thumbnail 10 */
#PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li .item-thumbnail{display:none}

- Nếu bạn muốn chỉ hiện thị hình ảnh thumbnail của bài viết thứ 3 từ trên xuống trong tiện ích Popularposts thì bạn xóa đoạn thứ 3 như bên dưới:

/* Thumbnail 3 */
#PopularPosts1 ul li:first-child + li + li .item-thumbnail{display:none}

Làm tương tự với những bài viết nào bạn muốn hiện thị thì hãy xóa đoạn code tương ứng của bài viết đó đi nha.

Cuối cùng hãy like nếu bài viết có ích và nhớ chia sẻ nó với mọi người để mọi người biết đến thủ thuật này nha.