Pasang Navigasi Nomor Halaman

Mungkin para sobat sekalian pernah melihat blog yang di bawah kolom postingannya terdapat navigasi berupa nomor-nomor dari halaman, sebelumnya saya berpikir kalau nomor halaman tersebut akan muncul dengan sendirinya setelah postingan dalam blog banyak. Ternyata yang saya pikir salah besar dan ternyata halaman navigasi tersebut bisa muncul jika kita membuatnya.

Adapun cara membuat nomor halaman navigasi untuk blogger atau blogspot ada 2 macam cara yaitu sebagai berikut:

Cara Pertama :
Yaitu dengan meletakkan code di bagian code template milik sobat. Caranya adalah sebagai berikut :
1. Login ke Blogger.com.
2. Pilih dan klik menu Tata Letak.
3. Klik menu Edit Html dan
Centang kotak kecil disamping tulisan Expand Templates Widget.
4. Selanjutnya cari kode berikut:

]]></b:skin>

Jika sudah ketemu, copy kode css dibawah ini dan letakkan diatas kode tersebut:

<br /> /*--- Navigasi Nomor Halaman ---*/<br /> .showpageArea a {<br /> text-decoration:underline;<br /> }<br /> .showpageNum a {<br /> text-decoration:none;<br /> border: 1px solid #cccccc;<br /> margin:0 3px;<br /> padding:3px;<br /> }<br /> .showpageNum a:hover {<br /> border: 1px solid #cccccc;<br /> background-color:#cccccc;<br /> }<br /> .showpagePoint {<br /> color:#333;<br /> text-decoration:none;<br /> border: 1px solid #cccccc;<br /> background: #cccccc;<br /> margin:0 3px;<br /> padding:3px;<br /> }<br /> .showpageOf {<br /> text-decoration:none;<br /> padding:3px;<br /> margin: 0 3px 0 0;<br /> }<br /> .showpage a {<br /> text-decoration:none;<br /> border: 1px solid #cccccc;<br /> padding:3px;<br /> }<br /> .showpage a:hover {<br /> text-decoration:none;<br /> }<br /> .showpageNum a:link,.showpage a:link {<br /> text-decoration:none;<br /> color:#333333;<br /> }<br /> .comment-body-author {<br /> background:#99FF00;<br /> border:1px dotted #FF6600;<br /> margin:0;<br /> padding:0 0 0 20px;<br /> }

5. Lalu cari kode di bawah ini :

</body>

6. Jika sudah ketemu copy code di bawah ini dan letakkan di atas code tersebut atau di bawah code </head>

<!--Start Navigasi Nomor Halaman--><br /> <b:if cond='data:blog.pageType != "item"'><br /> <b:if cond='data:blog.pageType != "static_page"'><br /> <script type='text/javascript'>var pageCount=5; var displayPageNum=5; var upPageWord=#39;Previous#39;; var downPageWord=#39;Next#39;; </script><br /> <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/></b:if></b:if><!--End Navigasi Nomor Halaman-->

7. Klik tombol bertuliskan Pratinjau untuk melihat hasil perubahan yang sobat buat sebelum template di simpan.
8. Jika sudah sesuai dengan keinginan sobat, klik tombol bertuliskan Simpan Template.
9. Selesai.

Cara Kedua
Cara ini lebih mudah dibandingkan dengan cara di atas. Adapun cara membuatnya sebagai berikut:
1. Klik menu Tata Letak.
2. Klik tulisan Tambah Gadget, pilih HTML/Javascript.
3. Lalu copy kode di bawah ini dan paste pada kotak yang muncul :

<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 =''; <span style="color: rgb(255, 0, 0);">var pageCount=5;</span>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 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><br /> <script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script>

4. Selesai dan klik tombol bertuliskan Simpan

Keterangan :
var pageCount=5 => menunjukkan jumlah posting yang muncul pada satu halaman.

Tweet