Cara Membuat Navigasi Halaman

Hallo teman-teman Blogger dan para pengunjung setia, Artikel Panduan Belajar Blog kali ini membahas tentang Cara Membuat Navigasi Halaman, dimana cara ini dilakukan adalah untuk memudahkan para pengunjung web/blog dalam melakukan pencarian suatu artikel dalam halaman-halaman di web/blog kita.

Tombol navigasi halaman ini sebetulnya hampir sama dengan tombol next atau previous pada web/blog Anda, bedanya adalah navigasi halaman ini bisa mengingatkan pengunjung akan tempat suatu artikel pada halaman ke berapa pada web/blog kita. Karena navigasi halaman akan menampilkan nomor per halaman web/blog kita, mungkin Anda pernah melihat contoh pada halaman bawah search engine di google, disana terlihat tombol navigasi halaman untuk pencarian keyword dihalaman-halaman selanjutnya.

Untuk mempersingkat waktu, berikut ini langkah-langkah dalam pembuatan tombol navigasi halaman :

1. Login ke Blogger Anda.
2. Klik Tata Letak, lalu klik Elemen Halaman.
3. Lalu klik Tambah Gadget.
4. Pilihlah Edit HTML/Javascript.
5. Tambahkan kode berikut dibawah ini pada kotak kosong yang tersedia.
   <style>
   .showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;
   }
   .showpageArea a {border: 1px solid #505050;
   color: #000000;font-weight:normal;
   padding: 3px 6px !important;
   padding: 1px 4px ;margin:0px 4px;
   text-decoration: none;
   }
   .showpageArea a:hover {
   font-size:11px;
   border: 1px solid #333;
   color: #000000;
   background-color: #FFFFFF;
   }
   .showpageNum a {border: 1px solid #505050;
   color: #000000;font-weight:normal;
   padding: 3px 6px !important;
   padding: 1px 4px ;margin:0px 4px;
   text-decoration: none;
   }
   .showpageNum a:hover {
   font-size:11px;
   border: 1px solid #333;
   color: #000000;
   background-color: #FFFFFF;
   }
   .showpagePoint {font-size:11px;
   padding: 2px 4px 2px 4px;
   margin: 2px;
   font-weight: bold;
   border: 1px solid #333;
   color: #fff;
   background-color: #000000;
   }
   .showpage a:hover {font-size:11px;
   border: 1px solid #333;
   color: #000000;
   background-color: #FFFFFF;
   }
   .showpageNum a:link,.showpage a:link {
   font-size:11px;
   padding: 2px 4px 2px 4px;
   margin: 2px;
   text-decoration: none;
   border: 1px solid #0066cc;
   color: #0066cc;
   background-color: #FFFFFF;}
   .showpageNum a:hover {font-size:11px;
   border: 1px solid #333;
   color: #000000;
   background-color: #FFFFFF;
   }
   </style>
   <script type="text/javascript">
   function showpageCount(json) {
   var thisUrl = location.href;
   var htmlMap = new Array();
   var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";
   var isLablePage = thisUrl.indexOf("/search/label/")!=-1;
   var isPage = thisUrl.indexOf("/search?updated")!=-1;
   var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";
   thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;
   var thisNum = 1;
   var postNum=1;
   var itemCount = 0;
   var fFlag = 0;
   var eFlag = 0;
   var html= '';
   var upPageHtml ='';
   var downPageHtml ='';
   var pageCount=5;
   var displayPageNum=4;
   var firstPageWord = 'First';
   var endPageWord = 'Last';
   var upPageWord ='Previous';
   var downPageWord ='Next';
   var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';
   for(var i=0, post; post = json.feed.entry[i]; i++) {
   var timestamp = post.published.$t.substr(0,10);
   var title = post.title.$t;
   if(isLablePage){
   if(title!=''){
   if(post.category){
   for(var c=0, post_category; post_category = post.category[c]; c++) {
   if(encodeURIComponent(post_category.term)==thisLable){
   if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
   if(thisUrl.indexOf(timestamp)!=-1 ){
   thisNum = postNum;
   }
   postNum++;
   htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
   }
   }
   }
   }//end if(post.category){
   itemCount++;
   }
   }else{
   if(title!=''){
   if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
   if(thisUrl.indexOf(timestamp)!=-1 ){
   thisNum = postNum;
   }
   if(title!='') postNum++;
   htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;
   }
   }
   itemCount++;
   }
   }
   for(var p =0;p< htmlMap.length;p++){
   if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
   if(fFlag ==0 && p == thisNum-2){
   if(thisNum==2){
   if(isLablePage){
   upPageHtml = labelHtml + upPageWord +'</a></span>';
   }else{
   upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';
   }
   }else{
   upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';
   }
   fFlag++;
   }
   if(p==(thisNum-1)){
   html += ' <span class="showpagePoint"><u>'+thisNum+'</u></span>';
   }else{
   if(p==0){
   if(isLablePage){
   html = labelHtml+'1</a></span>';
   }else{
   html += '<span class="showpageNum"><a href="/">1</a></span>';
   }
   }else{
   html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';
   }
   }
   if(eFlag ==0 && p == thisNum){
   downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';
   eFlag++;
   }
   }//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){
   }//end for(var p =0;p< htmlMap.length;p++){
   if(thisNum>1){
   if(!isLablePage){
   html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
   }else{
   html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';
   }
   }
   html = '<div class="showpageArea"><span style="padding: 2px 4px 2px 4px;margin: 2px 2px 2px 2px;border: 1px solid #333; background-" class="showpage">Halaman '+thisNum+' dari '+(postNum-1)+': </span>'+html;
   if(thisNum<(postNum-1)){
   html += downPageHtml;
   html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';
   }
   if(postNum==1) postNum++;
   html += '</div>';
   if(isPage || isFirstPage || isLablePage){
   var pageArea = document.getElementsByName("pageArea");
   var blogPager = document.getElementById("blog-pager");
   if(postNum <= 2){
   html ='';
   }
   for(var p =0;p< pageArea.length;p++){
   pageArea[p].innerHTML = html;
   }
   if(pageArea&&pageArea.length>0){
   html ='';
   }
   if(blogPager){
   blogPager.innerHTML = html;
   }
   }
   }
   </script>
   <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>
   
6. Lalu Drag and drop kode HTML tersebut tepat dibawah kolom postingan Anda.

7. Jangan lupa Klik Save

Keterangan :

Untuk kode var pageCount=5;, merupakan jumlah postingan dalam satu halaman, jadi Anda bisa sesuaikan dengan jumlah postingan dalam satu halaman. Jika Anda menampilkan 5 postingan setiap halaman, maka Anda gunakan var pageCount=5.

Sebagai Catatan : Jika Anda sudah menggunakan script ini, tapi tombol navigasi halaman masih juga belum muncul berarti akan muncul di halaman ke dua setelah anda meng-klik link Older Posts/Posting Terbaru di bawah postingan blog. Ini mungkin dikarenakan pengaruh template atau anda sebelumnya pernah menghapus bagian HTML blog anda yang berhubungan dengan hal ini.

Oke, sampai disini dulu pembahasan mengenai Cara Membuat Navigasi Halaman, semoga informasi ini berguna buat Anda semua.

Terimakasih.