Membuat Navigasi Halaman Bernomor

jika biasanya pada halaman pada blog anda hanya ada older post ternyata itu bisa di ganti dengan halaman bernomor seperti gambar berikut :D :





Aku ambil singkat dari seputar blog :z . untuk membuat navigasi halaman bernomer, cara membuatnya, begini :
1. Login ke blogger ( yoiyolah klo gak gmn bisa? :O )
2. masuk ke tata letak (layout) >> element halaman
3. tambah gedget >> pilih HTML/java script
4. copas code berikut:

<span style="color: rgb(114, 45, 50);"> </span></code></span><span class="fullpost"><pre><style><br />.showpageArea {padding: 0 2px;margin-top:10px;margin-bottom:10px;<br />}<br />.showpageArea a {border: 1px solid #505050;<br />color: #000000;font-weight:normal;<br />padding: 3px 6px !important;<br />padding: 1px 4px ;margin:0px 4px;<br />text-decoration: none;<br />}<br />.showpageArea a:hover {<br />font-size:11px;<br />border: 1px solid #333;<br />color: #000000;<br />background-color: #FFFFFF;<br />}<br /><br />.showpageNum a {border: 1px solid #505050;<br />color: #000000;font-weight:normal;<br />padding: 3px 6px !important;<br />padding: 1px 4px ;margin:0px 4px;<br />text-decoration: none;<br /><br />}<br />.showpageNum a:hover {<br />font-size:11px;<br />border: 1px solid #333;<br />color: #000000;<br />background-color: #FFFFFF;<br /><br />}<br />.showpagePoint {font-size:11px;<br />padding: 2px 4px 2px 4px;<br />margin: 2px;<br />font-weight: bold;<br />border: 1px solid #333;<br />color: #fff;<br />background-color: #000000;<br /><br /><br />}<br /><br />.showpage a:hover {font-size:11px;<br />border: 1px solid #333;<br />color: #000000;<br />background-color: #FFFFFF;<br /><br />}<br />.showpageNum a:link,.showpage a:link {<br />font-size:11px;<br />padding: 2px 4px 2px 4px;<br />margin: 2px;<br />text-decoration: none;<br />border: 1px solid #0066cc;<br />color: #0066cc;<br />background-color: #FFFFFF;}<br /><br />.showpageNum a:hover {font-size:11px;<br />border: 1px solid #333;<br />color: #000000;<br />background-color: #FFFFFF;<br />}<br /></style><br /><br /><br /><br /><script type="text/javascript"><br /><br />function showpageCount(json) {<br />var thisUrl = location.href;<br />var htmlMap = new Array();<br />var isFirstPage = thisUrl.substring(thisUrl.length-14,thisUrl.length)==".blogspot.com/";<br />var isLablePage = thisUrl.indexOf("/search/label/")!=-1;<br />var isPage = thisUrl.indexOf("/search?updated")!=-1;<br />var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";<br />thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;<br />var thisNum = 1;<br />var postNum=1;<br />var itemCount = 0;<br />var fFlag = 0;<br />var eFlag = 0;<br />var html= '';<br />var upPageHtml ='';<br />var downPageHtml ='';<br /><br /><br />var pageCount=5;<br />var displayPageNum=3;<br />var firstPageWord = 'First';<br />var endPageWord = 'Last';<br />var upPageWord ='Previous';<br />var downPageWord ='Next';<br /><br /><br /><br />var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';<br /><br />for(var i=0, post; post = json.feed.entry[i]; i++) {<br />var timestamp = post.published.$t.substr(0,10);<br />var title = post.title.$t;<br />if(isLablePage){<br />if(title!=''){<br />if(post.category){<br />for(var c=0, post_category; post_category = post.category[c]; c++) {<br />if(encodeURIComponent(post_category.term)==thisLable){<br />if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />if(thisUrl.indexOf(timestamp)!=-1 ){<br />thisNum = postNum;<br />}<br /><br />postNum++;<br />htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;<br />}<br />}<br />}<br />}//end if(post.category){<br /><br />itemCount++;<br />}<br /><br />}else{<br />if(title!=''){<br />if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){<br />if(thisUrl.indexOf(timestamp)!=-1 ){<br />thisNum = postNum;<br />}<br /><br />if(title!='') postNum++;<br />htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'T00%3A00%3A00%2B08%3A00&max-results='+pageCount;<br />}<br />}<br />itemCount++;<br />}<br />}<br /><br />for(var p =0;p< htmlMap.length;p++){<br />if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br />if(fFlag ==0 && p == thisNum-2){<br />if(thisNum==2){<br />if(isLablePage){<br />upPageHtml = labelHtml + upPageWord +'</a></span>';<br />}else{<br />upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';<br />}<br />}else{<br />upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';<br />}<br /><br />fFlag++;<br />}<br /><br />if(p==(thisNum-1)){<br />html += '&nbsp;<span class="showpagePoint"><u>'+thisNum+'</u></span>';<br />}else{<br />if(p==0){<br />if(isLablePage){<br />html = labelHtml+'1</a></span>';<br />}else{<br />html += '<span class="showpageNum"><a href="/">1</a></span>';<br />}<br />}else{<br />html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +' </a></span>';<br />}<br />}<br /><br />if(eFlag ==0 && p == thisNum){<br />downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';<br />eFlag++;<br />}<br />}//end if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){<br />}//end for(var p =0;p< htmlMap.length;p++){<br /><br />if(thisNum>1){<br />if(!isLablePage){<br />html = '<span class="showpage"><a href="/">'+ firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';<br />}else{<br />html = ''+labelHtml + firstPageWord +' </a></span>'+upPageHtml+' '+html +' ';<br />}<br />}<br /><br />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;<br /><br />if(thisNum<(postNum-1)){<br />html += downPageHtml;<br />html += '<span class="showpage"><a href="'+htmlMap[htmlMap.length-1]+'"> '+endPageWord+'</a></span>';<br />}<br /><br />if(postNum==1) postNum++;<br />html += '</div>';<br /><br />if(isPage || isFirstPage || isLablePage){<br />var pageArea = document.getElementsByName("pageArea");<br />var blogPager = document.getElementById("blog-pager");<br /><br />if(postNum <= 2){<br />html ='';<br />}<br /><br />for(var p =0;p< pageArea.length;p++){<br />pageArea[p].innerHTML = html;<br />}<br /><br />if(pageArea&&pageArea.length>0){<br />html ='';<br />}<br /><br />if(blogPager){<br />blogPager.innerHTML = html;<br />}<br />}<br /><br />}<br /></script><br /><br /><script src="/feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" type="text/javascript"></script></pre></span><span class="fullpost"><code><span style="color: rgb(114, 45, 50);"> </span>

5. letakkan di bawah posting blog seperti gambar berikut:









6. simpan template, lihat hasilnya . . .

gmn, mudah kan... ;)