Code load toàn bộ bài viết có Loadmore

Chia sẻ tới các bạn Code load toàn bộ bài viết có Loadmore được code bởi Hòa Trần Blogger, cách cài đặt đơn giản, các bạn copy code dán vào trang hoặc dán vào Template đều được. Dưới đây là một ví dụ về mã nguồn để load toàn bộ bài viết trên Blogger có chức năng “Load More”. Bạn có thể tùy chỉnh mã này để phù hợp với giao diện của blog của bạn:

Chia sẻ code hiển thị toàn bộ bài viết blogspot có phân trang.

<style>
/*<![CDATA[*/
#sitemap-container{font-family:Arial,sans-serif;margin:0;padding:0;background-color:#f4f4f4;max-width:700px;margin:20px auto;background-color:#fff;padding:20px;box-shadow:0 0 10px rgba(0,0,0,0.1)}
#post-list{list-style:none;padding:0}
#post-list li{display:flex;align-items:stretch;border-bottom:1px solid #ccc;padding:10px 0}
#post-list img{max-height:100%;width:auto;border-radius:5px;box-shadow:0 0 5px rgba(0,0,0,0.1);margin-right:10px}
#post-list strong{color:#333}
#post-list span{color:#666}
#post-list a{text-decoration:none}
#post-list button{margin-top:10px;padding:8px 16px;background-color:#007bff;color:#fff;border:none;cursor:pointer}
#post-list button:disabled{background-color:#ccc;cursor:not-allowed}
#load-more-container{text-align:center;margin-top:20px}
#load-more{margin-top:10px;padding:8px 16px;background-color:#007bff;color:#fff;border:none;cursor:pointer;position:relative;overflow:hidden}
#load-more:hover{background-color:#0056b3}
#load-more:disabled{background-color:#ccc;cursor:not-allowed}
/*]]>*/
</style>
<div id="sitemap-container">
  <ul id="post-list"></ul>
  <div id='load-more-container'>
    <button id="load-more">Load More</button>
  </div>
</div>
<script>
  //<![CDATA[
  window.addEventListener('load', function() {
    var blogUrl = window.location.origin;
    var maxResults = 5; // Số lượng bài viết mỗi lần tải
    var startIndex = 1;

    function loadPosts() {
      var apiUrl = blogUrl + '/feeds/posts/default?alt=json-in-script&start-index=' + startIndex + '&max-results=' + maxResults + '&callback=?';
      $.ajax({
        url: apiUrl,
        method: 'GET',
        dataType: 'jsonp',
        success: function(data) {
          if (data.feed.entry) {
            displayPosts(data.feed.entry);
            startIndex += maxResults;
          } else {
            $('#load-more').prop('disabled', true).text('No more posts');
          }
        },
        error: function(error) {
          console.error('Error loading posts:', error);
        }
      });
    }

    function displayPosts(posts) {
      var postList = $('#post-list');
      $.each(posts, function(index, post) {
        var alternateLink = post.link.find(function(link) {
          return link.rel === "alternate";
        });
        var thumbnailUrl = post.media$thumbnail ? post.media$thumbnail.url : 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcvmJkK_24wsjyLlQ5qfpDrzhJLz5soRlIBofABfRsYA4iOVpA52zaaIPexkehs6SJZ1lZDkXvDkjySFzw7_K205QfwZVNLe0q86Mfgob-RiljqL-H06OJqJDk_1z-gzbZ94H-GkokfMY/h120/no-image.jpg';
        var postTitle = post.title.$t;
        var labels = post.category ? $.map(post.category, function(category) {
          return category.term;
        }) : [];
        var publishedDate = new Date(post.published.$t).toLocaleDateString();
        var labelLinks = labels.map(function(label) {
          return `<a href="/search/label/${label}" target="_blank">${label}</a>`;
        }).join(', ');
        var listItemHTML = `<li><img src="${thumbnailUrl}" alt="${postTitle}"/><div>${alternateLink ? `<a href="${alternateLink.href}" target="_blank">${postTitle}</a>` : `<strong>${postTitle}</strong>`}${labels.length > 0 ? `<br/><span>Nhãn: ${labelLinks}</span>` : ''}<br/><span>Ngày đăng: ${publishedDate}</span></div></li>`;
        postList.append(listItemHTML);
      });
    }
    $('#load-more').on('click', function() {
      loadPosts();
    });
    loadPosts();
  });
  //]]>
</script>