Tiện ích Bài đăng phổ biến bố trí chiều ngang

Các bạn có thể thấy tại trang chủ của Thủ thuật Blogger có một list 5 bài viết nóng nhất trong tháng được bố trí theo chiều ngang. Tiện ích này được hình thành từ ý tưởng thiết kế một tiện ích riêng tặng cho bạn Nguyễn Đức, là một tác giả vừa gia nhập Thủ thuật Blogger. Ban đầu mình còn nghĩ sẽ tạo thêm hiệu ứng trượt ngang cho tiện ích này, nhưng rồi mình không phát triển ý tưởng này vì vốn dĩ mình không thích các hiệu ứng rất tốn tài nguyên, hơn nữa tiện ích này sử dụng bản gốc tiện ích Popular Posts chỉ hiển thị tối đa 10 bài đăng nên hiệu ứng trượt có thể không cần thiết. Nhờ ý nghĩ về quà tặng cho các tác giả đã gia nhập Thủ thuật Blogger mà mình có thêm cảm hứng mới, rốt cuộc đã cho ra đời thêm một tiện ích như vậy, các bạn có thể chiêm ngưỡng và bắt đầu cài đặt cho blogspot của mình nếu thấy cần thiết.




Tiện ích này cần được đặt dưới phần Header và trên phần content-wrapper vì thế chúng ta cần tạo thêm một phần crosscol-wrapper nằm giữa 2 thành phần nói trên. Về việc tạo riêng crosscol-wrapper cho blogspot, bạn có thể đọc thêm ở bài viết này. Ở đây mình đã tích hợp gắn tiện ích Popular Posts vào phần crosscol-wrapper này rồi.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Chọn Expand Widget Templates.

Tìm dòng <div id='content-wrapper'> và đặt trước nó với đoạn code bên dưới.

<div id='crosscol-wrapper'>

<b:section class='crosscol' id='crosscol' preferred='yes'>

<b:widget id='PopularPosts200' locked='false' title='' type='PopularPosts'>
<b:includable id='main'>
<b:if cond='data:title'><h2><data:title/></h2></b:if>
<!-- Horizontally Styled Popular Posts widget by www.vntai.com -->
<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' expr:title='data:post.snippet'><data:post.title/></a>
</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 alt='' border='0' expr:src='data:post.thumbnail'/>

</a>

<b:else/>

<a expr:href='data:post.href' target='_blank'>

<img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhkLNC8n2tNF48XD8Vv6A8Rg15ZJI2dPUufTvKweIqqYQQXGVaV-WCSA9UOLtDmhrBUvmd_V1ZDS7RasS_kPUwgYWSBQtsXu4Z0y0t96fnWGitRQcNXlhKnpzXN9DWGDk0KUMlctfK0-pQ/'/>

</a>

</b:if>

</div>

<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>
</li>
</b:loop>
</ul>
</div>
</b:includable>
</b:widget>

</b:section>

</div>
<div style='clear: both;'/>

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

#crosscol-wrapper{margin: 0 auto; padding:0}
#PopularPosts200{width: 100%; margin: 0px auto; padding: 5px 0px}
#PopularPosts200 h2{display:none}
#PopularPosts200 .widget-content{float:left;margin:0; padding:0}
#PopularPosts200 .widget-content ul {margin: 0 auto;padding:0;width: 100%; list-style:none}
#PopularPosts200 .widget-content ul li {margin:0 6px 10px 6px;width: 175px;padding:10px;height: 100px; overflow:hidden;list-style:none; float:left; border: 1px solid #DDD;}
#PopularPosts200 .item-content{font-size: 14px; text-align:left; padding: 5px 10px}
#PopularPosts200 img{margin:0;padding:0; background: #fff; float:left;width:65px;height:65px;border: 1px solid #DDD}
#PopularPosts200 .item-title{line-height:1.3em}

Lưu Template là xong. Sau đó có thể vào Page Elements chỉnh sửa tiện ích để chọn bài phổ biến theo tuần, theo tháng hoặc toàn thời gian. Riêng về CSS nói trên, mình để ngỏ để các bạn tùy ý tùy biến sao cho phù hợp với giao diện blogspot của bạn. Nếu gặp vấn đề gì (đối với newbie) xin vui lòng lưu lại thông tin ở phần Comments để mình sắp xếp giải đáp.