Membuat Navigasi Halaman Seperti Punya Google ...!

Setelah sebelumnya saya menjelaskan cara membuat navigasi halaman, akhirnya saya tertarik dan ingin berbagi cara membuat navigasi halaman dalam model berbeda dengan versi menyerupai navigasinya mbah GOOGLE. mau tau cara membuatnya ...?

sebenarnya script ini aslinya dari kang abu farhan cuma saya otak atik lagi jadi dech seperti ini. oia tidak ketinggalan juga kalo kalian mau membuat halaman navigasi dan langsung melihat hasilnya, kalian harus membuat atau memiliki jumlah postingan atau artikel yang lumayan banyak, sehingga navigasi halaman ini akan muncul. Untuk perbandingannya coba perhatikan gambar berikut:

== Punya Mbah GOOGLE


== Punya Blog z33s



seperti biasa untuk membuatnya, kalian harus login ke bloger kalian dan lanjutkan ke tahap-tahap dibawah ini:

1. pilih Rancangan / Tata Letak
2. Pilih Edit HTML ( Jangan Lupa centang Expand widget template / Back up dulu Template)
3. Coba kalian cari Kode ]]></b:skin>
4. Copy script dibawah ini dan paste di atas kode tadi ( yang kalian cari )

#nav a,#nav a:visited,.blk a{color:#000}
#nav a{display:block}
#nav .b a,#nav .b a:visited{color:#20c}
#nav .i{color:#a90a08;font-weight:bold}
.csb,.ss{background:url(http://i25.tinypic.com/fa7jir.jpg) no-repeat 0 0;height:26px;display:block}
.ss{background-position:0 -88px;position:absolute;left:0;top:0}
.cps{height:18px;overflow:hidden;width:114px}
.mbi{width:13px;height:13px;background-position:-91px -74px;margin-right:3px}
#nav td{padding:0;text-align:center}

5. Sekarang coba cari kode </body>
6. Copy dan letakan script berikut di atasnya ( kode </body> )

<script type='text/javascript'>var home_page_url = location.href; var pageCount=10;var displayPageNum=6;var upPageWord ='Previous';var downPageWord ='Next';function showpageCount(json) {var thisUrl = home_page_url;var htmlMap = new Array();var thisNum = 1;var postNum=1;var itemCount = 0;var fFlag = 0;var eFlag = 0;var html= '';var upPageHtml ='';var downPageHtml ='';htmlMap[htmlMap.length]='/';postNum++;for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } postNum++; htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;}var banyaknomer = htmlMap.length;if (json.feed.entry.length % pageCount == 0){ var banyaknomer = htmlMap.length -1 ; postNum=postNum-1;};for(var p =0;p< banyaknomer;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ upPageHtml = '<a href="/"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>'; }else{ upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>'; } fFlag++; } if(p==(thisNum-1)){ if(p==0){ html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>'; }else{ html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>'; } }else{ if(p==0){ html += '<td><a href="/"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>'; }else{ html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>'; eFlag++; } }}if(thisNum>1){ html = ''+upPageHtml+' '+html +' ';}html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b"> </td><td class="b">';html3 = '</tr></tbody></table>';html = html2+html; if(thisNum<(postNum-1)){ html += downPageHtml; }else{ html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';}if(postNum==1) postNum++;html += html3+ '</div>';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;}}function showpageCount2(json) {var thisUrl = home_page_url;var htmlMap = new Array();var isLablePage = thisUrl.indexOf("/search/label/")!=-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 labelHtml = '<a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';var thisUrl = home_page_url; htmlMap[htmlMap.length]=labelHtml;postNum++;for(var i=pageCount-1, post; post = json.feed.entry[i]; i=i+pageCount) { var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29); timestamp = encodeURIComponent(timestamp1); var title = post.title.$t; if(thisUrl.indexOf(timestamp)!=-1 ){ thisNum = postNum; } if(title!='') postNum++; htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount; itemCount++;}var banyaknomer = htmlMap.length;if (json.feed.entry.length % pageCount == 0){ var banyaknomer = htmlMap.length -1 ; postNum=postNum-1;};for(var p =0;p< banyaknomer;p++){ if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){ if(fFlag ==0 && p == thisNum-2){ if(thisNum==2){ upPageHtml = labelHtml +'<span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>'; }else{ upPageHtml = '<a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: 0pt 0pt; margin-left: auto; width: 44px;"></span><div style="margin-right: 8px;">'+ upPageWord +'</a></td>'; } fFlag++; } if(p==(thisNum-1)){ if(p==0){ html += '<span class="csb" style="background-position: -26px 0pt; width: 18px;"></span></td><td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>'; }else{ html += '<td class="cur"><span class="csb" style="background-position: -44px 0pt; width: 16px;"></span>'+thisNum+'</td>'; } }else{ if(p==0){ html = '<td>'+labelHtml+'<span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>1</a></td>'; }else{ html += '<td><a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -60px 0pt; width: 16px;"></span>'+ (p+1) +'</a></td>'; } } if(eFlag ==0 && p == thisNum){ downPageHtml = '<td class="b"> <a href="'+htmlMap[p]+'"><span class="csb ch" style="background-position: -76px 0pt; margin-right: 34px; width: 66px;"></span>'+ downPageWord +'</a></td>'; eFlag++; } }}if(thisNum>1){ if(!isLablePage){ html = ''+upPageHtml+' '+html +' '; }else{ html = ''+upPageHtml+' '+html +' '; }} html2 = '<table id="nav" style="margin: auto auto 1.4em; border-collapse: collapse;text-align: center; direction: ltr;" align="center"><tbody><tr valign="top"><td class="b"> </td><td class="b">';html3 = '</tr></tbody></table>';html = html2+html; if(thisNum<(postNum-1)){ html += downPageHtml; }else{ html += '<td class="b"><span class="csb" style="background-position: -76px 0pt; width: 42px;"></span></td>';} if(postNum==1) postNum++;html += html3+ '</div>'; 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 type='text/javascript'> var thisUrl = home_page_url; if (thisUrl.indexOf("/search/label/")!=-1){ if (thisUrl.indexOf("?updated-max")!=-1){ var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max")); }else{ var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max")); } } var home_page = "/"; if (thisUrl.indexOf("?q=")==-1 && thisUrl.indexOf(".html")==-1){ if (thisUrl.indexOf("/search/label/")==-1){ document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>') }else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')}}</script>

Keterangan :
== Untuk melihat script aslinya klik disini... ( Biar cepat Copasnya )
== var pageCount=10; / ganti sesuai keinginan kalian
== var displayPageNum=6; / ganti sesuai keinginan kalian
== var upPageWord ='Previous'; / Bisa kalian ganti dengan sebelumnya
== var downPageWord ='Next'; / bisa kalian ganti denga selanjutnya
== Page ('+(postNum-1)+') / Untuk menampilkan kata page(10)/jumlah halaman

7. Jangan Lupa Simpan templatenya dan lihat hasilnya.

Untuk demonya kalian bisa klik disini...

Semoga bermanfaat dan jangan lupa berikan komentarnya apabila ada yang kurang mengerti... oia kalian boleh juga Share Artikel dengan cara klik gambar logo sharing bookmark di bawah... Terima kasih.

Source : Kang Abu Farhan