Chào các bạn, thời gian gần đây có một vài bạn hỏi mình cách tùy chọn (set) Thumbnail theo ý thích trên trang chủ cho Blogspot. Và cách hay được sử dụng nhất đó chính là Upload hình ảnh mình muốn làm Thumbnail lên đầu bài viết sau đó dùng CSS để ẩn đi.
Tuy nhiên, cách đó chưa được tối ưu bởi khi vào xem bài viết mặc dù là ảnh không hiển thị, nhưng thực chất thì vẫn phải tải ảnh bình thường. Để khắc phục được vấn đề này, mình sẽ chia sẻ một thủ thuật nhỏ tận dụng tính năng Enclosure Links của Blogger mà dường như chúng ta đã lãng quên nó 🙂

BƯỚC 1: KÍCH HOẠT ENCLOSURE LINKSCÁC BƯỚC THỰC HIỆN

Bước đầu tiên chúng ta cần làm đó chính là bật tính năng Enclosure Links của Blgspot lên cái đã. Mở menu Settings -> Other. Tại phần Enable Title Links and Enclosure Links chuyển từ No thành Yes.
kich hoat enclosure link

Bước 2: Sử dụng Enclosure Links làm Thumbnail

OK, đây là bước quan trọng nhất trong bài ngày hôm nay. Bước này sẽ là dùng  Enclosure Links để làm Thumbnail cho bài viết. Bây giờ, các bạn hãy tìm tới đoạn code hiển thị Thumbnail trong Theme (Template) của mình. Sau đó, xóa đi và thay bằng đoạn code sau:
<b:if cond='data:blog.pageType == "index"'>
 <b:loop values='data:post.enclosures' var='enclosure'>
 <img expr:src="data:enclosure.url" expr:alt="data:post.title"/>
 </b:loop>
</b:if>
Lưu ý: Sao lưu lại Theme trước khi thực hiện, tránh trường hợp gặp lỗi.

Bước 3: Cách sử dụng Enclosure Links

Sau khi thực hiện xong bước 2 thì chúng ta có thể coi như là đã xong rồi. Bước này chỉ là hướng dẫn cách dùng Enclosure Links mà thôi.
Trong khi đăng bài viết, các bạn hãy để ý tới phần Links trong cột menu bên phải. Chúng ta sẽ thấy xuất hiện thêm phần Enclosure Links ở đây. Lúc này, chúng ta chỉ việc Copy link ảnh mà mình muốn đặt làm Thumbnail và dán vào ô Add link, và loại ảnh vào ô Add mime type.
khung enclosure links
Xong rồi, bây giờ xuất bản bài viết và xem kết quả thôi nào. Các bạn có thể xem DEMO tại: https://tuy-bien-thumbnail-blogspot.blogspot.com/

TỔNG KẾT

Như vậy là chúng ta đã cùng nhau thực hiện xong thủ thuật Blogspot nho nhỏ nhằm tối ưu ảnh đại diện cho mỗi bài viết rồi đúng không 😀 Nếu như có bất kỳ thắc mắc nào thì hãy để lại câu hỏi ngay tại bài viết này nhé!
0 bình luận
Tag
  • 0 bình luận
  • Mặt cười
  • Chèn ảnh
  • Mã hóa HTML
  • Lưu ý
  • Admin Panel
  • :))
    :((
    :D
    :(
    :)
    :-)
    ;)
    =))
    :p
    =.=
    ==
    ^_^
    /=he
    :*
    /=r
    /=l
    :v
    /=ok
    /=clap
    (y)
    (yy)
    /=hi
    /=j
    /=hup
    /=hd
    /=hl
    /=hr
    /=s
    <3
  • Chức năng này hiện chưa khả dụng, bấm vào đây để sử dụng tạm.
  • Hướng dẫn bình luận

    Chèn chữ in đậm: Chữ in đậm

    Chèn chữ in đậm: Chữ in nghiêng

    Chèn ảnh: [img]Link Ảnh[/img]


    Một số lưu ý khi bình luận

    Không đăng bình luận có nội dung khiêu dâm, 18+

    Không đăng bình luận có liên quan đến chính trị, nhà nước.

    Không đăng bình luận có nội dung phản động, kích động chiến tranh, thù địch.

    Không đăng bình luận có nội dung phản cảm, bêu rếu, nói xấu.

    Không đăng bình luận có nội dung tục tiểu, bậy bạ hay thậm chí "vô học".

    Không đăng bình luận có liên kết spam, dẫn đến những trang có nội dung xấu.

    Được đăng bình luận có mang tính đóng góp, xây dựng bài viết / blog.

    Được đăng bình luận có liên quan đến nội dung bài viết.

    Có thể góp ý, hay báo lỗi bài viết (thiếu ý, sai chính tả hay thiếu hình ảnh minh họa).

    Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời.

    Bạn có thể dùng ảnh động hoặc mã hóa code HTML để bình luận.

    Bấm vào đây để xem chi tiết hơn nội quy trên Blog.

  • Đây là khu vực quản trị, bạn không có quyền truy cập vào!