Baca ya : Cara Praktis Memasang Navigasi Page Number Pada Blog

Navigasi page number adalah sebuah navigasi yang terdapat nomor halaman pada sebuah blog yang biasanya terdapat pada halaman Home dan Label namun tidak untuk halaman search. Dengan adanya navigasi ini sudah tentu akan mempermudah pengunjung untuk melihat artikel yang ada pada blog. Pada navigasi bawaan template biasanya hanya terdapat Postingan Baru, Home dan Postingan Lama sehingga itu akan memakan banyak waktu untuk melihat artikel yang sudah awal-awal, tidak menyerupai navigasi page number dengan adanya ini pengunjung sanggup pribadi meloncat apabiola menginginkan melihat artikel yang sudah paling usang dengan pribadi ke halaman terakhir ataupun sanggup menentukan ingin ke halaman berapa.

Memasang page number pada blog bahwasanya gampang Anda hanya perlu memasukan script dan juga dengan css pada template pada edit html. Namun mungkin untuk pemula menyerupai saya cukup rumit untuk awal-awal alasannya tidak mengerti apa itu css dan script dan dengan berjalannya waktu Anda juga niscaya akan sanggup dan ahli mengenai html. Karena kita memang harus menguasai html sebagai blogger biar sanggup mengedit tampilan blog yang kita kelola tersebut dan saya juga masih berguru dalam hal itu.

Memasang Navigasi Page Number Pada Blog

Sesuai yang saya sudah jelaskan dalam menciptakan navigasi ini yang perlu Anda lakukan yaitu memasukan script dan juga css untuk style pada page number yang dipasang tersebut dengan cara mengedit html pada template blog.

A. Memasukan Script

1. Pada keadaan login dan pada Dashboard blogger Anda masuk ke "Template" > "Edit HTML".
2. Cari aba-aba script </body> dan apabila sudah ketemu masukan aba-aba script dibawah ini diatas aba-aba </body>.



 <b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <script type='text/javascript'>   /*<![CDATA[*/     var perPage=4;     var numPages=4;     var firstText ='First';     var lastText ='Last';     var prevText ='« Previous';     var nextText ='Next »';     var urlactivepage=location.href;     var home_page="/";   /*]]>*/ </script> <script src="https://cdn.rawgit.com/aramdan/share/master/pagenumber.js"/> </b:if> </b:if>
 

Keterangan:
Anda sanggup mengedit nomor/kata yang berwarna merah dibawah sesuai keinginan.

• var perPage=4; (Postingan per halaman)
• var numPages=4; (Nomor halaman)
• var firstText ='First';
• var lastText ='Last';
• var prevText ='« Previous';
• var nextText ='Next »';
3. Supaya tidak semua memakai url javascript yang berwarna biru diatas, saya sarankan untuk menggunakannya untuk sendiri dan script sanggup didapatkan link yang sudah saya sediakan Cara Daftar dan Hosting Javascript / CSS di GitHub (Recommended). Apabila Anda malas juga tidak apa-apa untuk memakai yang sudah ada diatas alasannya javascript diatas memang untuk di share.

Baca juga "Memasang Widget Sosial Media di Blog"

B. Memasukan CSS untuk style

1. Masih pada Edit HTML, lalu Anda cari aba-aba ]]></b:skin>.
2. Setelah itu masukan CSS dibawah ini diatas aba-aba ]]></b:skin> tersebut.

#CSS Style 1 ()

#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: #fff; background-color:#00a3c1;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent {background:#ef380e;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent {font-weight:bold;color: #fff;background:#ef380e;}
.showpageOf {display:none!important}
#blog-pager .pages {border:none;}

#CSS Style 2

#blog-pager{clear:both;margin:10px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #666;border:1px solid #CCC;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#808080;text-decoration:none;color: #fff;}
.showpageOf{display:none!important}
#blog-pager .showpage, #blog-pager .pagecurrent{background:#808080;font-weight:normal;color: #fff;}
#blog-pager .pages{border:none;}

#CSS Style 3

#blog-pager{clear:both;margin:10px auto;text-align:center; padding: 7px;}
.blog-pager {background: none;}
.displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 3px 10px;margin-right:5px; color: #666; background-color:#eee; border: 1px solid #ccc;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#00a3c1;text-decoration:none;color: #fff;}
#blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#00a3c1;}
.showpageOf{display:none!important}
#blog-pager .pages{border:none;}


3. Pilihlah salah satu CSS sesuai harapan Anda atau sanggup juga mengedit sendiri dengan mengubah aba-aba warna pada css dan lainnya. Hasil CSS Style sanggup Anda lihat pada gambar thumb artikel diatas.

Baca juga "Cara Memasang Back To Top pada HTML Blog"

C. Menambahkan Script

1. Tetap pada Edit HTML, Anda cari aba-aba script berikut.

expr:href='data:label.url'

2. Kemudian Anda tambahkan script + &quot;?&amp;max-results=4&quot; pada script tersebut sehingga menjadi menyerupai ini.

expr:href='data:label.url + &quot;?&amp;max-results=4&quot;'

Keterangan:
Nomor yang berwarna merah pada script yaitu tampilan postingan pada label dan sanggup Anda ubah sesuai keinginan. Contoh diatas bernomor 4 yang berarti setiap halaman terdapat 4 postingan dari halaman satu hingga terakhir sisanya.


3. Setelah semuanya duah diterapkan, Anda klik "Simpan template" dan lalu lihat hasilnya.

Begitulah Cara Memasang Navigasi Page Number Pada Blog, apabila Anda masih tidak mengerti atau ada yang akan dipertanyakan Anda sanggup berkomentar dibawah atau sanggup menghubungi saya di Kontak. Sekian dulu dari saya dan terima kasih sudah mengunjungi situs ini.
Sumber http://www.bloggars.com/

Tweet

Subscribe to receive free email updates: