Numberpage navigation di blogspot

Bagi anda yang bosan dgn tampilan navigation yang disedia oleh blogger, anda bisa menggantinya dengan navigation berupa angka seperti pada wordpress. Caranya cukup mudah, anda tinggal mengikuti langkah-langkah berikut ini:
  1. Setelah itu cari kode

    <b:section class=’main’ id=’main’ showaddelement=’yes’>
    <b:widget id=’Blog1′ locked=’true’ title=’Blog Posts’ type=’Blog’/>
    </b:section>
  2. Lalu letakkan kode dibawah ini tepat dibawah </b:section>

    &lt;script type=&quot;text/javascript&quot;&gt;
    function showpageCount(json) {
    var thisUrl = location.href;
    var htmlMap = new Array();
    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
    var isLablePage = thisUrl.indexOf(&quot;/search/label/&quot;)!=-1;
    var isPage = thisUrl.indexOf(&quot;/search?updated&quot;)!=-1;
    var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf(&quot;/search/label/&quot;)+14,thisUrl.length) : &quot;&quot;;
    thisLable = thisLable.indexOf(&quot;?&quot;)!=-1 ? thisLable.substr(0,thisLable.indexOf(&quot;?&quot;)) : thisLable;
    var thisNum = 1;
    var postNum=1;
    var itemCount = 0;
    var fFlag = 0;
    var eFlag = 0;
    var html= &#39;&#39;;
    var upPageHtml =&#39;&#39;;
    var downPageHtml =&#39;&#39;;
    var pageCount = 5;
    var displayPageNum = 5;
    var upPageWord = &#39;Previous&#39;;
    var downPageWord = &#39;Next&#39;;
    var labelHtml = &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/search/label/&#39;+thisLable+&#39;?&amp;max-results=&#39;+pageCount+&#39;&quot;&gt;&#39;;
    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!=&#39;&#39;){
    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] = &#39;/search/label/&#39;+thisLable+&#39;?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
    }
    }
    }
    }//end if(post.category){
    itemCount++;
    }
    }else{
    if(title!=&#39;&#39;){
    if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){
    if(thisUrl.indexOf(timestamp)!=-1 ){
    thisNum = postNum;
    }
    if(title!=&#39;&#39;) postNum++;
    htmlMap[htmlMap.length] = &#39;/search?updated-max=&#39;+timestamp+&#39;T00%3A00%3A00%2B08%3A00&amp;max-results=&#39;+pageCount;
    }
    }
    itemCount++;
    }
    }
    for(var p =0;p&lt; htmlMap.length;p++){
    if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
    if(fFlag ==0 &amp;&amp; p == thisNum-2){
    if(thisNum==2){
    if(isLablePage){
    upPageHtml = labelHtml + upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;/&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }else{
    upPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ upPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    fFlag++;
    }
    if(p==(thisNum-1)){
    html += &#39;&lt;span class=&quot;showpagePoint&quot;&gt;&#39;+thisNum+&#39;&lt;/span&gt;&#39;;
    }else{
    if(p==0){
    if(isLablePage){
    html = labelHtml+&#39;1&lt;/a&gt;&lt;/span&gt;&#39;;
    }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;/&quot;&gt;1&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }else{
    html += &#39;&lt;span class=&quot;showpageNum&quot;&gt;&lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ (p+1) +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    }
    }
    if(eFlag ==0 &amp;&amp; p == thisNum){
    downPageHtml = &#39;&lt;span class=&quot;showpage&quot;&gt; &lt;a href=&quot;&#39;+htmlMap[p]+&#39;&quot;&gt;&#39;+ downPageWord +&#39;&lt;/a&gt;&lt;/span&gt;&#39;;
    eFlag++;
    }
    }//end if(p&gt;=(thisNum-displayPageNum-1) &amp;&amp; p&lt;(thisNum+displayPageNum)){
    }//end for(var p =0;p&lt; htmlMap.length;p++){
    if(thisNum&gt;1){
    if(!isLablePage){
    html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
    }else{
    html = &#39;&#39;+upPageHtml+&#39; &#39;+html +&#39; &#39;;
    }
    }
    html = &#39;&lt;div class=&quot;showpageArea&quot;&gt;&lt;span style=&quot;COLOR: #000;&quot; class=&quot;showpageOf&quot;&gt; Pages (&#39;+(postNum-1)+&#39;)&lt;/span&gt;&#39;+html;
    if(thisNum&lt;(postNum-1)){
    html += downPageHtml;
    }
    if(postNum==1) postNum++;
    html += &#39;&lt;/div&gt;&#39;;
    if(isPage || isFirstPage || isLablePage){
    var pageArea = document.getElementsByName(&quot;pageArea&quot;);
    var blogPager = document.getElementById(&quot;blog-pager&quot;);
    if(postNum &lt;= 2){
    html =&#39;&#39;;
    }
    for(var p =0;p&lt; pageArea.length;p++){
    pageArea[p].innerHTML = html;
    }
    if(pageArea&amp;&amp;pageArea.length&gt;0){
    html =&#39;&#39;;
    }
    if(blogPager){
    blogPager.innerHTML = html;
    }
    }
    }
    &lt;/script&gt;
    &lt;script src=&quot;/feeds/posts/summary?alt=json-in-script&amp;callback=showpageCount&amp;max-results=99999&quot;; type=&quot;text/javascript&quot;&gt;&lt;/script&gt;

  3. Sekarang anda tinggal mengedit kode berikut:


    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;.com/&quot;;
    Ket: .com adalah nama blog yang harus anda masukkan contoh :http:x-ploits.blogspot.com menjadi:

    var isFirstPage = thisUrl.substring(thisUrl.length-5,thisUrl.length)==&quot;x-ploits.blogspot.com&quot;;

  4. Selanjutnya edit

    var pageCount = 5;
    pilih jumlah halaman yang akan anda tampilkan per halaman. Misalkan anda ingin menampilkan 7 halaman, maka setiap navigasi yang anda klik akan menampilkan 7 halaman. Contoh kodenya:

    var pageCount = 7;
  5. Sekarang tinggal anda ubah tampilan navigation dengan mengedit CSS nya.
  6. Sekedar saran sebelum anda mengotak-atik kode terlebih dahulu backup kode blog anda.
  7. Untuk melihat contohnya anda dapat melihatnya pada halaman utama blog saya.
  8. Nantikan juga tutorial mengenai trik blogger lainnya. Enjoy it…