Cara Membuat Next Page pada Blog

Next Page adalah footer halaman yang sangat membatu didalam mengetahui seberapa banyak halaman posting yang telah anda buat. Selain itu, next page juga akan sangat membantu user didalam menjelajahi blog anda, hanya dengan mengklik "Next" untuk berpindah ke halaman selanjutnya atau "Previous" untuk kembali ke halaman sebelumnya. Begitu besar peranan next page didalam web atau blog anda selain sebagai untuk mempercantik blog atau web yang anda kelola.
Nah sekarang, yang jadi masalah adalah bagaimana cara membuat hal tersebut.
Ternyata berdasarkan pengalaman yang telah saya alami, susah-susah gampang.Ya itulah kata yang kiranya tepat untuk hal ini. Kenapa saya bilang susah, karena sewaktu saya mempelajarinya saya sedikit kebingunan dan setiap langkah yang saya coba, tidak membuahkan hasil. Ternyata setelah saya tahu, caranya begitu sederhana sehingga saya mengatakannya mudah.
Ok, tanpa basa basi, tanpa panjang kali lebar, langsung saja kita praktekkan
bagaimana caranya, agar halaman web atau blog anda semakin cantik. Tutorial ini khususnya akan sangat membantu bagi anda yang memakai blogspot.com.

• Seperti biasa, langkah pertama anda harus login ke Dasbor anda
• Untuk langsung memprkatekkan materi ini, langsung menuju Template
  
• Selanjutnya klik Edit HTML untuk masuk ke bagian editting HTML
• Akan keluar kotak dialog, langsung saja klik selanjtunya atau lanjutkan
• Sehingga akan didapatkan halaman seperti berikut dan jangan lupa memberi tanda centang
  
• Selanjtunya cari kode ]]></b:skin>, caranya biar cepat tekan Ctr+F pada keyboard, akan muncul bagian find di bawah brwoser anda dan paste kode tersebut kemudian Enter

• Selanjtunya paste kode berikut di atas Kodet ]]></b:skin>

  .showpageArea a { text-decoration:underline; } .showpageNum a { border:1px solid #CCCCCC; margin:0 3px; padding:3px 7px; text-decoration:none; } .showpageNum a:hover { background-color:#CCCCCC; border:1px solid #CCCCCC; } .showpagePoint { -moz-background-clip:border; -moz-background-inline-policy:continuous; -moz-background-origin:padding; background:#CCCCCC none repeat scroll 0 0; border:1px solid #CCCCCC; color:#333333; margin:0 3px; padding:3px 7px; text-decoration:none; } .showpageOf { margin:0 3px 0 0; padding:3px 7px; text-decoration:none; } .showpage a { border:1px solid #CCCCCC; padding:3px 7px; text-decoration:none; } .showpage a:hover { text-decoration:none; } .showpageNum a:link, .showpage a:link { color:#333333; text-decoration:none; }

   
• Kemudian klik Save atau Simpan Templplate
• Close halaman tersebtu untuk berpindah ke halaman Tataletak
• pada halaman Tataletak, tambahkan Gatged yaitu gadged HTM/Java, saya sarankan untuk anda menambahkan gatged tersebut dibagian mana halaman anda akan terlihat, lumrahnya di bagian bahwa halaman. Seperti gambar berikut.
  
• Akan keluar kotak HTM dan paste kode berikut, bisa tanpa memberikan judul
  

  <script type='text/javascript'> var home_page_url = location.href;    var pageCount=1; var displayPageNum=3; var upPageWord ='Previous'; var downPageWord ='Next'; function showpageCount(json) {var thisUrl = home_page_url; var htmlMap = new Array(); var thisNum = 1; var postNum=1; var itemCount = 0; var fFlag = 0; var eFlag = 0; var html= ''; var upPageHtml =''; var downPageHtml =''; for(var i=0, post; post = json.feed.entry[i]; i++) {  var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t;  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+'&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){   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">'+thisNum+'</span>'; }else{  if(p==0){    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++; } } } if(thisNum>1){ html = ''+upPageHtml+' '+html +' '; } html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '</div>'; 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; } } function showpageCount2(json) { var thisUrl = home_page_url; var htmlMap = new Array(); var isLablePage = thisUrl.indexOf("/search/label/")!=-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 labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl = home_page_url; for(var i=0, post; post = json.feed.entry[i]; i++) {  var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t;  if(title!=''){ if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){  if(thisUrl.indexOf(timestamp)!=-1 ){   thisNum = postNum;  }  if(title!='') postNum++;  htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&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){   upPageHtml = labelHtml + upPageWord +'</a></span>';  }else{   upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';  }  fFlag++; } if(p==(thisNum-1)){  html += '<span class="showpagePoint">'+thisNum+'</span>'; }else{  if(p==0){   html = labelHtml+'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++; } } } if(thisNum>1){ if(!isLablePage){ html = ''+upPageHtml+' '+html +' '; }else{ html = ''+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } if(postNum==1) postNum++; html += '</div>'; 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 type='text/javascript'> var thisUrl = home_page_url; if (thisUrl.indexOf("/search/label/")!=-1){ if (thisUrl.indexOf("?updated-max")!=-1){  var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max")); }else{  var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max")); } } var home_page = "/"; if (thisUrl.indexOf("?q=")==-1){ if (thisUrl.indexOf("/search/label/")==-1){  document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>') }else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>') } } </script>

• Pada bagian yang saya garis bawahi dan cetak tebal, anda dapat mengaturnya sesuai keinginan
  var pageCount=1;Angka 1, maksudnya bahwa setiap halaman akan menampilkan 1 judul atau 1m posting, jika anda ganti 3 atau 5, maka setiap halaman akan menampilkan 3 atau 5 atau berapa yang anda inginkan.
• setelah itu klik simpan, kembali ke pengaturan Tataletak halaman anda, klik Simpan setelan, dan anda bisa melihat hasilnya pada halaman anda.
• Buktinya bisa anda lihat pada halaman yang saya milik

Terimakasih telah membaca tutorial ini, semoga bermanfaat dan dapat membantu anda.