Cách tạo tiện ích bài viết gần đây và bài viết gần đây theo nhãn

Tiện ích bài viết gần đây hay recent posts và bài viết gần đây theo nhãn hay recent posts by label rất được sử dụng trong Blog thông thường vẫn đặt trong side bar bên phải bài viết hoặc nếu những bạn đã có kinh nghiệm sử dụng tiện ích bên cạnh các bài viết mới nhất ngoài trang chủ tạo thành mẫu có giao diện Tin tức, Tạp chí trông rất chuyên nghiệp.

Ưu điểm khi sử dụng tiện ích này có thể cài đặt hiển thị hoặc không hiển thị các thuộc tính dưới đây:

+ Số lượng bài viết
+ Ảnh bài viết
+ Số nhận xét
+ Thời gian đăng bài
+ Đoạn tóm tắt

Tất nhiên script sử dụng feed gọi dữ liệu bài viết là không thể thiếu, các bạn đặt đoạn script này trên thẻ </head>

Copy

<script src='https://cdn.rawgit.com/ns24h/js/master/recentposts.js'/>

Đặt tiếp đoạn script trước </body>

Copy

<script>

    $('.recentposts img').attr('src', function(i, src) {

        return src.replace('s72-c', 's1600')

    })

</script>

Tiếp theo các bạn vào bố cục chọn thêm tiện ích bên side bar tùy số lượng tiện ích mà bạn muốn hiển thị giả sử là 2 tiện ích một sử dụng cho bài viết gần đây và một sử dụng cho bài viết gần đây theo nhãn. Khi thêm xong các bạn vào mẫu chỉnh sửa tìm đến 2 tiện ích này chọn mở rộng tiện ích tìm đoạn <b:includable id='main'>...</b:includable> các bạn sửa thành áp dụng với bài viết mới

Copy

<b:includable id='main'>

<h2><data:title/></h2>

<div class='recentposts'>

<script>

var numposts = 5;

var showpostthumbnails = true;

var showcommentnum = true;

var showpostdate = true;

var showpostsummary = true;

var numchars = 100;

</script>

<script expr:src='&quot;/feeds/posts/default?published&amp;alt=json-in-script&amp;callback=labelthumbs&quot;'/>

<div class='clear'/>

</div>

</b:includable>

Trong đó:

numposts = 5; // Số lượng bài viết
showpostthumbnails = true; // Hiển thị hình ảnh
showcommentnum = true; // Số nhận xét thay true thành false nếu không muốn hiển thị
showpostdate = true; // Thời gian đăng bài thay true thành false nếu không muốn hiển thị
showpostsummary = true; // Tóm tắt thay true thành false nếu không muốn hiển thị
numchars = 100; // Số ký tự tóm tắt

Nếu áp dụng với tiện ích bài viết gần đây theo nhãn các bạn chỉ cần sửa đoạn script ở trên thành

Copy

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:content + &quot;?published&amp;alt=json-in-script&amp;callback=labelthumbs&quot;'/>

Viết đầy đủ

Copy

<b:includable id='main'>

<h2><data:title/></h2>

<div class='recentposts'>

<script>

var numposts = 5;

var showpostthumbnails = true;

var showcommentnum = true;

var showpostdate = true;

var showpostsummary = true;

var numchars = 100;

</script>

<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:content + &quot;?published&amp;alt=json-in-script&amp;callback=labelthumbs&quot;'/>

<div class='clear'/>

</div>

</b:includable>

Để hiển thị được bài viết gần đây theo nhãn các bạn vào bố cục chọn chỉnh sửa tiện ích thêm tên nhãn muốn hiển thị. Cứ như vậy bạn có thể thêm các tiện ích bài viết gần đây theo nhãn khác, phần css tạo style các bạn tự thiết kế cho phù hợp ví dụ:

Copy

.recentposts ul{margin:0;padding:0}

.recentposts ul li{float:left;padding:0 0 15px 0;list-style:none}

.recentposts .imageContainer{float:left;height:90px;margin-right:15px;width:145px}

.recentposts img{height:100%;width:100%}

.recentposts .label_title{color:#333;font:bold 16px Roboto,sans-serif;line-height:20px;display:-webkit-box;overflow:hidden;-webkit-line-clamp:4;-webkit-box-orient:vertical;text-overflow:ellipsis;white-space:unset}

.recentposts .post-summary{font-size:15px;line-height:1.6em;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden;text-overflow:ellipsis;padding-top:15px;display:none}

Chấm hết bài!!!

Nội dung chính