Cara Menambahkan Paginasi Responsive di Halaman Postingan

Cara Menambahkan Paginasi Postingan Blogger Responsive

Apakah Anda mencari cara untuk membagi postingan Blogger yang panjang ke dalam halaman yang berbeda dalam satu postingan?

Pada tutorial Blogger kali ini, saya akan menunjukkan cara menambahkan pagination posting ke situs web blogger Anda. Jadi, Anda dapat membagi satu posting blog panjang menjadi beberapa halaman di Blogger.

Jadi, mari kita simak dan pahami terlebih dahulu apa itu post pagination dan apa saja keuntungan dan kerugian menggunakannya pada postingan blog.

Apa itu Post Pagination?

Paginasi posting adalah teknik untuk membagi postingan blog yang panjang menjadi beberapa halaman dan pengguna dapat menavigasi ke halaman lain dengan mengklik tombol berikutnya dan sebelumnya.

Post Pagination meningkatkan keterbacaan konten Anda dan pengguna dapat dengan mudah mencerna konten dan membaca bagian yang mereka inginkan.

Selain itu, Paginasi Post juga membantu dalam meningkatkan tampilan halaman serta pendapatan Iklan karena interaksi pengguna akan meningkatkan halaman blog.

Jadi, mari kita simak cara membagi postingan Blogger menjadi beberapa halaman berikut ini.

Live Demo

---

Cara Menambahkan Paginasi Postingan

Untuk menambahkan paginasi postingan di Blogger, ikuti langkah-langkah berikut di bawah ini.

1. Masuk ke Dashboard Blogger dan Buka postingan blog dalam tampilan HTML.
2. Masukkan kode HTML di bawah ini untuk membagi postingan.

   <div class="page-content">
   
           <div class="page active">
           <!--Konten_halaman_1_disini-->
           </div>
   
           <div class="page">
           <!--Konten_halaman_2_disini-->
           </div>
   
           <div class="page">
           <!--Konten_halaman_3_disini-->
           </div>
    </div>

3. Ganti konten halaman di antara div class. (Konten halaman pertama menggantikan <!–Konten_halaman_1_disini–>), dan seterusnya.
4. Pastekan kode tombol pagination di bawah ini, pada postingan blog paling bawah.

   <!--Pagination Button-->
   <div class="pagination-container">
           <div class="page-numbers-container">
               
           </div>
       </div>

5. Selanjutnya, tempelkan kode CSS di bawah ini pada akhir postingan blog tadi atau di dalam Tema blog.

   <style>
   /* Post Pagination by elzeno.id */
   
   .pagination-container {
       display: flex;
       justify-content: center;
   }
   
   .pagination-container .page-numbers-container {
       display: flex;
       font-size: 18px;
       overflow: hidden;
       font-weight: bold;
       font-family: "raleway", sans-serif;
       border-radius: 20px;
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
   }
   
   .page-numbers-container .page-number {
       padding: 8px 24px;
       transition: all 400ms;
   }
   
   .page-numbers-container .page-number:hover {
       background: #c5c5e9;
       cursor: pointer;
   }
   
   .page-numbers-container .page-number.active {
       background: #17A589;
       color: #fff;
   }
   
   /* Page Content */
   
   .page-content .page {
       display: none;
   }
   
   .page-content .page.active {
       display: block;
   }
   </style>

6. Kemudian tempel kode Javascript di bawah ini, tepat setelah kode CSS tadi. (agar tombol berfungsi jika diklik).

   <script> 
   const pages = document.querySelectorAll(".page-content .page");
   const pageNumbersContainer = document.querySelector(".page-numbers-container");
   
   if (pageNumbersContainer) {
   
   	let pn = localStorage.getItem("pageNumber") ? localStorage.getItem("pageNumber") : 0;
   
   	const createPagination = () => {
   	    pages.forEach((p, i) => {
   	        const pageNumber = document.createElement("div");
   	        pageNumber.classList.add("page-number");
   	        pageNumber.textContent = i + 1;
   	        pageNumber.addEventListener("click", () => {
   				localStorage.setItem("pageNumber", i);
   				location.reload();
   	        })
   
   	        pageNumbersContainer.appendChild(pageNumber);
   	    })
   
   	    document.querySelector(".page-number").classList.add("active");
   	    pages[0].classList.add("active");
   	}
   
   	createPagination();
   
   	const pageNumbers = document.querySelectorAll(".page-numbers-container .page-number");
   
   	const activatePage = (pageNumber) => {
   	    pages.forEach(p => {
   	        p.classList.remove("active");
   	    })
   
   	    pages[pageNumber].classList.add("active");
   
   	    pageNumbers.forEach(p => {
   	        p.classList.remove("active");
   	    })
   
   	    pageNumbers[pageNumber].classList.add("active");
   
   		localStorage.removeItem("pageNumber");
   		history.scrollRestoration = "manual";
   	}
   
   	activatePage(pn);
   }
   </script>

7. Terakhir, publikasikan postingan blog Anda dan Anda telah berhasil menambahkan pagination postingan ke situs web Blogger Anda.

Dengan cara ini, Anda dapat dengan mudah membagi postingan panjang menjadi beberapa halaman di Blogger dan memberikan pengguna Anda pengalaman pengguna yang lebih baik di situs web tersebut.

Jika kalian bingung, kalian dapat bertanya di kolom Komentar. Terima kasih, semoga bermanfaat.

Lanjut ke Link Tujuan

Anda mungkin tertarik artikel ini :

Terima kasih telah membaca artikel kami yang berjudul: Cara Menambahkan Paginasi Responsive di Halaman Postingan, jangan lupa + IKUTI website kami dan silahkan bagikan artikel ini jika menurut Anda bermanfaat.

Dukung kami dengan memilih salah satu metode donasi di bawah ini:

Donasi via Saweria Donasi via Trakteer Donasi via PayPal Donasi via Scan Code