Template Blogger Premium DISINI

Cara Menambahkan Paginasi Responsive di Halaman Postingan

Cara Menambahkan Paginasi Postingan Blogger Responsive
Harap tunggu 0 detik...
Selamat! Link Berhasil Dimuat.
Gulir ke Bawah dan klik Lanjut ke Link Tujuan untuk membuka Link Tujuan
Cara Menambahkan Paginasi Postingan Blogger Responsive
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.


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.

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:

Posting Komentar

Cara Berkomentar bagi yang tidak memiliki blog:
1. Klik select profile --> pilih "Name/URL".
2. Isi nama Anda dan isi dengan alamat facebook Anda.
3. Klik "Lanjutkan".
4. Ketik komentar Anda.
5. Klik "Publish".
6. Centang "CAPTCHA" yang menyatakan bahwa Anda bukan robot.
7. Klik "Publish".
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.