Cara Membuat Pagination Seperti TribunNews di Postingan Blogger

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


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.

Komentar

  1. Apakah otomatis sesuai dengan keinginan berapa halaman nya. Atau bisa di atur jumlah katanya gan?

    BalasHapus
    Balasan
    1. Bisa di atur kok kak dibagian div class nya, Terima kasih sudah berkunjung di Jagoandzgn

      Hapus
  2. Wih..desain blognya keren gan

    BalasHapus
    Balasan
    1. Alhamdulillah, makasih bang dan Terima kasih sudah berkunjung di Jagoandzgn

      Hapus
  3. Gan, terima jasa redesign template ngga?

    BalasHapus
    Balasan
    1. Untuk saat ini masih belum buka jasa mas, Terima kasih sudah berkunjung di Jagoandzgn

      Hapus
  4. Ini untuk di template viomax go bisa tidak gan?

    BalasHapus
    Balasan
    1. Di coba aja mas kalau gak bisa tinggal mas ubah tag class nya dengan template viomax Go

      Hapus
  5. Balasan agan ko gak muncul ya?

    Boleh minta blog yang di pake demo yang postingannya bisa di bagi itu gan?

    Kalo boleh kirim ke sedekahgerakan@gmail.com ya gan.

    Terima kasih, semoga sukses selalu, aamiin.

    BalasHapus
    Balasan
    1. Buat aja sendiri mas untuk tutorial sudah saya upload semuanya di blog ini, Terima kasih sudah berkunjung di Jagoandzgn

      Hapus
  6. Sudah saya coba gan, tapi di halaman 2 dan 3 tidak muncul teks postingan nya, itu kenapa ya?

    BalasHapus

Posting Komentar

Postingan populer dari blog ini

Download Config Pubg Anti Reset Turnamen Boost

Download Template Kompaz News Premium Blogger Responsive

Cara Membuat Sticky Share Button Blog di Template Viomagz