Ẩn ảnh thumbnail khi xem bài viết trên blog

(KJ Magic) - Thông thường khi soạn thảo bài đăng, Blogger sẽ chọn hình ảnh đầu tiên trong bài để làm ảnh thumbnail. Nhưng có khi nào bạn không muốn ảnh đó xuất hiện trong bài viết mà chỉ hiển thị trên trang index? Điều đó sẽ rất hợp lý đối với các blog chuyên về phim ảnh hay chia sẻ video. Bài viết này mình sẽ hướng dẫn các bạn một vài mẹo để làm được điều đó (các bạn có thể xem link demo bên dưới).

DEMO BLOG

Cách 1: Tùy chỉnh trong bài viết:

- Sau khi đã upload hình ảnh đầu tiên (hình sẽ được chọn làm thumbnail), các bạn chuyển sang chế độ soạn HTML và tìm đến đoạn code của hình ảnh đó, nó thường có dạng như sau:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgilb3ykGY8ZkFLaA1S6VxqEEka92Y4_CWO2OxSVToNdXXiys2zvQsuJBQsBetNf_2SuOXW-7wJSWcQJKhpDqVmvIsFv0R2Y0LiYGL1BRKde31gp51x8pSyRl_XcwHS8vW-joR7HWsRM6Q/s1600/tips+for+blogger+-+KJ+Magic.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" src="Link ảnh" height="198" width="200" /></a></div>

Đó là đoạn code định vị và quy định thuộc tính của ảnh, các bạn để ý dòng đầu tiên và thay thế nó thành đoạn code dưới đây là bạn đã ẩn được ảnh thumbnail tại trang bài viết:

<div class="separator" style="display:none; clear: both; text-align: center;">

+ Ưu điểm: Có thể ẩn được ảnh thumbnail theo ý muốn của bạn, không cần áp dụng cho tất cả bài viết.
+ Nhược điểm: Sẽ khá mất thời gian nếu bạn muốn ẩn tất cả ảnh thumbnail của các bài viết, vì với cách này các bạn sẽ phải tùy chỉnh code trong từng bài viết.

Cách 2: Tùy chỉnh trong template:
- Với cách này, các bạn chỉ cần làm một lần là có thể ẩn được tất cả ảnh thumbnail khi xem bài viết, không phải tùy chỉnh code trong từng bài. Rất đơn giản, các bạn chỉ cần vào Mẫu > Chỉnh sửa HTML và chèn đoạn code sau vào trước thẻ ]]></b:skin>:

.separator img{display:none !important}

+ Ưu điểm: Tiết kiệm được thời gian cho bạn khi soạn thảo bài đăng vì không phải tùy chỉnh code như Cách 1.
+ Nhược điểm: Không ẩn được ảnh thumbnail theo ý muốn của bạn, vì với cách này tất cả ảnh thumbnail của các bài viết đều được ẩn, hơn nữa bạn sẽ rất dễ gặp trường hợp không chỉ ảnh được chọn làm thumbnail mà tất cả ảnh trong bài viết đều biến mất.

Cách khắc phục:
- Với cách 2 này mình đã sử dụng class separator, tuy vậy không chỉ hình ảnh đầu tiên mà tất cả nội dung bài viết đều có thể nằm trong khối của class này. Cách duy nhất để khắc phục là sau khi upload được ảnh để làm thumbnail, các bạn chuyển sang chế độ HTML và soạn thảo bài viết bằng HTML. Hoặc các bạn có thể xóa cặp thẻ <div class="separator" style="clear: both; text-align: center;">...</div> tương ứng đi. Như vậy sẽ không xảy ra hiện tượng tất cả hình ảnh biến mất.

Chúc các bạn thành công !