CORETAN ALDIVA: Tutorial Blog

Tampilkan postingan dengan label Tutorial Blog. Tampilkan semua postingan

Cara Membuat Next Page Pada Posting Blog

Navigasi Nomor Halaman pada sebuah website atau blog merupakan menu yang sanagat 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 fariasi yang berbeda. Berikut adalah tutorial tentang cara untuk menambahkan halaman bernomor navigasi menggunakan Javascript untuk Blogger.

Cara Menambahkan Navigasi Nomor Halaman pada Blogger:

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 tepat di atasnya

<b:if cond='data:blog.pageType != "item"'>
<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>
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.
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 Menambahkan Navigasi Nomor Halaman yang Menarik pada Blogger.
Semoga bermanfaat ^_^

Sumber : http://berbagi-tips-tutorial.blogspot.com/

Entri Populer

Label