Cara Membuat Page Navigation For Blogger dengan Nomor Dibawah Postingan Blog Terlihat Bagus

Panduan Lengkap Cara Membuat Page Navigation For Blogger dengan Nomor Dibawah Postingan Blog Terlihat Bagus

https://Checktoolsblog.blogspot.com/

Pada kesempatan kali ini saya akan berbagi tutorial bagaimana Panduan  membuat postingan agar memiliki nomor navigasi dibawahnya.

dan pada postingan kali ini  Checktoolsblog akan berbagi tips bagaimana memberikan nomor navigasi pada sebuah postingan agar di setiap halaman memiliki nomor-nomor sesuai pembagian tersendiri.

Jika kalian pernah mengunjungi situs-situs berita atau situs manga yang di setiap isi postingannya biasanya akan terbagi menjadi beberapa halaman nah terkadang kita menemukan pada postingan postingan tersebut terdapat tombol next yang ketika kita menekan tombol tersebut akan mengarah ke halaman selanjutnya.

Panduan  kerjanya adalah membagi beberapa paragraf dari isi postingan menjadi beberapa bagian sesuai keinginan.

Lalu apa manfaat Membuat Nomor Navigasi Halaman Dibawah Posting Blog?

Halaman akan terasa lebih rapat dan cocok untuk kalian yang memiliki artikel dengan isi yang panjang dan menghemat tempat agar pengunjung tidak capek  menggulir halaman.

Cocok untuk situs berita dan situs situs yang memiliki postingan panjang.

Bisa dijadikan penanda/pembatas untuk pengunjung di halaman mana akan melanjutkan membaca nantinya.

Menambah jumlah viewers karena terdapat fungsi refresh halaman saat menekan tombol navigasi ke halaman berikut.

Membuat postingan terkesan rapih dan ringkas.

Akan lebih menguntungkan jika kalian telah memasang iklan di blog.

Panduan  membuat postingan agar memiliki nomor navigasi

Pertama-tama silahkan login di Blogger sobat.

Pada menu dasboard silahkan pilih Tema dan Edit HTML.

cari kode </head> dan letakan kode ini di bawahnya.

<b:if cond='data:blog.pageType != &quot;index&quot;'>

<style type='text/css'>

/* Membagi Halaman di Postingan */

.post-content,.pagearl br{display:none}.Checktoolsblogpage{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.Checktoolsblogpage{background:#3498DB;border-color:#3498DB;color:#fff;transition:all .1s}.buttonar.Checktoolsblogpage:hover{background:#2980B9;border-color:#2980B9;color:#fff}</style>

</b:if>

Setelah itu silahkan copy kode di bawah ini tepat di bawah tag </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("Checktoolsblogpage"),halaman==halaman&&$(".buttonar.n"+halaman).toggleClass("Checktoolsblogpage")});//]]>

</script>

</b:if>

Jangan lupa klik SIMPAN.

Nah selanjutnya untuk memanggil kode tersebut kita cukup mengatur lewat postingan, yaitu melalu 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>

Jika kalian ingin membagi postingan lebih dari tiga bagian, maka anda cukup menambahkan kode yang sama tapi dengan angka yang berbeda misal post-content content_4, post-content content_5

Dan langkah terakhir adalah memasukkan kode ini tepat di bawah <data:post.body/>

<div class="Checktoolsblogpage"></div>

<div class="pagearl">

</div>

Itu lah Panduan  membuat postingan agar memiliki nomor navigasi. Semoga bermanfaat