Cara membuat Navigasi Halaman

Untuk memudahkan pengunjung blog atau web dalam melakukan pencarian artikel, selain menggunakan fasilitas searh engine, bisa juga dengan tombol navigasi halaman. Tombol navigasi halaman ini sebenarnya kurang lebih sama dengan tombol next atau previous pada blog sobat, namun bedanya navigasi halaman bisa membuat pengunjung ingat tempat suatu artikel pada halaman ke berapa pada blog kita. Karena navigasi halaman menampilkan nomor per halaman blog kita, seperti contoh pada halaman bawah search engine di google, terlihat tombol navigasi halaman untuk memudahkan pengunjung dalam pencarian keyword yang di maksud.

Berikut langkah mudah dalam membuat navigasi halaman :

1. Login ke Blogger.
   
   
2. Klik Tata Letak --> Elemen Halaman.
   
   
3. Kemudian klik Tambah Gadget.
   
   
4. Pilih yang Edit HTML/Javascript.
   
   
5. Tambahkan kode berikut 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. Drag and drop tepat dibawah kolom postingan.
   
   
7. Kemudian Save.

Untuk var pageCount=5; --> jumlah postingan dalam satu halaman, jadi sobat sesuaikan dengan jumlah postingan sobat dalam satu halaman. Jika sobat menampilkan 5 postingan setiap halaman, maka sobat gunakan var pagecount=5.
Sipp semoga bermanfaat ya !!

Oleh : Dody FariaL Pada hari Rabu, Juni 24, 2009

Tweet

Berlangganan artikel terbaru via Email

Artikel Lainnya :