Top các bài viết theo nhãn cho blogspot
4 min read
Bài viết này mình hướng dẫn anh em thêm Top bài viết theo label và thứ tự các bài viết này sẽ sắp xếp dựa theo số lượng nhận xét, vì thế nên bạn nào không sử dụng nhận xét của blogspot thì bỏ qua bài viết này nhé
Demo
Demo bên dưới là 5 bài viết có nhận xét nhiều nhất và xếp theo thứ tự của nhãn Blogspot ở blog nàyTop bài viết theo nhãn
Javascript
<script>
function stripHtml(html) {
var tmp = document.createElement("div");
tmp.innerHTML = html;
return tmp.textContent || tmp.innerText || "";
}
//<![CDATA[
function PostsByComments(json) {
var postList = document.getElementById("hot-posts-list").getElementsByTagName("ul")[0];
var allEntries = json.feed.entry;
allEntries.sort(function (a, b) {
var commentsA = a.thr$total ? parseInt(a.thr$total.$t, 10) : 0;
var commentsB = b.thr$total ? parseInt(b.thr$total.$t, 10) : 0;
return commentsB - commentsA;
});
var selectedEntries = allEntries.slice(0, 5);
for (var i = 0; i < selectedEntries.length; i++) {
var entry = selectedEntries[i];
var entryUrl = entry.link[entry.link.length - 1].href;
var entryTitle = entry.title.$t;
var entryImage = entry.media$thumbnail ? entry.media$thumbnail.url.replace('/s72-c/', '/s150-c/') : 'URL_HINH_ANH_MAC_DINH';
var commentsCount = entry.thr$total ? parseInt(entry.thr$total.$t, 10) : 0;
var entrySummary = ('content' in entry) ? entry.content.$t : '...';
var strippedSummary = stripHtml(entrySummary);
var limitedSummary = strippedSummary.length > 70 ? strippedSummary.substring(0, 70) + '...' : strippedSummary;
var listItem = document.createElement("li");
var imgElement = document.createElement("img");
imgElement.src = entryImage;
imgElement.title = entryTitle;
var anchorElement = document.createElement("a");
anchorElement.href = entryUrl;
anchorElement.title = entryTitle;
anchorElement.textContent = entryTitle;
var commentsElement = document.createElement("p");
commentsElement.textContent = commentsCount + " nhận xét";
commentsElement.className = "cmcount";
var summaryElement = document.createElement("p");
summaryElement.textContent = limitedSummary;
summaryElement.className = "sniped";
listItem.appendChild(imgElement);
listItem.appendChild(anchorElement);
listItem.appendChild(commentsElement);
listItem.appendChild(summaryElement);
postList.appendChild(listItem);
}
}
//]]>
</script>
<script>
var apiUrl = 'https://www.huydc.net/feeds/posts/default/-/Blogspot?max-results=100&alt=json-in-script&callback=PostsByComments';
var scriptElement = document.createElement('script');
scriptElement.src = apiUrl;
document.body.appendChild(scriptElement);
</script>
- 5 Số lượng bài hiển thị
- s150 Kích thước thumbnail
- URL_HINH_ANH_MAC_DINH thumbnail mặc định cho bài viết không có ảnh
- 70 Giới hạn ký tự hiển thị nội dung tóm tắt bài viết
- huydc.net thay thế tên miền của bạn
- Blogspot?max-results=100 Tên nhãn
CSS
#hot-posts-list ul li {position: relative;float: left;border: 0 none;margin-right: 11px;width: calc(20% - 11px);overflow: hidden;}
#hot-posts-list ul li a {font-weight: bold;}
#hot-posts-list ul li img {border: 1px solid #ddd;width: calc(100% - 2px);height: auto;background: #FFF;}
#hot-posts-list ul li div{position:absolute;z-index:99;margin-left:-999em}
#hot-posts-list ul li .title{border:1px solid #CCC;background:#FFF;padding:5px 10px}
#hot-posts-list ul li:hover img{border:1px solid #ca252b}
#hot-posts-list .cmcount{font-size:12px;color: gray;}
#hot-posts-list ul {padding-left: 0;counter-reset: popcount;}
#hot-posts-list ul li:before {padding: 5px 10px;counter-increment: popcount;content: counter(popcount);font-size: 15px;background: #ca252b;color: #ffffff;border-radius: 0;position: absolute;font-weight: bold;border: 2px solid #dddddd;box-shadow: 1px 2px 9px #ca252b;margin: 5px;}
HTML
<div id="hot-posts-list">
<ul></ul>
<div style='clear:both'/>
</div>