Bagi kalian yang tertarik untuk membuat pagenation halaman blog pada bloggspot kalian, dapat gunakan caraini geng.
Silahkan masuk ke blogger kalian, kemudian klik Tema dan Edit HTML blogger kalian.
Copy pastekan CSS berikut tepat di atas kode ]]></b:skin> atau dapat juga diletakkan di atas </style> dan menggunakan Tag Kondisonal.
/* 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}}Selanjutnya yaitu letakkan javascript
Letakkan JavaScript di bawah ini tepat di atas code
<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>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='dblanter'><b>HALAMAN SELANJUTNYA:</b></div><br/>
<center><a href='#' target='_blank' title='Kunjungi blog Dunia Blanter'><img alt='iklan banner' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhaEizngARjiIRzegckcNRgVi08CgJr7Liio-qmW6N2gPpA0zZO0D54ZtmrJIOwagvWw5tmfyUJIFsrKPXGHA9AdMsmeBc_adg67wYvGqg0-YqibGjQRQK7lq7dfpXISol2BZXvH49A8PQ/s1600/AdSpace768x90.png' title='Kunjungi blog Dunia Blanter'/></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 adalah seperti ini
Nah, itulah tutorial yang dapat saya bagikan kali ini, semoga bermanfaat untuk sobat. Terimakasih. 😊
<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>Nah, itulah tutorial yang dapat saya bagikan kali ini, semoga bermanfaat untuk sobat. Terimakasih. 😊
HALAMAN SELANJUTNYA:
Blog channel yang sekedar ingin berbagi, mohon maah jika terdapat kesamaan isi postingan, hal itu tidak terlepas dari hasil pencarian saat membutuhkan, dan saya share ulang.
ConversionConversion EmoticonEmoticon