Hướng dẫn tùy chỉnh tiện ích Bài đăng phổ biến

Để 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 1: Bạn cần vào Bố cục  click vào Thêm tiện ích ở nơi muốn hiển thị tiện ích và thêm tiện ích Bài đăng phổ biến.

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 == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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 == &quot;false&quot;'>
<!-- (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 == &quot;false&quot;'>
<b:if cond='data:showSnippets == &quot;false&quot;'>
<!-- (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 == &quot;false&quot;'>
<!-- (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>


Những phần được đánh dấu màu đỏ là phần được thêm vào. Ở đoạn code trên, tôi đã viết thêm code để cho bài viết không có ảnh vẫn hiển thị ảnh đại diện mặc định là ảnh nothumbnail (tiện ích Popular Posts của Blogger không có chức năng này, chỉ hiển thị phần tóm tắt đối với bài viết không có ảnh).

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

Xem Thêm :