Cách ẩn hình ảnh trong bài viết chỉ hiển thị ở trang chủ ~ demotemplate

Cách ẩn hình ảnh trong bài viết chỉ hiển thị ở trang chủ

Ẩn hình ảnh trong bài viết và sử dụng hình ảnh đó như là ảnh đại diện ở ngoài trang chủ sẽ là mục đích của bài hướng dẫn này. Đôi lúc bạn muốn sử dụng 1 hình ảnh tượng trưng cho bài viết ở ngoài trang chủ nhưng nó xuất hiện trong bài viết nhưng lại không "ăn nhập" gì so với bài viết thì đây sẽ là cách giải quyết.

Cách ẩn hình ảnh đại diện ở trang chủ và ẩn trong bài viết

Bước 1: Đăng nhập vào trang chủ blogger => Mẫu => Chỉnh sửa HTML

Bước 2: Click 1 vị trí bất kì trong vùng chỉnh sửa HTML, nhấn tổ hợp phím Ctrl + F

Bước 3: Tìm đến thẻ ]]></b:skin> bằng cách copy và dán vào search box để tìm

Bước 4: Copy và dán đoạn code sau vào ngay bên dưới:

<b:if cond='data:blog.pageType != "index"'>
<style>
.hidepic{
display: none;
}
</style>
</b:if>

Bước 5: Lưu template

Bây giờ, bất cứ khi nào bạn tạo bài viết mới, thêm hình ảnh mà bạn muốn nó chỉ hiện ở trang chủ nhưng ẩn ở bài viết sau đó chuyển sang trình soạn thảo HTML bạn sẽ thấy đoạn code chứa hình ảnh đó có dạng như sau:

<div class="separator" style="clear: both; text-align: center;">
<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTTErmM_PEJZFGgEBX-1saY_EXTyJ1C0SPmkOaO9pd-F-q7zZTMkHM-hpDMUcdEkza4f8wLVhxWA-12GFjRo2IP7LFofQGaG4LFrCz4xUeoabUZU6gMsmvqpMoVierVIwlZYR2oWSBCZM/s1600/fire_bird_by_fhrankee-d32af8v.png" imageanchor="1" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="320" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgTTErmM_PEJZFGgEBX-1saY_EXTyJ1C0SPmkOaO9pd-F-q7zZTMkHM-hpDMUcdEkza4f8wLVhxWA-12GFjRo2IP7LFofQGaG4LFrCz4xUeoabUZU6gMsmvqpMoVierVIwlZYR2oWSBCZM/s320/fire_bird_by_fhrankee-d32af8v.png" width="320" /></a></div>

Bạn chỉ cần thay "separator" thành "hidepic" như hình bên dưới

Chú ý: Trong lúc thực hiện có thể sẽ không giống 100% như bạn cứ làm theo từng bước nếu có vấn đề gì mình sẽ giải đáp giúp bạn. Có thể lúc thêm ảnh rồi chuyển sang trình soạn thảo html sẽ khá là khó để tìm đến đoạn code như trên. Nên vừa thêm ảnh thì hãy thực hiện ẩn luôn nhé.

Trên đây là code ẩn hình ảnh được mình tham khảo từ help blogger. Chúc các bạn thành công!