Hướng dẫn post truyện tranh từ file PDF trên drive google cho blogspot hiệu quả nhất

Bài viết này mình sẽ hướng dẫn cách post truyện tranh file PDF từ drive google một cách nhanh và hiệu quả nhất
Giới thiệu qua một chút về nội dung chính trong bài viết này

1. Đoạn JS có chức năng phân trang cho từng file PDF (từng tập)
2. Chỉ khi nào click vào tập truyện tương ứng mới bắt đầu load file PDF chứ không load ngay từ đầu nên không lo về thời gian tải trang
3. Có tool hỗ trợ chuyển đổi link sang HTML chỉ với vài thao tác đơn giản, truyện có vài trăm tập cũng chỉ mất vài giây 😁

JS

Để tạo phân trang cho từng tập truyện bạn sử dụng đoạn JS sau

<script>
  const itemsPerPage = 1; //Bạn có thể thay số này nếu muốn một trang hiển thị bao nhiêu tập
  const list = document.getElementById('comics');
  const paginationTop = document.getElementById('paginationTop');
  const paginationBottom = document.getElementById('paginationBottom');
  const items = list.getElementsByTagName('li');
  const numPages = Math.ceil(items.length / itemsPerPage);
  let currentPage = 1;
  const loadedPages = {};

  function showPage(page) {
    for (let i = 0; i < items.length; i++) {
      if (i < page * itemsPerPage && i >= (page - 1) * itemsPerPage) {
        items[i].style.display = 'block';
      } else {
        items[i].style.display = 'none';
      }
    }
    loadPDF(page);
  }

  function loadPDF(page) {
    const iframe = items[page - 1].querySelector('iframe');
    const src = iframe.getAttribute('data-src');
    if (!loadedPages[src]) {
      iframe.src = src;
      loadedPages[src] = true;
    }
  }

  function createPagination(paginationContainer) {
    for (let i = 1; i <= numPages; i++) {
      const a = document.createElement('a');
      a.href = '#comics';
      a.classList.add('button');
      a.textContent = "Tập " + i;
      if (i === currentPage) {
        a.classList.add('active');
      }
      a.onclick = function() {
        currentPage = i;
        showPage(currentPage);
        loadPDF(currentPage);
        updatePagination();
      };
      paginationContainer.appendChild(a);
    }
  }

  function updatePagination() {
    paginationTop.innerHTML = '';
    paginationBottom.innerHTML = '';
    createPagination(paginationTop);
    createPagination(paginationBottom);
  }

  showPage(currentPage);
  createPagination(paginationTop);
  createPagination(paginationBottom);
</script>

HTML

Để hiển thị nội dung các tập truyện bạn sử dụng cấu trúc HTML sau

<div id="paginationTop" class="pagination"></div>
<ul id="comics">
<li><iframe class="custom-iframe"  data-src="https://drive.google.com/file/d/1zIqr2qYhps5vhpmvNKktolL40O7EiZAy/preview"></iframe></li>
<li><iframe class="custom-iframe"  data-src="https://drive.google.com/file/d/1SxpRkQf6zPeA4qi0mBHDYDkPV3-huOCJ/preview"></iframe></li>
<li><iframe class="custom-iframe"  data-src="https://drive.google.com/file/d/1tst178iILSGezgzkFEiC6nnXP_ESLBbs/preview"></iframe></li>
</ul>
<div id="paginationBottom" class="pagination"></div>

Đoạn code màu đỏ chính là nội dung từng tập truyện, và ở bài viết này từng tập truyện sẽ là iframe chứa file PDF tại drive google theo cú pháp

<iframe class="custom-iframe"  data-src="https://drive.google.com/file/d/1zIqr2qYhps5vhpmvNKktolL40O7EiZAy/preview"></iframe>

1zIqr2qYhps5vhpmvNKktolL40O7EiZAy chính là ID của file PDF, tuy nhiên nếu lấy từng ID để dán vào thì hơi "xương" vì thế nên mình tạo ra tool bên dưới để giúp anh em thực hiện nhanh việc này

Tool đổi link thành HTML

Tại thư mục chứa truyện tranh, các bạn chọn hết danh sách file PDF các tập truyện sau đó click vào icon như ảnh dưới Sau đó dán toàn bộ nội dung đã copy vào khung dưới rồi click button chuyển đổi
Chuyển đổi Reset

Copy đoạn mã đã chuyển đổi thay thế vào nội dung các tập ở bên trên

CSS

Cuối cùng thêm giao diện cho các button và nội dung truyện

<style>
.custom-iframe {
    width: 90%;
    height: 88vh;
    border: 0;
}
.pagination a {
    display: inline-block;
    margin-right: 5px;
    cursor: pointer;
}

.button {
    border-radius: 3px;
    background: #005b53;
    color: #fff;
    text-decoration: none;
    padding: 5px 10px;
    margin-bottom: 5px;
    border: 0;
}

.button:hover {
    background: #000;
}

.active {
	background: #333333!important;
}
</style>

Ok, vậy là anh em có thể đăng toàn bộ các tập truyện lên một bài viết rồi, không cần qua nhiều thao tác cũng như phải tạo từng trang cho từng tập nữa 😁
Đừng quên để lại bình luận nếu có góp ý hoặc thắc mắc các vấn đề liên quan đến bài viết, bye! 👋🏻