Tiện ích bài đăng phổ biến (xem nhiều) đẹp

Tiện ích Bài đăng phổ biến (Popular Posts) rất quan trọng đối với blogspot, nó giúp gây sự chú ý của độc giả, giúp dễ tìm đọc những bài viết nổi bật nhất trong tuần, trong tháng hoặc toàn thời gian đồng thời tăng cường traffic cho blog của bạn.

Ngoài cách bố trí các bài viết phổ biến theo chiều nằm ngang, mình sẽ giúp các bạn một cách bố trí khác và có phần lạ lẫm, đó là ghép 2 tiện ích Popular Posts lại với nhau; theo đó sẽ tạo định dạng bài đầu tiên có ảnh đại diện và tiêu đề bài viết, các bài còn lại hiển thị danh sách tiêu đề bài viết, kết hợp thuộc tính title là đoạn trích dẫn bài viết (snippet). Định dạng này không thể thực hiện được trên một tiện ích Popular Posts riêng biệt, vì thế ý nghĩ ghép 2 tiện ích đã giúp mình thực hiện thành công thủ thuật này. Bạn có thể xem Demo trên trang chủ của Thủ thuật Blogger.

Nào, chúng ta cùng thực hiện như sau:

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates. Tìm đến thẻ đóng </b:widget> của một tiện ích nào đó mà bạn muốn bố trí tiện ích này gần với nó, sau đó đặt sau thẻ đóng </b:widget> này bằng đoạn code bên dưới:

<b:widget id='PopularPosts101' locked='false' title='Bài xem nhiều' type='PopularPosts'>
<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><div class='PPcontent'>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

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

<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

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


<div class='item-content'>
<div class='item-thumbnail'>
<b:if cond='data:post.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>
<b:else/>
<img class='item-nothumb' expr:height='data:thumbnailSize' expr:width='data:thumbnailSize' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhm_rl4noWzmGrlAYsYZqzMOmRR-VAg5KgCQQNa3R9v-5qESxygMfdh40dSfspGFDjx9qdjL8gHmp4XT_8uc1OazHmxvkDspWz3BiaVIemzFJZrqqwAP0sfbO8vpWt0rWOdzPN8OT2m9q0/s1600/no-image.png'/>
</b:if>
</div>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a> <g:plusone expr:href='data:post.href' size='small'/></div>

</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</div></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>
<b:widget id='PopularPosts102' locked='false' title='Bài đăng phổ biến' type='PopularPosts'>
<b:includable id='main'>


<div class='widget-content popular-posts'>
<ul>
<b:loop values='data:posts' var='post'>
<li><div class='PPcontent'>
<b:if cond='data:showThumbnails == "false"'>
<b:if cond='data:showSnippets == "false"'>

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

<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a>
</div>
</b:if>
<b:else/>
<b:if cond='data:showSnippets == "false"'>

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


<div class='item-content'>
<div class='item-title'><a expr:href='data:post.href' expr:title='data:post.snippet'><data:post.title/></a></div>
</div>
<div style='clear: both;'/>
</b:if>
</b:if>
</div></li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

Chú ý dòng <g:plusone expr:href='data:post.href' size='small'/> là mình khuyến mãi thêm cái nút G+ trên tiêu đề bài viết đầu tiên, muốn nó hiện thì thêm đoạn code sau đây trước thẻ </body>.

<script src='http://apis.google.com/js/plusone.js' type='text/javascript'></script>

Nếu không thích hàng khuyến mãi này thì bạn có thể xóa nó đi nhé. :51)

Bước 2. Đặt code CSS dưới đây vào trước dòng ]]></b:skin>.

#PopularPosts101 .popular-posts ul{list-style-type:none;margin:0;padding:0}
#PopularPosts101 .widget-content ul li{margin;border-bottom:1px dotted #DDD}
#PopularPosts101 .item-thumbnail{padding-left:5px}
#PopularPosts101 .item-title{padding:18px}
#PopularPosts102 ul li a{color:#069;text-decoration:none;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh8s3miPzFMLR0mtwT0k4ZVYQH8n29yymbb6o3ah3wjx0hwfT7Y5jpuXfuGAnwmZxe0vvD_T_bfeoz1o3r0BcQGE3KrDzsg0ohDCT4D0mHRrc1rTdIhk-exsJboy4FtKPf3iyCjD_nv9zA/s1600/arrow.gif) no-repeat left 5px;padding-left:20px;display:block;margin:0;float:left}

Lưu Template.

Bước 3. Vào Page Elements, chỉnh sửa tiện ích có tiêu đề Bài xem nhiều, hiển thị dạng All time, chọn image thumbnail, snippet và chỉ hiển thị 1 bài viết. Tiếp tục chỉnh sửa tiện ích có tiêu đề Bài đăng phổ biến, hiển thị dạng Last 7 days, chọn snippet (không chọn thumbnail) và cho hiển thị 5-7 bài viết. Làm như thế này để tránh trường hợp bài viết phổ biến thứ nhất có ảnh đại diện lặp lại ở danh mục các bài viết phổ biến không có ảnh đại diện do sử dụng đến 2 tiện ích Popular Posts.