Cách 1: Che mắt thiên hạ bằng phương pháp lầy
Cách này thì bạn vẫn phải upload ảnh lên server của blogger, ảnh thumbnail phải là ảnh đầu tiên trong bài viết và ta sẽ ẩn nó đi bằng thuộc tính css display:none
Tuy nhiên chẳng ai lại làm như này vì ảnh vẫn load và làm chậm trang bình thường và nhìn cũng không thật chuyên nghiệp
Cách 2: Sử dụng liên kết đính kèm (Enclosure)
Đây là 1 tính năng rất hay của blogger tuy nhiên có vẻ nó ít được sử dụng. Để làm việc với nó bạn tiến hành chỉnh một vài cài đặt sau
Tiếp theo tại giao diện trang viết bài bạn sẽ đính kèm thumbnail như sau
Trong đó
- Phần Thêm liên kết : bạn điền link ảnh vào
- Phần mime: thường thì nó tự detect và điền cho bạn (nhớ click chuột vào ô input) còn nếu bạn cần biết thêm thì nó là một cặp media type/subtype ví dụ image/png, text/html,... trong blogger có một số media type điển hình như
+ text : for text files
+ image : for graphic files
+ video : for video files
+ audio : for sound files
+ application : for files that are linked to a specific program
+ multipart : for multipart data
+ message : for news
+ model : for files that represent structures in multiple dimensions
Sau khi hoàn thành xong phần đính kèm liên kết thì phần khó nhất đó là chỉnh sửa mã XML, sẽ không có một quy chuẩn nào cả vì mỗi blogger template có một cấu trúc hiển thị thumbnail khác nhau. Nhiệm vụ của bạn là tìm tới đoạn code đó, thường thì nó bắt đầu bằng <b:if cond='data:post.thumbnailUrl'> với version cũ và <b:if cond='data:post.featuredImage'> với version mới
Tôi lấy ví dụ có một mẫu code hiển thị thumbnail trang index như sau
Bây giờ tôi muốn bài nào có liên kết đính kèm sẽ ưu tiên sử dụng thumbnail của nó trước, bài nào không có thì sẽ dùng ảnh đầu tiên làm thumbnail như mặc định mã xml sẽ như sau
Để lấy ra url của liên kết đính kèm áp dụng cho ảnh ta dùng code sau
<b:loop values='data:post.enclosures' var='enclosure'>
<b:if cond='data:enclosure.mimeType in {"image/jpeg","image/gif","image/png","image/jpg"}'>
<img expr:src='data:enclosure.url' />
</b:if>
</b:loop>Lắp vào code hoàn chỉnh ta được
<div class='snippet'>
<div class='thumb'>
<a expr:href='data:post.url'>
<b:if cond='data:post.enclosures.notEmpty'>
<b:loop values='data:post.enclosures' var='enclosure'>
<b:if cond='data:enclosure.mimeType in {"image/jpeg","image/gif","image/png","image/jpg"}'>
<img expr:src='data:enclosure.url'/>
</b:if>
</b:loop>
<b:else/>
<b:if cond='data:post.featuredImage'>
<img src="data:post.featuredImage"/>
</b:if>
</b:if>
</a>
</div>
<div class='meta'>
<!-- code -->
</div>
</div>Như vậy bạn cần nắm vững đoạn code thẻ điều kiện lọc giữa bài đăng có sử dụng liên kết đính kèm và bài đăng không có liên kết đính kèm + đoạn code lấy ra url để áp vào mã html từ đó áp dụng cho blog của mình
Khi truy cập một số trang báo mạng bạn cũng có thể bắt gặp trường hợp bài viết toàn chữ, view-sources không thấy ảnh nhưng trang chủ vẫn có thumbnail, và điều đó blogger cũng có thể làm được
Nếu vẫn chưa tin bạn có thể kiểm tra bài viết này luôn (ảnh đầu tiên và ảnh làm thumnail hoàn toàn khác nhau, ảnh thumbnail không có trong sources)
Việc sử dụng liên kết đính kèm sẽ giúp bạn linh hoạt được server lưu ảnh cũng như dễ dàng chọn được ảnh nào làm thumbnail
Hi vọng qua bài viết này bạn sẽ có cái nhìn khác về liên kết đính kèm, đừng để lãng phí một tính năng rất hay của blogger
Để lại bình luận nếu bạn gặp khó khăn và chúc thành công !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên
Trên các widget mà bài đăng hiển thị theo label thì làm sao để thumbnail tùy chọn được hả bạn?