Duy Ripper: Tùy chọn Thumbnail theo ý thích cho Blogspot / Blogger

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.

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.

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