Bài đăng phổ biến (Popular Posts) là 1 tiện ích được sử dụng ở hầu hết mọi website nền tảng blogger. Tuy nhiên trong 1 vài trường hợp ngoại lệ ví dụ bài viết không có ảnh đại diện (thumbnail) nó lại vô tình làm giảm thẩm mĩ trang của bạn do hiển thị không đúng theo form. Trong bài này tôi sẽ hướng dẫn bạn cách Sửa lỗi hiển thị bài đăng không thumbnail trong widget PopularPosts
Tại thời điểm viết bài blogger cho ra mắt 2 phiên bản widget PopularPosts đó là v1 và v2. v2 thiên về dạng article và khá khó tùy biến cho bạn nào ít hiểu về mã nguồn blog. Cho nên lời khuyên của tôi đó là bạn có dùng widget v2 layout v3 thì vẫn nên sử dụng widget PopularPosts v1 thôi cho dễ quẩy
Trong bài này tôi sẽ dùng PopularPosts v1.
Mã nguồn gốc của widget PopularPosts (Bố cục → Thêm tiện ích)
<b:widget id='PopularPosts1' title='WIDGET_TITLE' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='showSnippets'>false</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
</b:widget-settings>
<b:includable id='main'>
<b:if cond='data:title != ""'>
<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'><data:post.title/></a>
<b:else/>
<!-- (2) Show only snippets -->
<div class='item-title'><a expr:href='data:post.href'><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 ? "item-content" : "item-thumbnail-only"'>
<b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 72, "1:1") : data:post.thumbnail' var='image'>
<img alt='' border='0' expr:src='data:image'/>
</b:with>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><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>
<b:include name='quickedit' />
</div>
</b:includable>
</b:widget>
Trong đó ta thường hay sử dụng đoạn tôi đánh dấu màu xanh, tức là hiển thị thumbnail + tiêu đề + đoạn trích
Đi sâu vào đoạn đánh dấu màu xanh đó, điều kiện <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> tức là "nếu ảnh thumbnail có thể chỉnh sửa kích thước (chính là ảnh upload lên server của blogger khi viết bài) hoặc bài có ảnh thumbnail" thì làm khối lệnh bên trong.
Như vậy có thể thiếu xót một ngoại lệ nữa đó là nếu bài không có ảnh thumbnail thì khối lệnh không được thực hiện, bài đó chỉ hiển thị mỗi title và đương nhiên là rất không đẹp
Bây giờ tôi sẽ thêm ngoại lệ như sau
<b:widget id='PopularPosts1' title='WIDGET_TITLE' type='PopularPosts' version='1'> <b:widget-settings> <b:widget-setting name='showSnippets'>false</b:widget-setting> <b:widget-setting name='showThumbnails'>true</b:widget-setting> <b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting> <b:widget-setting name='numItemsToShow'>10</b:widget-setting> </b:widget-settings> <b:includable id='main'> <b:if cond='data:title != ""'> <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'><data:post.title/></a> <b:else/> <!-- (2) Show only snippets --> <div class='item-title'><a expr:href='data:post.href'><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 ? "item-content" : "item-thumbnail-only"'> <b:if cond='data:post.featuredImage.isResizable or data:post.thumbnail'> <div class='item-thumbnail'> <a expr:href='data:post.href' target='_blank'> <b:with value='data:post.featuredImage.isResizable ? resizeImage(data:post.featuredImage, 140, "140:90") : data:post.thumbnail' var='image'> <img alt='' border='0' expr:src='data:image'/> </b:with> </a> </div> <b:else/> <div class='item-thumbnail'> <a expr:href='data:post.href'> <img alt='no-thumb' border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgXvoeWlnXfuDDxD0LIWf1tODuI3Wti5c3N2v73T19xj9fNAM45q8OWvY4cL-rRcVe0NisWEk9lZ0v4uuDUX4b54sx0uFOgNBRC6Gfoj7nUJaCh-JsZLVa-G-Nt0j5OrQ5vOfcCLsG-HqI/s1600/nth.png'/> </a> </div> </b:if> <div class='item-title'><a expr:href='data:post.href'><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> <b:include name='quickedit' /> </div> </b:includable> </b:widget>
thì các bài đăng trong list PopularPosts không có thumbnail sẽ dùng chung 1 ảnh do tôi chỉ định
Ok không có gì khó khăn, chỉ là bổ xung 1 thiếu xót trong hệ thống widget của blog thôi
Để 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