Để tùy biến tiện ích Bài đăng phổ biến để thành Bài xem nhiều nhất đã được share nhiều trên mạng hôm nay share123.vn chỉ xin biên soạn lại sao cho các bạn dễ làm hơn và dễ hiểu hơn trong thủ thuật này:
Demo:
Bước 2: Bạn vào Mẫu => Chỉnh sửa HTML =>; click vào ô Mở rộng mẫu tiện ích và bấm Ctrl+F tìm từ khóa PopularPosts1 hoặc Bài xem nhiều nhất hoặc tìm đoạn code tương tự như sau:
<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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (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/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
<b:include name='quickedit'/>
</div>
</b:includable>
Rồi thay nó bằng đoạn code bên dưới.
<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 == "false"'>
<b:if cond='data:showSnippets == "false"'>
<!-- (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/>
<b:if cond='data:showSnippets == "false"'>
<!-- (3) Show only thumbnails -->
<div class='item-thumbnail-only'>
<b:if cond='data:post.thumbnail'>
<div class='item-thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
</div>
</b:if>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
<b:else/>
<!-- (4) Show snippets and thumbnails -->
<div class='item-content'>
<div class='item-thumbnail'>
<b:if cond='data:post.thumbnail'>
<a expr:href='data:post.href' target='_blank'>
<img class='item-thumb' alt='' border='0' expr:height='data:thumbnailSize' expr:src='data:post.thumbnail' expr:width='data:thumbnailSize'/>
</a>
<b:else/>
<img class='item-nothumb' src='http://bit.ly/hGWr7r'/>
</b:if>
</div>
<div class='item-title'><a expr:href='data:post.href'><data:post.title/></a></div>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</li>
</b:loop>
</ul>
</div>
</b:includable>
Bước 3. Đặt đoạn code sau đây vào sau dòng ]]></b:skin>
<!-- Popular Posts Widget Styled by Share123.vn -->
<style type="text/css">
.popular-posts ul {border-bottom: 1px dotted #555; list-style-type: none; margin: 0; padding: 0; }
.popular-posts ul li {background-color: transparent; border-top: 1px dotted #555; clear: both; list-style: none; }
.popular-posts ul li:hover {background-color: #123; }
.popular-posts .item-content { padding: 5px; }
.popular-posts .item-title {height: 50px; }
.popular-posts .item-title a {color: #5CB3FF; font-family: Arial; font-size: 12px; font-weight: bold; }
.popular-posts .item-title a:hover {color: #CDE; text-decoration: none;}
.popular-posts .item-thumbnail { float: left; margin: 0 5px 0 0;}
.popular-posts img {height: 50px; width: 50px;} // Điều chỉnh số chỉ chiều rộng và chiều cao ảnh đại diện
.popular-posts .item-snippet {clear: both; color: #999; font-family: Arial; font-size: 12px;text-align:justify}
</style>Bước 4. Lưu template-------------------------------------------Chúc các bạn thành công Nguồn: share123.vn
