Cara membuat spilit page seperti tribunews
Tahukah kamu kenapa situs berita seperti tribun ada yang dibenci pembaca? Salah satunya adalah karena ini. Karna cukup kenyulitian bagi pengunjung dalam membaca artikel apalagi dalam satu halaman tersebut terdapat banyak sekali iklan.
Sebenarnya cara penerapanya itu sangat mudah sekali,namun pastinya kamu sedikit harus memahami fungsi dan penulisan kode HTML dasar. Karena untuk menerapkanya pada setiap paragraf yang akan dibagi kita menggunakan div Elements. Cara seperti ini sudah saya terapkan pada artikel cara gampang belajar seo di tahun 2020.
Cara membagi artikel menjadi beberapa halaman
Pertama saya akan contohkan proses penerapanya pada blogger melalui template halaman. Silakan backup template kamu sebelum mengikuti tahapan ini, kalau sudah yuk lanjut ke tahapanya.Langkah pertama buka menu thema dan klik edit HTML, jika kamu tidak bisa mengeditnya secara online kamu bisa mengunduh file template nya terlebih dahulu dan edit menggunakan aplikasi teks editor favorite kamu. Salin semua kode Css dibawah ini.
<style type='text/css'>
/* Membagi Halaman di Postingan */
.ryanjhr,.pagearl br{display:none}
.ryan_page{text-align:center;margin-top:6px auto 0 auto;border-top:1px solid rgba(0,0,0,0.1)}
.pagearl{margin:6px 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;margin:1px;
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.ryan_page{background:#3498DB;border-color:#3498DB;color:#fff;transition:all .1s}
.buttonar.ryan_page:hover{background:#2980B9;border-color:#2980B9;color:#fff}
</style>Kita lanjut ke langkah kedua pemasangan javascript. Sebelumnya pastikan template kamu sudah mebggunakan Jquery versi berapapun, jika belum tambahkan script jquery berikut sebelum tag penutup </body>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js'/></script>Salin juga kode javascripy spilit page ini, lalu paste pada template kamu sebelum tag penutup </body>
<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");$(".ryanjhr").hide(),void 0===halaman?$(".content_1").show():$(".content_"+halaman).show();var o=$(".ryanjhr").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$(".pagearl").append($('<a href="'+t+"?halaman="+i+'#paragraf'+i+'" class="buttonar n'+i+'"> '+i+" </a>"))}else $(".pagearl").hide();void 0==halaman&&$(".buttonar.n1").toggleClass("ryan_page"),halaman==halaman&&$(".buttonar.n"+halaman).toggleClass("ryan_page")});
//]]> </script> Tahapan terakhir silakan kamu cari kode <data:post.body/>, pada template umum ada 3 kode tersebut. Pastekan kode script dibawah ini, tepat setelah kode post body diatas, ingat ada 3 ya bisa saja ada dua tergantung template yang kamu gunakan pastekan di setiap meta tersebut.
<div class="ryan_page"></div>
<div class="pagearl"></div>
Cara penggunaan kode script diatas
Untuk penggunaanya kamu harus menulis artikel langsung dalam mode HTML Di blogger, gunakan class div dibawah ini untuk mengatur paragraf menjadi beberapa halaman.
<div class="ryanjhr content_1" id="paragraf1">
Artikel paragraf
</div>
<div class="ryanjhr content_2" id="paragraf2">
Artikel paragraf
</div>
Lapisi dengan div setiap beberapa paragraf yang akan kamu jadikan satu halaman, dan angka yang saya beri latar kuning digunakan untuk membuat paragraf berada pada halaman satu, kedua, ketiga secara berurutan. Pastikan kamu menulis tidak menyalahibaturan yang dibuat. Jangan gunakan ini jika satu artikel kamu pendek, untuk demonya kamu bisa melihatnya disini.