Hướng dẫn A-Z thêm nút "TẢI THÊM" (Load More AJAX) vào giao diện Blogger chuẩn XML

/* --- LOAD MORE BUTTON STYLES --- */
.load-more-wrapper {
 text-align: center;
 margin-top: 40px;
}
.load-more-btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 gap: 8px;
 background: var(--surface-card);
 color: var(--text);
 border: 1px solid var(--border);
 padding: 12px 30px;
 border-radius: 20px;
 font-size: 14.5px;
 font-weight: 600;
 cursor: pointer;
 transition: all 0.2s ease;
}
.load-more-btn:hover {
 background: var(--accent);
 border-color: var(--accent);
 color: #ffffff;
}
.load-more-btn.loading {
 opacity: 0.7;
 cursor: wait;
}
.load-more-btn.no-more {
 display: none;
}

<b:include name='nextprev'/>
</b:if>
</b:includable>

               <b:if cond='data:olderPageUrl'>
                 <div class='load-more-wrapper'>
                   <button class='load-more-btn' id='loadMoreBtn' expr:data-url='data:olderPageUrl'>
                     <span class='btn-text'>Tải thêm bài viết</span>
                   </button>
                 </div>
               </b:if>
             </b:if>
           </b:includable>

   /* --- HỆ THỐNG TẢI THÊM BÀI VIẾT (LOAD MORE AJAX) --- */
   document.addEventListener('DOMContentLoaded', function() {
     var loadMoreBtn = document.getElementById('loadMoreBtn');

     if (loadMoreBtn) {
       loadMoreBtn.addEventListener('click', function() {
         var nextUrl = loadMoreBtn.getAttribute('data-url');
         if (!nextUrl) return;

         var btnText = loadMoreBtn.querySelector('.btn-text');
         loadMoreBtn.classList.add('loading');
         btnText.textContent = 'Đang tải...';

         fetch(nextUrl)
           .then(function(response) {
             return response.text();
           })
           .then(function(htmlText) {
             var parser = new DOMParser();
             var doc = parser.parseFromString(htmlText, 'text/html');

             // Lấy các bài viết mới từ trang kế tiếp
             var newPosts = doc.querySelectorAll('.posts-grid .post-card');
             var postsGrid = document.querySelector('.posts-grid');

             if (newPosts.length > 0 && postsGrid) {
               newPosts.forEach(function(post) {
                 postsGrid.appendChild(post);
               });
             }

             // Cập nhật đường dẫn nút "Tải thêm" cho các trang sau
             var newNextBtn = doc.getElementById('loadMoreBtn');
             if (newNextBtn && newNextBtn.getAttribute('data-url')) {
               loadMoreBtn.setAttribute('data-url', newNextBtn.getAttribute('data-url'));
               loadMoreBtn.classList.remove('loading');
               btnText.textContent = 'Tải thêm bài viết';
             } else {
               // Đã hết bài viết
               loadMoreBtn.classList.remove('loading');
               loadMoreBtn.classList.add('no-more');
             }
           })
           .catch(function(err) {
             console.error('Lỗi tải thêm bài viết:', err);
             loadMoreBtn.classList.remove('loading');
             btnText.textContent = 'Thử lại';
           });
       });
     }
   });