Cara Mudah Membuat Pagination Di Blog

Ingin membuat navigasi halaman berupa angka bilah halaman atau biasa disebut pagination namun sering gagal atau caranya terlalu berbelit dan hanya memberatkan..?

Ini ada sebuah cara membuat pagination untuk blogger dengan mudah dan singkat sekali.

hanya butuh satu langkah dan tidak usah mengedit HTML template, cukup menambahkan elemen laman pada edit Tata Letak saja.
Sobat pasti tahu kan apa itu pagination...?!
Ini lho, yang biasanya di blog tulisannya "Older Posts - Home - Newer Post" atau "Posting Lama - Beranda - Posting Baru" lalu kita ganti dengan sistem penomoran agar pengunjung bisa memilih langsung (melompat) ke halaman yang dituju. Tentu banyak juga fungsi lainnya.

Pagination e-Tuts

Baiklah, langsung saja cara mudahnya :

1. Login ke Blogger
2. Buka Tata Letak
3. Pilih Tambah Gadget (terserah mau yang mana, saran kami yang di bagian bawah saja)
4. Pilih HTML/JavaScript
5. Copy code berikut dan paste-kan di dalam kotak yang tersedia.
   
   <style> .showpageArea a { text-decoration:underline; } .showpageNum a { text-decoration:none; border: 1px solid #ccc; margin:0 3px; padding:3px; } .showpageNum a:hover { border: 1px solid #ccc; background-color:#ccc; } .showpagePoint { color:#333; text-decoration:none; border: 1px solid #ccc; background: #ccc; margin:0 3px; padding:3px; } .showpageOf { text-decoration:none; padding:3px; margin: 0 3px 0 0; } .showpage a { text-decoration:none; border: 1px solid #ccc; padding:3px; } .showpage a:hover { text-decoration:none; } .showpageNum a:link,.showpage a:link { text-decoration:none; color:#333; } </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=6; var firstPageWord = 'First'; var endPageWord = 'last'; var upPageWord ='Back'; 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"></span>'+upPageHtml+' '+html +' '; } } html = '<div class="showpageArea"> <span style="color:#fff;" class="showpage"> Total '+(postNum-1)+': </span>'+html; if(thisNum<(postNum-1)){ html += downPageHtml; } 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=http://e-tuts.blogspot.com></script> <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script> 
6. Save dan lihat hasilnya...

Sekedar tambahan,
Untuk penyesuaian tampilan saya kira widget pagination yang ini sudah sangat sesuai dan cocok untuk blog anda, karena bentuknya yang simpel dan sama sekali tidak macet atau memberatkan blog. Namun bila ingin menyesuaikan lagi dengan selera dan efek lainnya, tinggal anda edit saja CSS-nya.