Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog - Solusi Menarik

Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog

Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog - Halo sobat SM semuanya, kali ini saya akan membagikan sebuah tutorial cara membuat pagination number di postingan ala Tribunnews.com. Pagination number seperti ini biasa kita jumpai pada website-website berita ataupun blog yang mempunyai artikel panjang, hal tersebut dilakukan agar pembaca tidak bosan dengan artikel yang terlalu panjang ke bawah dan juga berguna agar pembaca terdeteksi aktif di blog tersebut (tidak AFK).

Cara Membuat Pagination Dengan Fungsi Refresh di Postingan Blog


Tutorial pagination ini menggunakan script baru dan juga otomatis kecuali pengaturan bagian-bagian artikel yang ingin dibuat muncul di nomor tertentu, maka hal ini akan mempermudah sobat untuk mengatur bagian-bagian artikel yang akan dihilangkan dan dimunculkan pada halaman selanjutnya.

Jumlah untuk pagination ini tidak terbatas (unlimited) sobat bisa membuat halaman sebanyak mungkin dan dilengkapi dengan kolom iklan berukuran 768x90. Saat berpindah halaman, blog akan otomatis refresh menuju halaman artikel selanjutnya.

Tertarik untuk membuat pagination di postingan blog? Silahkan ikuti tutorial di bawah ini :

Masuk ke Blogger > Tema > Edit HTML

Letakan CSS di bawah ini tepat di atas kode ]]></b:skin> sobat juga dapat meletakannya di atas </style> dan menggunakan Tag Kondisional.
/* Pagination CSS */
.post-content{display:none}.solusimenarik{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.solusi{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}}
Selanjutnya letakan 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("solusi"),n==n&&$(".tombol.n"+n).toggleClass("solusi")});
//]]>
</script>
Untuk memunculkan tombol pagination number secara otomatis di semua artikel, letakan kode di bawah ini tepat di bawah kode <data:post.body/> kode seperti ini ada banyak, jadi pastikan coba satu-persatu.
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='solusimenarik'><b>HALAMAN SELANJUTNYA:</b></div><br/>
<center><a href='#' target='_blank' title='Kunjungi Situs Solusi Menarik'><img alt='iklan banner' src='https://4.bp.blogspot.com/-6ZDrg7GHPa4/VytnmRI9BaI/AAAAAAAAD0w/dyOGpRSMe78xiIGN4sDumyA-VGDjDYksACLcB/s1600/AdSpace768x90.png' title='Kunjungi Situs Solusi Menarik'/></a></center>
<br/><p class='paging'/>
Langkah terakhir, sobat harus melakukan pengaturan manual untuk mengatur setiap kata-kata pada postingan agar tampil pada halaman yang sobat inginkan melalui Edit Post > masuk ke Mode HTML bukan Compose, kodenya seperti ini
<div class="post-content content_1">
</div>
Ganti angka 1 dengan 2,3,4,5 dan seterusnya.
Contoh Penerapannya seperti 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>
Simpan.

Demikianlah tutorial yang dapat saya bagikan kali ini, semoga bermanfaat untuk sobat. Terima Kasih.

Berlangganan update artikel terbaru via email:

ADD YOUR COMMENTS

Post a Comment

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel