Tiện ích bài đăng phổ biến - Popular Posts hầu như đều được các blogger sử dụng. Vì đơn giản nó là 1 tiện ích thống kê tốt, chính xác, hoàn toàn không dùng tới javascript. Trong bài viết này tôi sẽ hướng dẫn bạn tùy biến nó với bài viết đầu nổi bật, vừa đẹp vừa cải thiện tốc độ cho trang web
Xem demo
Style này chắc bạn cũng đã từng gặp qua rồi, tuy nhiên tôi chắc chắn với bạn rằng những thủ thuật trước đó chỉ dùng css để ẩn đi thumbnail các bài viết thứ n+1, về mặt hiệu suất hoàn toàn không cải thiện được vì vẫn phải tải đủ số ảnh thumbnail quy định
Để khắc phục tình trạng trên bạn chỉ cần can thiệp 1 chút vào mã xml của widget Popular Posts, cụ thể như sau
Với widget v2
Bạn tạo mới hoặc thay thế widget cũ bằng code sau (lưu ý dán code trong phạm vi b:section)
<b:widget id='PopularPosts69' locked='false' title='Popular Posts' type='PopularPosts' version='2' visible='true'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</b:widget-setting>
<b:widget-setting name='showThumbnails'>true</b:widget-setting>
<b:widget-setting name='showSnippets'>true</b:widget-setting>
<b:widget-setting name='timeRange'>ALL_TIME</b:widget-setting>
</b:widget-settings>
<b:includable id='main' var='this'>
<b:include name='widget-title'/>
<div class='widget-content custom-popular'>
<div class='posts'>
<b:loop index='i' values='data:posts' var='post'>
<b:if cond='data:i == 0'>
<!-- nth-of-type(1) -->
<div class='post'>
<div class='post-thumb'>
<a expr:href='data:post.url' expr:title='data:post.title'>
<img expr:src='data:post.featuredImage ? (data:post.featuredImage resizeImage 576) : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsBjiOALM35ezp8G4HTJYHzZpa45ujkJU-NZfh6u48ehhoC9vEuZ-wVzXOoWxEkMMG2pJ-WE_vJ69GEhUPMswws3zlgzbn5NQsNO4WxzmJeZIJuJwZtiz2Ex-tcB6sZsG9UAcuDyXGh4_u/s1600/nth.png"'/>
</a>
</div>
<div class='post-info'>
<h3 class='post-title'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
</h3>
<div class='post-meta'>
<span><data:post.author.name/></span> - <span expr:datetime='data:post.date.iso8601'><data:post.date/></span>
</div>
</div>
</div>
<b:else/>
<!-- nth-of-type(n+1) -->
<div class='post'>
<div class='post-info'>
<h3 class='post-title'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.title/></a>
</h3>
</div>
</div>
</b:if>
</b:loop>
</div>
</div>
<style type='text/css'>/*<![CDATA[*/
.PopularPosts .custom-popular{counter-reset:posts-counter}
.PopularPosts .custom-popular .post{overflow:initial;margin:0 0 20px!important;counter-increment:posts-counter;position:relative}
.PopularPosts .custom-popular .post .post-thumb{width:100%;height:210px}
.PopularPosts .custom-popular .post .post-thumb img{width:100%;height:100%;-webkit-transition:all 0.3s linear;-o-transition:all 0.3s linear;-moz-transition:all 0.3s linear;transition:all 0.3s linear}
.PopularPosts .custom-popular .post .post-thumb img:hover{-webkit-filter:grayscale(1);filter:grayscale(1)}
.PopularPosts .custom-popular .post .post-info .post-title{line-height:1.4;margin:0;padding-left:30px;font-weight:600;font-size:14px}
.PopularPosts .custom-popular .post .post-info .post-title a{color:#000;-webkit-transition:all 0.3s linear;-o-transition:all 0.3s linear;-moz-transition:all 0.3s linear;transition:all 0.3s linear}
.PopularPosts .custom-popular .post .post-info .post-title a:hover{color:#2187e7}
.PopularPosts .custom-popular .post::before{content:counter(posts-counter);display:inline-block;background:#333;color:#fff;width:22px;height:22px;line-height:22px;text-align:center;font-weight:600;font-size:14px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;z-index:10;position:absolute;left:0;top:5px}
.PopularPosts .custom-popular .post:nth-of-type(1) .post-info .post-title{margin:12px 0 5px;padding-left:0}
.PopularPosts .custom-popular .post:nth-of-type(1) .post-info .post-meta{font-size:14px}
.PopularPosts .custom-popular .post:nth-of-type(1)::before{top:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
/*]]>*/</style>
</b:includable>
<b:includable id='emailPostIcon'/>
<b:includable id='footerBylines'/>
<b:includable id='headerByline'/>
<b:includable id='postContent' var='post'/>
<b:includable id='postLabels'/>
<b:includable id='sharingButtonContent'/>
<b:includable id='snippetedPostContent'/>
</b:widget>Rất dễ hiểu đúng không, ta chỉ cần cho 1 biến chạy trong vòng lặp và set thumbnail cho bài viết đầu tiên (index=0), các bài còn lại chỉ hiển thị ra title và liên kết
Với widget v1
Nhược điểm của v1 đó là bạn chỉ hiển thị được tiêu đề và liên kết, các thông tin như tác giả và ngày đăng sẽ không khả dụng, code như sau
<b:widget id='PopularPosts69' locked='false' title='Popular Posts' type='PopularPosts' version='1'>
<b:widget-settings>
<b:widget-setting name='numItemsToShow'>10</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 custom-popular'>
<div class='posts'>
<b:loop index='i' values='data:posts' var='post'>
<b:if cond='data:i == 0'>
<!-- nth-of-type(1) -->
<div class='post has-thumb'>
<div class='post-thumb'>
<a expr:href='data:post.href' expr:title='data:post.title'>
<img expr:src='data:post.featuredImage ? (data:post.featuredImage resizeImage 576) : "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgsBjiOALM35ezp8G4HTJYHzZpa45ujkJU-NZfh6u48ehhoC9vEuZ-wVzXOoWxEkMMG2pJ-WE_vJ69GEhUPMswws3zlgzbn5NQsNO4WxzmJeZIJuJwZtiz2Ex-tcB6sZsG9UAcuDyXGh4_u/s1600/nth.png"'/>
</a>
</div>
<div class='post-info'>
<h3 class='post-title'>
<a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
</h3>
<div class='post-meta'>
<span class='p-author'/> - <span class='p-date'/>
</div>
</div>
</div>
<b:else/>
<!-- nth-of-type(n+1) -->
<div class='post'>
<div class='post-info'>
<h3 class='post-title'>
<a expr:href='data:post.href' expr:title='data:post.title'><data:post.title/></a>
</h3>
</div>
</div>
</b:if>
</b:loop>
</div>
</div>
<style type='text/css'>/*<![CDATA[*/
.PopularPosts .custom-popular{counter-reset:posts-counter}
.PopularPosts .custom-popular .post{overflow:initial;margin:0 0 20px!important;counter-increment:posts-counter;position:relative}
.PopularPosts .custom-popular .post .post-thumb{width:100%;height:210px}
.PopularPosts .custom-popular .post .post-thumb img{width:100%;height:100%;-webkit-transition:all 0.3s linear;-o-transition:all 0.3s linear;-moz-transition:all 0.3s linear;transition:all 0.3s linear}
.PopularPosts .custom-popular .post .post-thumb img:hover{-webkit-filter:grayscale(1);filter:grayscale(1)}
.PopularPosts .custom-popular .post .post-info .post-title{line-height:1.4;margin:0;padding-left:30px;font-weight:600;font-size:14px}
.PopularPosts .custom-popular .post .post-info .post-title a{color:#000;-webkit-transition:all 0.3s linear;-o-transition:all 0.3s linear;-moz-transition:all 0.3s linear;transition:all 0.3s linear}
.PopularPosts .custom-popular .post .post-info .post-title a:hover{color:#2187e7}
.PopularPosts .custom-popular .post::before{content:counter(posts-counter);display:inline-block;background:#333;color:#fff;width:22px;height:22px;line-height:22px;text-align:center;font-weight:600;font-size:14px;-webkit-border-radius:100%;-moz-border-radius:100%;border-radius:100%;z-index:10;position:absolute;left:0;top:5px}
.PopularPosts .custom-popular .post:nth-of-type(1) .post-info .post-title{margin:12px 0 5px;padding-left:0}
.PopularPosts .custom-popular .post:nth-of-type(1) .post-info .post-meta{font-size:14px}
.PopularPosts .custom-popular .post:nth-of-type(1)::before{top:0;-webkit-border-radius:0;-moz-border-radius:0;border-radius:0}
/*]]>*/</style>
</b:includable>
</b:widget>Tùy chỉnh: bạn tự chỉnh css theo ý thích của mình, nếu bị báo trùng id widget bạn thay thành con số khác
Như vậy tôi đã giới thiệu xong cho bạn một mẫu bài đăng phổ biến khá đẹp, có đánh số thứ tự cũng như làm nổi bật bài nhiều view nhất với thumbnail vừa đẹp vừa nhẹ
Thủ thuật không khó hi vọng bạn áp dụng thành công cho blog của mình
Good Luck !
1. Không vi phạm luật pháp nước CHXHCN Việt Nam
2. Không vi phạm thuần phong mỹ tục Việt Nam
3. Không bàn luận vấn đề liên quan đến tôn giáo, chính trị
4. Không đả kích, chửi bới hay đưa ra những lời nói không phù hợp với mục tiêu của website
5. Không bình luận với mục đích quảng cáo, trao đổi, mua bán
6. Khuyến khích sử dụng Tiếng Việt có dấu, hạn chế sử dụng tiếng lóng, viết tắt
7. Khi cần sự trợ giúp, vui lòng miêu tả chi tiết lỗi và để lại link đính kèm, tránh nói chung chung gây mất thời gian cho đôi bên