Tutorial Cara Membagi Halaman Postingan Blog Dengan Nomor Navigasi

Tutorial Cara Membagi Halaman Postingan Blog Dengan Nomor Navigasi. Halo sobat nyampling, kali ini admin akan memberikan tutorial tentang bagaimana membagi halaman postingan menjadi beberapa halaman. Halaman ini ditandai dengan nomor navigasi sehingga banyak digunakan oleh situs berita dan komik karena banyaknya paragraf yang ditampilkan.

Biasanya halaman seperti ini terdapat nomor urut yang ada pada bagian bawah halaman postingan, sehingga untuk dapat beralih kehalaman berikut maka anda tinggal mengklik tombol next atau bisa juga langsung mengklik nomor yang akan dituju.

Tujuan pembagian halaman ini adalah untuk dapat membuat artikel lebih rapih karena biasanya artikel berita itu banyak paragrafnya sehingga pembaca tidak perlu repot-repot untuk menggulir tombol kebawah. Hal ini juga sangat berpengaruh pada pageviews blog anda karena dengan berganti nomor navigasi maka otomatis akan merefresh halaman.

Tutorial Cara Membagi Halaman Postingan Blog Dengan Nomor Navigasi

Bagi kalian yang tertarik untuk membuat halaman menjadi beberapa nomor navigasi, maka tutorial berikut dapat anda ikuti.
Langkah 1. Login ke Blogger >> Tema >> Edit Html
Langkah 2. Tambahkan kode CSS berikut ini tepat sebelum tag </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>

Langkah 3. Tambahkan kode CSS berikut sebelum 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("arlinapage"),halaman==halaman&&$(".buttonar.n"+halaman).toggleClass("arlinapage")});
//]]>
</script>
</b:if>

Langkah 4. Simpan Tema
Langkah 5. Untuk dapat memanggil kode yang dipasang tadi maka anda tinggal buat kode dibawah ini html pada halaman edit postingan

<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>