Cara Membagi Halaman Postingan Menjadi Beberapa Halaman dengan Nomor

Cara Membagi Halaman Postingan Menjadi Beberapa Halaman dengan Nomor

cara membuat halaman selanjutnya di blogspot pada postingan
Cara membagi postingan menjadi beberapa halaman

Membagi konten/artikel menjadi beberapa halaman dengan navigasi number halaman


Tulisan Panda - Mungkin kamu pernah membaca berita atau membaca komik disebuah web tertentu. Dimana, isi artikel atau postingan kontennya dibagi menjadi beberapa halaman. Pemisahan halaman ini diberi nomor halaman, sehingga lebih mudah untuk diakses

Contohkan saja web berita, seperti kompas.com yang kadang-kadang memotong halaman postingan menjadi beberapa bagian, seperti dua halaman. Untuk berpindah kehalaman berikutnya, anda hanya perlu klik number yang selanjutnya

Cara kerjanya adalah, dengan membagi beberapa paragraf menjadi beberapa bagian halaman baru. Ketika nomor halaman diklik, maka secara otomatis akan dipindahkan kehalaman yang dituju

Manfaat Membagi Konten ke Beberapa Halaman


  • Halaman blog akan menjadi lebih rapi, singkat dan cocok untuk situs baca komik,berita yang memiliki artikel yang panjang. Sehingga tidak perlu menggulir atau menscrool halaman terlalu lama
  • Sangat cocok untuk web berita, web novel, maupun blog atau situs baca komik
  • Dijadikan penanda bagi pembaca untuk melanjutkan bacaannya
  • Menambah jumlah page view, karena setiap klik halaman maka otomatis akan menjalankan fungsi refresh
Memasang pagination number di postingan ini saya dapatkan di situs arlinadesign, dan sudah menerapkannya pada blog saya. Dan bekerja dengan baik,

Tertarik untuk membagi konten post menjadi beberapa halaman? Ini tutor nya

Membagi Halaman di Postingan dengan Nomor Navigasi


  • Buka Blogger anda > Klik Template > Klik HTML > Kemudian tambahkan CSS ini tepat diatas </head>
  • <b:if cond='data:blog.pageType != &quot;index&quot;'>
    <style type='text/css'>
    /* Membagi Halaman di Postingan */
    .post-content,.pagearl br{display:none}.arlinapage{text-align:center;margin:30px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}.pagearl{margin:30px auto;text-align:center;padding:0;overflow:hidden}.pagearl .buttonar{background:#fff;font-weight:400;display:inline-block;color:#222;text-decoration:none;text-align:center;border:1px solid rgba(0,0,0,0.1);border-right:0;margin:auto;font-size:14px;padding:.4rem .75rem;transition:all .1s}.pagearl .buttonar:last-child{border-right:1px solid rgba(0,0,0,0.1)}.pagearl .buttonar:hover,.pagearl .buttonar:active{background:#fafafa;color:#222}.buttonar.arlinapage{background:#3498DB;border-color:#3498DB;color:#fff;transition:all .1s}.buttonar.arlinapage:hover{background:#2980B9;border-color:#2980B9;color:#fff}
    </style>
    </b:if>
  • Lalu tambahkan script berikut sebelum </body>
  • <b:if cond='data:blog.pageType != &quot;index&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    function get_n(halaman){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===halaman)return void 0===o[1]||o[1]}$(document).ready(function(){var halaman=get_n("halaman");$(".post-content").hide(),void 0===halaman?$(".content_1").show():$(".content_"+halaman).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$(".pagearl").append($('<a href="'+t+"?halaman="+i+'" class="buttonar n'+i+'"> '+i+" </a>"))}else $(".pagearl").hide();void 0==halaman&&$(".buttonar.n1").toggleClass("arlinapage"),halaman==halaman&&$(".buttonar.n"+halaman).toggleClass("arlinapage")});
    //]]>
    </script>
    </b:if>
  • Klik Simpan Tema

Cara Menerapkan Pagination Number di Halaman Post


Untuk memasang dan menerapkannya pada postingan, bisa dilakukan dengan cara berikut
  • Pasang HTML berikut pada halaman postingan tepatnya di bagian HTML bukan Compose
  • <div class="post-content content_1">
    ISI ARTIKEL DI SINI
    </div>
    <div class="post-content content_2">
    ISI ARTIKEL DI SINI
    </div>
    <div class="post-content content_3">
    ISI ARTIKEL DI SINI
    </div>
    <div class="post-content content_4">
    ISI ARTIKEL DI SINI
    </div>
    <div class="post-content content_5">
    ISI ARTIKEL DI SINI
    </div>
    

    Perhatikan kode diatas, anda hanya perlu menambahkan nomor pada code diatas jika dibutuhkan

  • Langkah terakhir yaitu menampilkan Nomor navigasi, pasang kode dibawah ini tepat paling bawah konten atau postingan anda
  • Dan, simpan atau publikasikan postingan

Membagi postingan kebeberapa halaman ini sangat mudah untuk dilakukan,bukan?