√ Cara Menciptakan Tombol Next Dan Previous, Page Navigation Dengan Nomor Di Blog
Membuat Navigasi halaman sebetulnya sangat di sarankan, alasannya ialah dengan adanya Tombol navigasi ini akan mempermudah pengunjung melanjutkan ke Postingan yang lebih baru, atau untuk melihat postingan yang lebih lama, dengan begitu maka visitor pengunjung merasa lebih gampang ketika mengunjungi halaman blog anda.
Untuk Tampilan Navigasi pada Blog sebetulnya sudah di setting secara default pada ketika pertama kali anda mendaftar di blogger. Akan tetapi untuk tampilanya memang cukup monoton dan tidak terlihat menarik.
Jika anda ingin merubah dan memperlihatkan kesan baru, sangatlah mudah... Anda dapat mengikuti step by step di bawh ini..
Untuk tampilan tombol navigasi dengan nomor ialah sebagai berikut ini.
Jika anda tertarik dengan tampilan menyerupai itu, begini cara menerapkanya.
1. Login ke Blog
2. Pilih > Theme/template
3. Pilih > Edit Html
4. Cari isyarat dibawah ini.
Gunakan CTRL+F untuk menemukanya.
</body>Jika sudah ketemu, silakan Copy Kode di bawah ini dan letakan sempurna di atas kode </body>
Keterangan:
<b:if cond='data:view.isMultipleItems'>
<script> //<![CDATA[
/* Page Navigation syilent.blogspot.com */
var postperpage = 7;
var numshowpage = 3;
var upPageWord = 'Prev';
Var downPageWord = 'Next';
var urlactivepage = location.href;
var home_page= '/';
//]]></script>
<script src='https://cdn.rawgit.com/igniel/blogger/96670462/pagination.js'/>
</b:if>
- Var postperpage = 7 yaitu Untuk Mengatur Jumlah halaman yang tampil.
- var numshowpage = 3 yaitu Untuk Mengatur Jumlah angka / nomor di hidangan navigasi yang akan di tampilkan.
- var upPageWord = 'Prev' yaitu Untuk Menampilkan Kata untuk navigasi halaman sebelumnya.
- downPageWord = 'Next'; yaitu Untuk Menampilkan Kata untuk navigasi halaman berikutnya.
Silakan anda Rubah pada bab angka dan Kata Prev dan Next sesuai cita-cita anda.
Jika sudah, selanjutnya silakan Cari isyarat di bawah ini.
]]></b:skin>Untuk mencarinya silakan gunakan CTRL+F untuk menemukanya.
Jika sudah ketemu, silakan Copy isyarat dibawah ini, dan letakan sempurna diatas isyarat ]]></b:skin>
/* Page Navigation .blogspot.com */
#blog-pager {clear:both; width:auto; line-height:17px; position:relative; display:block; text-align:left; overflow:visible; margin:0px; padding:0px} .showpage a, .showpageNum a, .showpagePoint {position:relative; background:#2f303f; display:inline-block; font-size:13px; color:#fff; margin:0 4px 0 0;padding:7px 13px; text-decoration:none; border-radius:3px; transition:all .3s} .showpageOf {float:right; color:#666; display:inline-block; font-size:13px; margin:0; padding:7px 0;} .showpageNum a:before{ content:''; position:absolute; top:0; bottom:0; left:0; right:0; box-shadow:inset 0 -2px 2px rgba(0,0,0,0.02); transition:box-shadow 0.5s} .showpage a:hover, .showpageNum a:hover {background:#008c5f; color:#fff; position:relative} .showpagePoint, .showpagePoint:hover {background:#008c5f; color:#fff} span.label-info a.label-block:nth-child(n+2) {display:none}
Jika sudah, SILAKAN SAVE
Dan lihat hasilnya....
Itulah cara menciptakan Page Navigation dengan Number yang dapat anda terapkan di blog ataupun website, tentunya page navigation ini responsif tidak menciptakan berat loading halaman blog anda.
Semoga bermanfaat.
Sumber https://syilent.blogspot.com/
