Thứ Sáu, ngày 20 tháng 5 năm 2016

Hướng Dẫn tạo ảnh (Thumbnail) Mặc Định cho Bài Viết Phổ Biến Blogspot

Bài viết này sẽ hướng dẫn cho các bạn cách để làm sao những bài viết của bạn khi không có 1 hình ảnh nào thì phần bài viết phổ biến sẽ nhận diện và sử dụng 1 hình ảnh của bạn sử dụng làm mặc định thêm vào. Việc làm này sẽ giúp cho hiển thị trên trang của bạn trở nên chuyên nghiệp và đẹp mặt hơn như hình demo bên dưới. Các bạn cũng có thể thay thế hình ảnh mặc định bằng hình nào mà bạn thích
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

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.
Nguồn:tips24h