7.11.23 |
10
nhận xét
|
lượt xem
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>
Theo lượt xem nữa đi Huy
REPLY DELETENền tảng blogspot này không cung cấp dữ liệu lượt xem trong feed nên không làm được bác ạ :D
REPLY DELETEhhi đố rep đc cá này
REPLY DELETEMình không hiểu???
REPLY DELETEsao thấy chỗ lk link bị lỗi favicon
REPLY DELETEKhông hiểu nữa, cái này hệ thống của blogspot nó tự lấy favicon, thỉnh thoảng nó lại bị lỗi hình ảnh :(
REPLY DELETEGet theo link dạng này hả https://www.blogspotvn.net/favicon.ico
REPLY DELETEKhông hiểu cơ chế của nó sao nữa, tính năng này nó có sẵn từ widget blog list
REPLY DELETEgiờ lại thấy nó hiện rồi kìa :v
REPLY DELETEHe he, giờ fix luôn có định theo dạng domain + /favicon.ico nên hiển thị ổn định hơn :D
REPLY DELETE