Bài viết phổ biến hỗ trợ thumbnail khi post không có hình ảnh

Với blogspot thì hầu như blog hay website nào cũng dùng widget popular post cả nhưng đôi khi các blog cũ không hỗ trợ hình ảnh thu nhỏ khi bài viết của bạn không có hình ảnh, như vậy nó rất xấu đội hình, thiếu đồng bộ dẫn đến không được đẹp cho lắm nên bài viết này sẻ giới thiệu 1 tiện ích nhỏ hy vọng sẻ giúp ích cho nhiều người.

Bài viết phổ biến hỗ trợ thumbnail khi không có hình ảnh

Bài viết phổ biến hỗ trợ thumbnail khi không có hình ảnh

Các bạn có thể làm theo một vài bước đơn giản dưới đây để thêm bài viết liên quan hỗ trợ ảnh thu nhỏ nếu như bài viết không có hình ảnh.
1. Vào Template => Edit HTML

2. Tìm đến PopularPost1 như hình phía dưới là chọn chuyển đến tiện ích để có thể xác định được PopularPost1

Bài viết phổ biến hỗ trợ thumbnail khi không có hình ảnh

3. Bạn sẻ dễ dàng nhìn thấy code để hiển thị bài viết phổ biến như ảnh dưới

Bài viết phổ biến hỗ trợ thumbnail khi không có hình ảnh

4. Hãy xóa hết đoạn mã đó đi và thay bằng đoạn mã dưới đây:

<b:widget id=’PopularPosts1′ locked=’false’ title=’Popular Posts’ type=’PopularPosts’> <b:includable id=’main’>
<b:if cond=’data:title != &quot;&quot;’><h2><data:title/></h2></b:if> <div class=’widget-content popular-posts’>
<ul>
<b:loop values=’data:posts’ var=’post’>
<li>
<b:if cond=’!data:showThumbnails’>
<b:if cond=’!data:showSnippets’>
<!– (1) No snippet/thumbnail –>
<a expr:href=’data:post.href’ target=’_blank’><data:post.title/></a> <b:else/>
<!– (2) Show only snippets –>
<div class=’item-title’><a expr:href=’data:post.href’ target=’_blank’><data:post.title/></a></div>
<div class=’item-snippet’><data:post.snippet/></div>
</b:if>
<b:else/>
<!– (3) Show only thumbnails or (4) Snippets and thumbnails. –>
<div expr:class=’data:showSnippets ? &quot;item-content&quot; : &quot;item-thumbnail-only&quot;’>
<div class=’item-thumbnail’>
<a expr:href=’data:post.href’ expr:title=’data:post.title’>
<b:if cond=’data:post.thumbnail’>
<img alt=” border=’0′ expr:height=’data:thumbnailSize’ expr:src=’data:post.thumbnail’ expr:width=’data:thumbnailSize’/> <b:else/>
<img alt=” border=’0′ expr:height=’data:thumbnailSize’ expr:width=’data:thumbnailSize’ src=’http://4.bp.blogspot.com/-TCfMi8t3pR4/VjL5oqlRGWI/AAAAAAAAGD8/pl4W2U2xX-s/s1600/no_thumb.png’/>
</b:if>
</a>
</div>
<div class=’item-title’><a expr:href=’data:post.href’ target=’_blank’><data:post.title/></a></div>
<b:if cond=’data:showSnippets’>
<div class=’item-snippet’><data:post.snippet/></div>
</b:if>
</div>
<div style=’clear: both;’/>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

5. Lưu mẫu lại và xem thành quả.

Chú ý hình ảnh này:

http://4.bp.blogspot.com/-TCfMi8t3pR4/VjL5oqlRGWI/AAAAAAAAGD8/pl4W2U2xX-s/s1600/no_thumb.png

Nếu như bài viết bạn không có ảnh thì nó sẻ lấy ảnh này làm ảnh đại diện, bạn có thể thay bằng ảnh khác nếu bạn muốn.

Leave a Comment

sơn epoxy / sơn sàn epoxy / cửa lưới chống muỗi / vách ngăn lướii chống muỗi / cửa lùa chống muỗi / vệ sinh công nghiệp / đánh bóng sàn bê tông / vệ sinh nhà máy / dịch vụ giặt thảmm / vệ sinh nhà hàng / vệ sinh tòa nhà / dịch vụ vệ sinh kính / vệ sinh khách sạn / vệ sinh chung cư / dịch vụ cắt cỏ / đánh bóng kính / diệt côn trùng / diệt mối / diệt kiến / diệt muỗi / diệt ruồi / diệt gián / diệt chuột / dọn bể nước ngầm / phụ kiện mái che / cơ khí chế tạo / mái che di động / rèm nhựa / vách nhựa ngăn phòng lạnh / rèm nhựa phòng lạnh / dù che nắng / mái kéo di động / nhà bạt di động / mái xếp di động / mái hiên di động / thay bạt mái hiên di động / bạt che nắng / phụ kiện mái che di động / mái che sân thượng / mái che quán cafe / mái che di động miền bắc / mái che di động miền nam / bạt che di động hcm /