Cara Membuat Next Page Pada Posting Blog

1. Buka Dashboard > Template> klik pada tombol Edit HTML
   
   
2. Klik di manapun dalam area kode HTML dan tekan tombol CTRL + F untuk membuka kotak pencarian Blogger
3. Kemudian cari Kode ]]></b:skin>
4. 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;}

5. Selanjutnya cari kode </body> dan tambahkan script tepat di atasnya
   

   <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=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>

   Konfigurasi:
   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.
6. Selanjutnya cari setiap potongan kode berikut
   

   expr:href='data:label.url'

7. Ganti kode di atas dengan
   

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

   Angka 7 adalah jumlah posting yang akan ditampilkan per halaman.
8. Terakhir Simpan Template

Share this post