Membuat Page Navigasi

Akhirnya setelah sekian lama menunggu penulis mendapatkan hal yang menarik yaitu menampilkan Page Navigasi yang letaknya pada footer. Caranya mudah tinggal memasukkan kode-kode yang ada, and mengikuti langkah-langkah yang akan penulis berikan.. Nah Untuk lebih jelas seperti apa bentuknya Page Navigasi itu, ini dia screenshoot Nya...

Ada beberapa pilihan untuk memasangnya. Untuk page navigation yang penulis pakai, caranya relatif mudah. Penulis hanya memasukkan script tersebut di Elemen Halaman blog, Tanpa mengotak atik template. Cara kedua, Anda bisa menambahkan kode CSS di atas kode ]]></b:skin>. Akan.. tetapi metode ini cukup memakan waktu, Karena kita harus mengedit template dan menambahkan kode-kode tertentu. Maka, Penulis ingin berbagi dengan cara yang pertama saja.

Langsung saja pada langkah-langkah yang harus ditempuh, Ada beberapa langkah.. yaitu :

1. Login ke account blogger anda and klik Tab Layout, Kemudian klik pada Add Page Element.
2. Pilih HTML/JAVASCRIPT pada windows Page Element tersebut.
3. Download Scriptnya DI SINI ato bisa langsung Co-Past script di bawah ini :
   

   PAGE NAVIGATION SCRIPT
   

   <style>
   .showpageArea a {
   text-decoration:underline;
   }
   
   .showpageNum a {
   text-decoration:none;
   border: 1px solid #bbb;
   margin:0 3px;
   padding:3px;
   }
   
   .showpageNum a:hover {
   border: 1px solid #bbb;
   background-color:#bbb;
   }
   .showpagePoint {
   color:#fff;
   text-decoration:none;
   border: 1px solid #fff;
   background: #000;
   margin:0 3px;
   padding:3px;
   }
   .showpageOf {
   text-decoration:none;
   padding:3px;
   margin: 0 3px 0 0;
   }
   .showpage a {
   text-decoration:none;
   border: 1px solid #bbb;
   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=3;
   var firstPageWord = 'Awal';
   var endPageWord = 'Akhir';
   var upPageWord ='Sebelumnya';
   var downPageWord ='Selanjutnya'
   
   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 += '&nbsp;<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">Page '+thisNum+' of '+(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>
   <div style="text-align:right; display:none;"><a href="http://4downloadss.blogspot.com"><small>Grab this Widget ~ Navigasi Halaman</small></a></div>

4. Setelah Script yang sudah diCo-Past tersebut ditambahkan ke Widget yang baru tadi, Pindahkan (drag n drop) Widget tersebut kebawah widget utama ato yg di sebut Blog Post.
   
   
5. And yang terakir jangan lupa untuk SAVE template/layout kamu, Agar dapat menyimpan perubahan yang telah dilakukan.

Sekedar tambahan :
Untuk style Navigasi Nya dapat Kalian rubah sesuai keinginan kalian, And untuk Kode yang berwarna merah dapat kalian ganti juga :

var pageCount=5;
var displayPageNum=3;
var firstPageWord = 'Awal';
var endPageWord = 'Akhir';
var upPageWord ='Sebelumnya';
var downPageWord ='Selanjutnya';

Wuuuhhzzzz... Akhirnya selesai jugaa, he..he..
Selamat mencoba and penulis ucapkan GOOD LUCK.!!!.