Top các bài viết theo nhãn cho blogspot

7.11.23 | 10 nhận xét | lượt xem
Nội Dung Chính [Ẩn] [Hiển thị]
    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ày

    Top 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>
      
      1. 5 Số lượng bài hiển thị
      2. s150 Kích thước thumbnail
      3. URL_HINH_ANH_MAC_DINH thumbnail mặc định cho bài viết không có ảnh
      4. 70 Giới hạn ký tự hiển thị nội dung tóm tắt bài viết
      5. huydc.net thay thế tên miền của bạn
      6. 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>
        Bạn đang xem bài viết "Top các bài viết theo nhãn cho blogspot" tại chuyên mục: Blogspot

          10

          nhận xét
          Mới nhất ⇅

          Chèn hình ảnh: Chỉ cần dán link hình ảnh - Upload ảnh

          Chèn code: [pre]Code đã mã hóa [/pre]

          Chèn emoji: Nhấn tổ hợp phím “Windows + . (dấu chấm)”

          Chèn link: Click để chèn link