Bài đăng này sẽ hướng dẫn cho các blogger tạo widget popular the week cho website, để tăng khả năng truy cập của người dùng khi đến website của bạn. Tạo thêm nhiều bài tương tự để giúp người đọc đi vòng quanh trang web của mình.
Không để mất thời gian thêm, mình sẽ hướng dẫn các bạn tạo Widget Popular The Week ở trang chủ.

Hướng Dẫn Cài Đặt

Bước 1: Hãy đặt đoạn css bên dưới vào trong ]]></b:skin hoặc ở <head> nhé,

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

<style type='text/css'>

/* Popular Post Grid by IDBLANTER.COM */

#indexpopular ul li:hover .item-title a{color:#07ACEC!important}

#indexpopular ul{margin:0!important;padding:0!important}

#indexpopular ul li{width:150px;float:left;height:150px;border-radius:4px;box-shadow:0 2px 2px 0 rgba(0,0,0,.14),0 1px 5px 0 rgba(0,0,0,.12),0 3px 1px -2px rgba(0,0,0,.2);padding:10px!important;margin-right:10px;margin-bottom:15px}

#indexpopular .item-thumbnail{margin:0}

#indexpopular img{width:180px;height:100px}

#indexpopular .item-title{text-align:center;height:40px;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;float:left;overflow:hidden}

#indexpopular h2{text-align:center;background:#07acec;color:#fff;font-family:'Roboto',sans-serif;width:200px;padding:10px;margin:10px auto;text-transform:uppercase;border-radius:3px;font-size:15px}

</style>

</b:if>

</b:if>

Bước 2: Bạn đặt đoạn code sau lên trên mã <footer> nhé.

<b:if cond='data:blog.pageType != "static_page"'>

<b:if cond='data:blog.pageType != "item"'>

<b:section class='indexpopular' id='indexpopular' maxwidgets='1' showaddelement='yes'>

<b:widget id='PopularPosts16' locked='false' title='Popular Of The Week' type='PopularPosts' version='1'>

<b:widget-settings>

<b:widget-setting name='numItemsToShow'>6</b:widget-setting>

<b:widget-setting name='showThumbnails'>true</b:widget-setting>

<b:widget-setting name='showSnippets'>false</b:widget-setting>

<b:widget-setting name='timeRange'>ALL_TIME</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'>



<a expr:href='data:post.href'><data:post.title/></a>

<b:else/>



<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/>



<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, 170, "1:1") : data:post.thumbnail' var='image'>

<img alt='Popular Posts' 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 class='clear'/>

</b:if>

</li>

</b:loop>

</ul>

</div>

</b:includable>

</b:widget>

</b:section>

<div class='clear'/>

</b:if></b:if>

Bạn Muốn Widget Popular The Week Chỉ Hiển Thị Trên Trang Chủ?
Chỉ muốn hiển thị Widget Popular The Week trên trang chủ của bạn, rất đơn giản chúng ta chỉ việc xóa đoạn <b:if> bên dưới nhé.