Thư viện

Trải nghiệm

Thứ Tư, tháng 3 05, 2014

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

Cài đặt để chỉ bài viết đầu tiên hay chỉ bài viết cuối cùng hay bài viết bất kỳ trong tiện ích popularpost hiển thị anht thumbnail thu nhỏ.

Chia sẻ:
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.
Hiển thị ảnh thumbnail của bài viết bất kỳ trên tiện ích Popularposts của blogger
(Ả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 namkna sẽ hướng dẫn bạn làm điều đó chỉ với một đoạn CSS nhỏ (Bài viết được thực hiện theo yêu cầu của bạn Minh ngọc). 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.

17 nhận xét:

  1. Bạn ơi làm cách nào để cho background của blog chỉ hiển thị ở bài viết mà không hiển thị ở trang chủ ko?

    Trả lờiXóa
    Trả lời
    1. Bạn dán đoạn mã bên dưới vào sau thẻ ]]></b:skin>

      <b:if cond='data:blog.pageType == &quot;index&quot;'>
      <style>
      Code css ở trang chủ, trang nhãn, và trang lưu trữ
      </style>
      <b:else/>
      <style>
      Code css ở trang bài viết
      </style>
      </b:if>

      Xóa
  2. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  3. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  4. Chào bạn
    Mình lớn tuổi và đang tập làm blogspot. Bạn hướng dẫn giúp mình cách tạo thumbnail cho tiêu đề tất cả các bài viết hiển thị nhé. Xin cám ơn.

    Trả lờiXóa
  5. Mình mới thêm các bài viết mới nó không hiển thị ảnh thumbnail, làm cách nào tự động hiện tiêu đề có ảnh thumb bạn giúp mình với nha, cám ơn.

    Trả lờiXóa
    Trả lời
    1. Ý bạn là thumbmail ở trang chủ hả. Nếu phần đó bạn chỉ cần tải ảnh trực tiếp lên blog và chọn một cách ở đây là được: XEM NGAY

      Xóa
  6. ảnh thumb dùng khi hiện trang chủ nó không tự co lại để full ảnh trong khung mà chỉ lấy 1 phần ảnh theo đủ diện tích khung @@! làm cách nào cho nó co lại được vậy AD? xin giúp đỡ

    Trả lờiXóa
    Trả lời
    1. Bạn cho mình link trang đang bị lỗi đó nha. Mình vào trang 4truyentranh của bạn không thấy xuất hiện lỗi đó.

      Xóa
  7. Nhận xét này đã bị quản trị viên blog xóa.

    Trả lờiXóa
  8. anh nam ơi...cho mình hỏi tý..e tìm code để thêm tiện ích label dang thum cho trang chủ mà tìm ko được..anh chec giùm với...http://vectordohoa.blogspot.com

    Trả lờiXóa
    Trả lời
    1. Bạn có thể tìm dạng bạn thích tại đây: : Xem và lựa chọn ngay

      - Ps: label hiện tại không cho dán thêm hình ảnh thumbnail nên nếu muốn thêm ảnh bạn phải lam thủ công như bài này: : Thêm mô tả cho widget label của blogger

      Tuy nhiên phải sửa những đoạn:
      <span class="labeldesc"> - Đây là mô tả nhãn n</span>

      thành:

      <span class="labeldesc"> <img src="Link ảnh thumbnail"/></span>

      Xóa
  9. Anh nam ơi cho em hỏi chút ảnh thumbnail bị mờ thì sửa thế nào vậy anh

    Trả lờiXóa
  10. cho hỏi namkna 1 tí, những bài đăng hiện ra ở trang chủ của blog có nhiều template phải upload ảnh trong bài đăng thì nó mới hiện thubnail, vậy làm thế nào để edit lại cho nó tự động lấy ảnh đầu tiên hoặc ngẫu nhiên vậy b? thanks ví dụ blog phim thì rất cần lấy ảnh thumbnail của bài đăng....nếu ko upload lên mà chỉ copy ảnh, hay up bằng url ảnh thì nó ko hiện,....

    Trả lờiXóa
    Trả lời
    1. Chỉ cần ảnh đó được lưu trữ trên Picasa nó sẽ tự động lấy ảnh thumb dù bạn tải lên hay copy nha bạn.

      Vấn đề là bạn nên tải ảnh lên trang của bạn để dùng lâu dài bởi những ảnh copy sẽ không được lâu nếu như người upload nó xoá nó đi nha bạn.

      Xóa
  11. sao ảnh mình tại lên picasa rồi post mà nó ko hiện thumbnail nữa, trong khi đó trước giờ vẫn hiện ? đột nhiên hôm nay lại bị @_@

    Trả lờiXóa