Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Pagination - Halaman Selanjutnya pada Postingan Website

Artikel atau postingan merupakan salah satu bagian terpenting dari sebuah situs web. Postingan yang menarik dan epik akan memberikan kesan kualitas situs web yang baik dan elegan. Namun, disamping konten atau isi artikel yang sudah teruji kualitas dan validitasnya, perlu diperhatikan pula desain tampilan setiap postingan pada website kita.

Supaya website kita tetap menarik untuk dilihat dan juga dipakai dalam keperluan searching di internet. Salah satunya adalah dengan memasang Pagination atau Halaman Selanjutnya pada postingan website kita, supaya postingan kita tidak panjang lebar dari atas (header) website sampai ke bawah (footer) website. Tetapi, diberik space berupa pembagian halaman pada setiap postingan, supaya lebih memudahkan.
Lalu, bagaimana caranya? Nah, daripada bingung tidak karuan, yuk kita simak prosedur cara memasang pagination - halaman selanjutnya sebagai berikut.
1. Masuk ke Blogger >> Tema >> Edit HTML
2. Masukkan kode di bawah ini tepat di atas kode ]]></b:skin> anda juga dapat meletakkannya di atas kode </style> dan menggunakan Tag Kondisional.
/* Pagination CSS by Idblanter.com */
.post-content{display:none}.dblanter{font-size:130%;text-align:center}
.paging .tombol,.paging:before{font-size:14px;padding:8px 12px}
.paging{margin:20px auto;font-weight:bold;text-align:center;width:100%;font-family:Roboto,Arial,sans-serif}
.paging .tombol{font-weight:700;background:#2196f3;border-radius:5px;display:inline-block;width:25px;color:#fff;margin-right:5px;transition:ease .69s!important}
.tombol.blanter{background:#000}
.paging:before{content:'PAGES : ';font-weight:Bold;border:1px solid #2196f3;color:#2196f3;border-radius:5px;margin-right:10px}
@media screen and (max-width:768px){.paging .tombol,.paging:before{padding:8px 5px}}
3. Selanjutnya letakkan kode Javascript di bawah ini tepat di atas 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.paging").append($('<a href="'+t+"?n="+i+'" class="tombol n'+i+'"> '+i+" </a>"))}else $("p.paging").hide();void 0==n&&$(".tombol.n1").toggleClass("blanter"),n==n&&$(".tombol.n"+n).toggleClass("blanter")});
//]]>
</script>
4. Untuk memunculkan tombol pagination number secara otomatis di semua artikel, letakan kode di bawah ini tepat di atas kode <data:post.body/> dan perlu diingat kode <data:post.body/> ini banyak jadi pelru dicoba dan ditest satu-persatu. Kemudian, perlu diingat Bagi sobat yang ingin memasang Pagination pada artikel tertentu saja maka kode di bawah ini hanya perlu di letakan tepat di paling bawah artikel (mode HTML).
<div class='dblanter'><b>HALAMAN SELANJUTNYA:</b></div><br/>
<center><a href='#' target='_blank' title='Kunjungi blog Dunia Blanter'><img alt='iklan banner' src='https://4.bp.blogspot.com/-6ZDrg7GHPa4/VytnmRI9BaI/AAAAAAAAD0w/dyOGpRSMe78xiIGN4sDumyA-VGDjDYksACLcB/s1600/AdSpace768x90.png' title='Kunjungi blog Dunia Blanter'/></a></center>
<br/><p class='paging'/>
5. Simpan Tema.Template.
6. Langkah selanjutnya, anda harus melakukan pengaturan/pengeditan manual untuk mengatur/mengedit setiap kata-kata atau kalimat-kalimat pada postingan agar tampil pada halaman yang anda inginkan melalui Edit Post >> Mode HTML dengan meletakan kode seperti di bawah ini. Ganti angka 1 dengan 2, 3, 4, 5 dan seterunsya.
<div class="post-content content_1">
</div>
Contoh penerepannya sepeti ini:
<div class="post-content content_1">
Teks Postingan 1
</div>
<div class="post-content content_2">
Teks Postingan 2
</div>
<div class="post-content content_3">
Teks Postingan 3
</div>
7. Simpan Postingan dan kembali perbarui/publikasikan.

Posting Komentar untuk "Cara Membuat Pagination - Halaman Selanjutnya pada Postingan Website"