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

2 nhận xét:

Mã Hóa Code
CÓ THỂ BẠN ĐANG TÌM
  • Tổng hợp Adobe Photoshop
    Tổng hợp Adobe Photoshop
    15/06/2018 - 7 bình luận
    # Tổng hợp Photoshop ? Đây là những bản Adobe Photoshop Portable bao gồm CS3, CS5, CS6 32 bit và 64 bit, và đ…
  • Chia sẻ code popup thông báo khi người dùng sử dụng Adblocker
    Chia sẻ code popup thông báo khi người dùng sử dụng Adblocker
    19/11/2018 - 22 bình luận
    Vô tình vào thấy cái này trên Duy Blogs, vừa đơn giản lại vừa đẹp nên mang về cho anh em xài luôn =)) Các bư…
  • [PSD] Khóc Một Mình
    [PSD] Khóc Một Mình
    25/02/2017 - 0 bình luận
    " Em tựa mây lạc chân trên trời Anh tựa cây vùi thân bên đời Nhìn nhau, ta thầm thương thầm yê…
  • Hướng dẫn lấy avatar tài khoản facebook bật khiên
    Hướng dẫn lấy avatar tài khoản facebook bật khiên
    18/06/2018 - 15 bình luận
    Xin chào tất cả các bạn, hôm nay mình xin hướng dẫn các bạn cách lấy ảnh đại diện Facebook của người khác đã …
  • [Font Chữ] SVN-Mercury Script Việt Hóa
    [Font Chữ] SVN-Mercury Script Việt Hóa
    03/01/2017 - 0 bình luận
  • [PSD] Mockup Hacker
    [PSD] Mockup Hacker
    05/07/2016 - 0 bình luận
  • [Share] Code Scam Nick Facebook Bản Ngon
    [Share] Code Scam Nick Facebook Bản Ngon
    04/01/2017 - 2 bình luận
    Home / CODE / THỦ THUẬT / [Share] Code Scam Nick Facebook Bản Ngon - Nếu các bạn đã đến Web Scam rồi…
  • [TUT] Mở 13T + Tên Giả Có Mail Nhưng Mất Mật Khẩu
    [TUT] Mở 13T + Tên Giả Có Mail Nhưng Mất Mật Khẩu
    15/06/2016 - 0 bình luận
    ● Tut Mở 13T + Tên Giả Có Mail Nhưng Mất Mật Khẩu ( Giành Cho Không Spam Mail + CMND Phải Chuẩn…
  • [PSD ẢNH BÌA] - ĐỠ LỠ YÊU EM NHIỀU
    [PSD ẢNH BÌA] - ĐỠ LỠ YÊU EM NHIỀU
    14/12/2017 - 24 bình luận
    Ảnh minh họa Tải về Liên Hệ Đã lỡ yêu em nhiều rồi thì anh chỉ biết ngắm mưa Nhìn qua hàng cây được bao nhiêu…
  • [PSD] Não Cá Vàng
    [PSD] Não Cá Vàng
    12/03/2017 - 0 bình luận
    Tải về
  • [PSD Ảnh Bìa] - Chơi Game Không Phải Là Hư
    [PSD Ảnh Bìa] - Chơi Game Không Phải Là Hư
    07/11/2017 - 7 bình luận
    Chơi game không phải là hư chơi game là để giải tỏa suy tư lúc buồn... Tải về Liên Hệ
  • [PSD] Sau Cuộc Yêu - Khói
    [PSD] Sau Cuộc Yêu - Khói
    01/02/2017 - 0 bình luận
    LIÊN HỆ   TẢI VỀ