Cara Membuat Tombol Halaman Pada Postingan Ala Tribun

Bagi kalian yang suka membaca berita di tribun pasti menemukan halaman pagination di dalam artikel, nah pada kesempatan kali ini saya mau membagikan tutorialnya kepada kalian bagaimana sih caranya memasang halaman pagination ala-ala tribun kedalam blog.

Pengertian Pagination

Pagination atau bisa dibilang navigasi halaman merupakan navigasi yang mengarahkan kita ke halaman berikutnya terhadap suatu website.Biasanya ini dipakai pada homepage rata-rata website.

Cara Membuat Pagination Pada Blog

1. Pertama yang harus kalian lakukan adalah login terlebih dahulu ke blogger kalian dan masuk pada dashboard blogger.

2. Jika sudah sampai tahap ini, kalian pilik menu tema.

3. Jika sudah kalian klik edit html

4. Langkah selanjutnya cari kode seperti ini ]]></b:skin> dan pastekan kode dibawah ini tepat diatasnya.

/* 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}}

5. Jika sudah melakukan langkah diatas, langkah berikutnya kita cari kode </body> dan pastekan kode dibawah ini tepat diatas kode </body>.

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

6. Jika sudah cari kode berikut <data:post.body/> dan pastekan kode di bawah ini tepat pada bawah kode <data:post.body/>.

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

Kode diatas memiliki lebih dari 1 kode, silahkan kamu pilih kode diatas dan paste di templatemu.Untuk urutan ke 3 biasanya dipakai pada template viomagz.

7. Jika sudah selesai melakukan langkah-langkah diatas klik simpan tema.

8. Eits, tunggu dulu.Tutorial diatas belum selesai masih ada beberapa langkah lagi.

9. Jika sudah melakukan semuanya, langkah selanjutnya kamu tinggal membuat postingan artikel seperti biasanya dan masuk pada bagian html( sebelah compose ) dan masukkan kode dibawah ini, silahkan di cocokan untuk pemasanganya.

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

10. Jika sudah selesai semuanya, terakhir tinggal klik publikasikan.

Penutup

Itulah tutorial pada kesempatan kali ini, semoga kalian dapat langsung mencobanya ya.Dan jangan lupa untuk tinggalkan komentar dibawah dan share artikel ini ke media sosial kalian, terima kasih.

Satria Fadhil M

Seorang keras kepala dengan keingintahuanya dan betah beberapa jam berhadapan dengan gadget.

Bagikan Artikel ini