Cara Membuat Pagination Seperti TribunNews di Postingan Blogger

umojaforum.com - Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Pagination Seperti TribunNews di Postingan Blogger,

Seperti yang kita ketahui Pages split membagi post menjadi beberapa bagian didalam artikel blogger sangat berpengaruh dan pastinya berguna untuk SEO blog kamu, khususnya berguna untuk menurunkan bounce rate blog kamu dan pastinya optimasi SEO blog kamu berjalan semaksimal mungkin.

Bukan hanya itu pagination ini memang sangat berguna untuk kamu yang memiliki artikel blog yang sangat panjang sehingga pengunjung tidak terlalu melakukan scroll dan dengan adanya tombol ini membuat artikel blog kamu menjadi beberapa bagian, dan untuk kamu yang ingin membuat artikel tersebut silahkan ikuti tutorial dibawah ini.

Cara Membuat Pagination Seperti TribunNews di Postingan Blogger

1. Silahkan kamu login ke blogger.com dengan menggunakan akun Gmail kamu.
2. Masuk ke menu TEMA > klik Edit HTML
3. Selanjutnya cari kode berikut ini ]]></b:skin> dan paste kode dibawah ini tepat DIATAS kode tersebut.

/* Split Pagination */
.post-content{display:none}.split{font-size:100%;text-align:center}
.pagination .tombol,.pagination:before{font-size:14px;padding:8px 12px}
.pagination{margin:20px auto;font-weight:bold;text-align:center;width:100%;font-family:Roboto,Arial,sans-serif}
.pagination .tombol{font-weight:700;background:#2196f3;border-radius:5px;display:inline-block;width:25px;color:#fff;margin-right:5px;transition:ease .69s!important}
.tombol.split{background:#000}
.pagination:before{content:'Intro : ';font-weight:Bold;border:1px solid #2196f3;color:#2196f3;border-radius:5px;margin-right:10px}
@media screen and (max-width:768px){.pagination .tombol,.pagination:before{padding:8px 5px}}

4. Berikutnya cari kode </body> dan paste kode dibawah ini tepat DIATAS kode tersebut.

<script style='text/javascript'>
//<![CDATA[
function get_n(n){var o,t,e=decodeURIComponent(window.location.search.substring(1)).split("&");for(t=0;t<e.length;t++)if((o=e[t].split("="))[0]===n)return void 0===o[1]||o[1]}$(document).ready(function(){var n=get_n("n");$(".post-content").hide(),void 0===n?$(".content_1").show():$(".content_"+n).show();var o=$(".post-content").length;if(0!=o)for(i=1;i<=o;i++){var t=window.location.pathname;$("p.pagination").append($('<a href="'+t+"?n="+i+'" class="tombol n'+i+'"> '+i+" </a>"))}else $("p.pagination").hide();void 0==n&&$(".tombol.n1").toggleClass("split"),n==n&&$(".tombol.n"+n).toggleClass("split")});
//]]>
</script>

5. Salin kode dibawah ini dan paste tepat DIBAWAH kode <data:post.body/>

<div class='split'></div>
<br/>
<p class='pagination'/>

Kode tersebut memiliki lebih dari satu kode, silahkan kamu paste kode diatas di kode urutan yang ke 3 untuk template viomagz.

6. Kalau sudah silahkan klik SIMPAN dan Selesai.
7. Langkah selanjutnya, silahkan kamu buat postingan terlebih dahulu, apabila sudah silahkan kamu masuk ke mode HTML [bukan compose]
8. Untuk penempatan kodenya seperti dibawah ini, silahkan kamu cocokkan letak kodenya.

<div class="post-content content_1">
Teks Postingan Artikel Halaman Pertama
</div>
<div class="post-content content_2">
Teks Postingan Artikel Halaman Kedua
</div>
<div class="post-content content_3">
Teks Postingan Artikel Halaman Ketiga
</div>

9. Kalau sudah silahkan klik PUBLIKASIKAN dan Selesai.

Demo

Bagaimana mudah bukan untuk tutorial Cara Membuat Pagination Seperti TribunNews di Postingan Blogger, apabila kamu memiliki pertanyaan seputar blogger silahkan komen dikolom komentar dibawah artikel ini.