Tùy chọn Thumbnail theo ý thích cho Blogspot

Tùy chọn Thumbnail theo ý thích cho Blogspot / Blogger.

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ó 🙂

Các bước thực hiện

Bước 1: Kích hoạt Enclosure Links

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é!

Nếu thấy Blog của mình hữu ích hãy chia sẻ nó tới bạn bè của mình và cũng đừng quên theo dõi blog qua email nữa nhé! Và đừng quên cho mình 5 sao nếu thấy bài viết hữu ích đấy 🙂

Tùy chọn Thumbnail theo ý thích cho Blogspot
4.7 / 10 votes

Cùng chuyên mục:

Add Comment

21 Comments

  1. Đôi dép tổ ong
    54 Bình luận
    14/04/2017
    • Mộc
      Admin
      14/04/2017
    • Tịnh Nguyễn Blog
      39 Bình luận
      15/04/2017
      • Mộc
        Admin
        15/04/2017
  2. Tạ Hữu Nam
    60 Bình luận
    14/04/2017
  3. Doãn Bắc Tâm
    26 Bình luận
    14/04/2017
  4. Minh Khánh
    11 Bình luận
    15/04/2017
    • Mộc
      Admin
      15/04/2017
  5. Tịnh Nguyễn Blog
    39 Bình luận
    15/04/2017
    • Mộc
      Admin
      15/04/2017
      • Tịnh Nguyễn Blog
        39 Bình luận
        15/04/2017
        • Mộc
          Admin
          15/04/2017
  6. khanh
    15 Bình luận
    28/04/2017
    • Mộc
      Admin
      29/04/2017
      • Khanh
        15 Bình luận
        30/04/2017
  7. Duy Ripper Blog
    1 Bình luận
    06/05/2017