Code load toàn bộ trang có Loadmore

Chia sẻ tới các bạn Code load toàn bộ trang 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.

Chia sẻ code hiển thị toàn bộ trang của 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/pages/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 publishedDate = new Date(post.published.$t).toLocaleDateString();

        var listItemHTML = `<li><img src="${thumbnailUrl}" alt="${postTitle}"/><div>${alternateLink ? `<a href="${alternateLink.href}" target="_blank">${postTitle}</a>` : `<strong>${postTitle}</strong>`}<br/><span>Ngày đăng: ${publishedDate}</span></div></li>`;
        postList.append(listItemHTML);
      });
    }
    $('#load-more').on('click', function() {
      loadPosts();
    });
    loadPosts();
  });
  //]]>
</script>