Google Style navi |
Jika anda ingin untuk membuatnya, silahkan ikuti langkah2nya sbb:
1. Silahkan Login ke akun blogger.
2. Pergi ke Tab Rancangan, lalu Edit HTML.
3. Cari kode ]]></b:skin>, kemudian taruh kode berikut ini di atasnya:
#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://i879.photobucket.com/albums/ab351/bloggerblogimage/pagenavi/nav_logo7.png) 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}4. Sekarang cari lagi kode </body>.
5. Jika sudah ketemu, copy dan paste kode berikut di atasnya:
<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">Page ('+(postNum-1)+') </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">Page ('+(postNum-1)+') </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>
6. Save template, dan lihat hasilnya!
Semoga Bermanfaat!