HOME ABOUT CONTACT SITEMAP
Category
This site uses cookies for analytics, personalized content and ads. By continuing to browse this site, you agree to this use.
Author Image Sunday, 26 August 2018

Sửa lỗi hiển thị bài đăng không thumbnail trong widget PopularPosts



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='http://3.bp.blogspot.com/-Yw8BIuvwoSQ/VsjkCIMoltI/AAAAAAAAC4c/s55PW6xEKn0/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

Comments:
Bạn được tự do bày tỏ quan điểm nhưng nghiêm cấm spam
  • Chèn ảnh theo mẫu [img]link[/img]
  • Chèn video Youtube theo mẫu [youtube]link[/youtube]
  • Chèn code theo mẫu [pre]code[/pre]. Lưu ý: mã hóa code trước khi bình luận

  • Please wait while i am loading Facebook SDK js