CARA MEMBUAT NOMOR HALAMAN NEXT PAGE PADA BLOG
Navigasi Nomor Halaman pada sebuah website atau blog merupakan menu yang
sangat penting di karenakan Navigasi Nomor Halaman itu akan menunjukan
berapa index atau halaman yang berisi artikel yang ada pada suatu
website atau blog tersebut. Pada Blogger kita dapat mengatur berapa
posting artikel yang akan di tampilkan pada setiap halaman, setelah
jumlah posting artikel melebihi halaman yang di tampilkan maka kita akan
melihat menu navigasi "Posting Lama" dan "Posting Lebih Baru" yang
biasanya di tampikan pada bagian bawah posting artikel setiap halaman.
Blogger memang menyediakan menu navigasi "Posting Lama" dan "Posting
Lebih Baru" untuk melihat halaman-halaman yang berisi posting artikel
tetapi Blogger tidak menyediakan penomoran berapa jumlah halaman yang
berisi posting artikel yang ada pada blog kita.
Navigasi Nomor Halaman pada blogger sangatlah penting selain mengetahui
jumlah halaman yang berisi posting artikel, kita juga dapat melompat
dari satu halaman ke halaman lain atau membuka pada halaman tertentu
pada blog. Selain itu Navigasi Nomor Halaman juga dapat membuat blog
anda terlihat lebih menarik karena anda dapat membuat variasi yang
berbeda. Berikut adalah tutorial tentang cara untuk menambahkan halaman
bernomor navigasi menggunakan Javascript untuk Blogger.
Cara Membuat nomor halaman NEXT PAGE pada Blog:
- Buka Dashboard > Template> klik pada tombol Edit HTML
- Klik di manapun dalam area kode HTML dan tekan tombol CTRL + F untuk membuka kotak pencarian Blogger
- Kemudian cari Kode ]]></b:skin>
- Selanjutnya pilih model Navigasi Nomor Halaman yang anda inginkan dan masukan Kode tersebut di atas kode ]]></b:skin>
- Style 1
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
#blog-pager .pages{border:none;} - Style 2
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
#blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);} - Style 3
#blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
.showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
#blog-pager .pages{border:none;background: none;} - Style 4
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;} - Style 5
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
#blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;} - Style 6
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;} - Style 7
#blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}
Catatan: Jika Anda ingin menyembunyikan tombol "Halaman Pertama" dan "Halaman Terakhir" tambahkan baris ini di bawah kode CSS
.firstpage, .lastpage {display: none;}
-
- Selanjutnya cari kode </body> dan tambahkan script ini tepat di atasnya
<b:if cond='data:blog.pageType != "item"'>
Konfigurasi:
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=7;
var numPages=6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
</b:if>
</b:if>
perPage: berapa banyak posting akan ditampilkan di setiap halaman (7). Nilai ini harus sama dengan jumlah posting di halaman utama. Jika tidak, tambahkan jumlah yang sama dengan pergi ke "Setelan"> "Pos dan komentar" dan ketik jumlah pada "Tampilkan sebanyak mungkin" halaman, kemudian klik pada "Simpan Setelan" tombol.
numPage: berapa banyak halaman yang akan ditampilkan dalam navigasi halaman (6)
Untuk menggantikan teks ‘First’, ‘Last’, “« Previous” dan “Next »” teks, cukup ketik sendiri dalam tanda kutip.
Secara default, Blogger akan menampilkan 20 posting pada halaman label. Untuk membuat widget ini muncul pada halaman label, kita harus mengurangi ini ke nilai yang kami berikan untuk variabel perpage. (NB: Apabila Kode diatas yaitu nomor 5 tidak berpengaruh, gunakan Kode Alternative disamping ini : <!-- PAGE NAVIGATION START-->
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='« ';
var downPageWord =' »';
</script>
<script src='https://sites.google.com/site/donesiarony/efek/widget/page_num.js' type='text/javascript'/>
<!-- PAGE NAVIGATION END--> - Selanjutnya cari setiap potongan kode berikut
expr:href='data:label.url'
- Ganti kode di atas dengan
expr:href='data:label.url + "?&max-results=7"'
Angka 7 adalah jumlah posting yang akan ditampilkan per halaman. - Terakhir Simpan Template
Demikian tutorial dari saya mengenai Cara Membuat nomor halaman NEXT PAGE pada Blog
Semoga bermanfaat.
