Cara Mengganti Next Page dengan Angka Di Blog ~ Hendy Satria 18

Navigasi Nomor Halaman pada sebuah website atau blog merupakan menu yang sanagat penting di karenakan Navigasi Nomor Halaman itu akan menunjukan berapa index atau halaman yang berisi artikel yang ada pada suatu website atau blog tersebut. Pada Blogger kita dapat mengatur berapa posting artikel yang akan di tampilkan pada setiap halaman, setelah jumlah posting artikel melebihi halaman yang di tampilkan maka kita akan melihat menu navigasi "Posting Lama" dan "Posting Lebih Baru" yang biasanya di tampikan pada bagian bawah posting artikel setiap halaman. Blogger memang menyediakan menu navigasi "Posting Lama" dan "Posting Lebih Baru" untuk melihat halaman-halaman yang berisi posting artikel tetapi Blogger tidak menyediakan penomoran berapa jumlah halaman yang berisi posting artikel yang ada pada blog kita.

Navigasi Nomor Halaman pada blogger sangatlah penting selain mengetahui jumlah halaman yang berisi posting artikel, kita juga dapat melompat dari satu halaman ke halaman lain atau membuka pada halaman tertentu pada blog. Selain itu Navigasi Nomor Halaman juga dapat membuat blog anda terlihat lebih menarik karena anda dapat membuat fariasi yang berbeda. Berikut adalah tutorial tentang cara untuk menambahkan halaman bernomor navigasi menggunakan Javascript untuk Blogger.

Cara Menambahkan Navigasi Nomor Halaman pada Blogger:

Buka Dashboard > Template> klik pada tombol Edit HTML

2. Cari (Ctrl+F) kode </body> (Ada di bagian bawah banget).
3. Copy kode berikut ini dan paste di atas kode </body> tadi:

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
    var perPage=7;
    var numPages=6;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='« Previous';
    var nextText ='Next »';
    var urlactivepage=location.href;
    var home_page="/";
/*]]>*/
</script>
<script>
/*<![CDATA[*/
    if (typeof firstText == "undefined") firstText = "First";
    if (typeof lastText == "undefined") lastText = "Last";
    var noPage;
    var currentPage;
    var currentPageNo;
    var postLabel;
    pagecurrentg();
    function looppagecurrentg(pageInfo) {
        var html = '';
        pageNumber = parseInt(numPages / 2);
        if (pageNumber == numPages - pageNumber) {
            numPages = pageNumber * 2 + 1
        }
        pageStart = currentPageNo - pageNumber;
        if (pageStart < 1) pageStart = 1;
        lastPageNo = parseInt(pageInfo / perPage) + 1;
        if (lastPageNo - 1 == pageInfo / perPage) lastPageNo = lastPageNo - 1;
        pageEnd = pageStart + numPages - 1;
        if (pageEnd > lastPageNo) pageEnd = lastPageNo;
        html += "<span class='showpageOf'>Page " + currentPageNo + ' of ' + lastPageNo + "</span>";
        var prevNumber = parseInt(currentPageNo) - 1;
        //Iccsi was here, doing magic
        if (currentPageNo > 1) {
   if (currentPage == "page") {
     html += '<span class="showpage firstpage"><a href="' + home_page + '">' + firstText + '</a></span>'
   } else {
     html += '<span class="displaypageNum firstpage"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + firstText + '</a></span>'
   }
}
    if (currentPageNo > 2) {
            if (currentPageNo == 3) {
                if (currentPage == "page") {
                    html += '<span class="showpage"><a href="' + home_page + '">' + prevText + '</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + prevText + '</a></span>'
                }
            } else {
                if (currentPage == "page") {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + prevNumber + ');return false">' + prevText + '</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + prevNumber + ');return false">' + prevText + '</a></span>'
                }
            }
        }
        if (pageStart > 1) {
            if (currentPage == "page") {
                html += '<span class="displaypageNum"><a href="' + home_page + '">1</a></span>'
            } else {
                html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a></span>'
            }
        }
        if (pageStart > 2) {
            html += ' ... '
        }
        for (var jj = pageStart; jj <= pageEnd; jj++) {
            if (currentPageNo == jj) {
                html += '<span class="pagecurrent">' + jj + '</span>'
            } else if (jj == 1) {
                if (currentPage == "page") {
                    html += '<span class="displaypageNum"><a href="' + home_page + '">1</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a></span>'
                }
            } else {
                if (currentPage == "page") {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + jj + ');return false">' + jj + '</a></span>'
                } else {
                    html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + jj + ');return false">' + jj + '</a></span>'
                }
            }
        }
        if (pageEnd < lastPageNo - 1) {
html += '...'
        }
        if (pageEnd < lastPageNo) {
            if (currentPage == "page") {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastPageNo + '</a></span>'
            } else {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastPageNo + '</a></span>'
            }
        }
        var nextnumber = parseInt(currentPageNo) + 1;
        if (currentPageNo < (lastPageNo - 1)) {
            if (currentPage == "page") {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectpage(' + nextnumber + ');return false">' + nextText + '</a></span>'
            } else {
                html += '<span class="displaypageNum"><a href="#" onclick="redirectlabel(' + nextnumber + ');return false">' + nextText + '</a></span>'
            }
}
if (currentPageNo < lastPageNo) {
   //Iccsi was here, doing magic
   if (currentPage == "page") {
     html += '<span class="displaypageNum lastpage"><a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastText + '</a></span>'
   } else {
     html += '<span class="displaypageNum lastpage"><a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastText + '</a></span>'
   }
        }
        var pageArea = document.getElementsByName("pageArea");
        var blogPager = document.getElementById("blog-pager");
        for (var p = 0; p < pageArea.length; p++) {
            pageArea[p].innerHTML = html
        }
        if (pageArea && pageArea.length > 0) {
            html = ''
        }
        if (blogPager) {
            blogPager.innerHTML = html
        }
    }

    function totalcountdata(root) {
        var feed = root.feed;
        var totaldata = parseInt(feed.openSearch$totalResults.$t, 10);
        looppagecurrentg(totaldata)
    }
    function pagecurrentg() {
        var thisUrl = urlactivepage;
        if (thisUrl.indexOf("/search/label/") != -1) {
            if (thisUrl.indexOf("?updated-max") != -1) {
                postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?updated-max"))
            } else {
                postLabel = thisUrl.substring(thisUrl.indexOf("/search/label/") + 14, thisUrl.indexOf("?&max"))
            }
        }
        if (thisUrl.indexOf("?q=") == -1 && thisUrl.indexOf(".html") == -1) {
            if (thisUrl.indexOf("/search/label/") == -1) {
                currentPage = "page";
                if (urlactivepage.indexOf("#PageNo=") != -1) {
                    currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
                } else {
                    currentPageNo = 1
                }
                document.write("<script src=\"" + home_page + "feeds/posts/summary?max-results=1&alt=json-in-script&callback=totalcountdata\"><\/script>")
            } else {
                currentPage = "label";
                if (thisUrl.indexOf("&max-results=") == -1) {
                    perPage = 20
                }
                if (urlactivepage.indexOf("#PageNo=") != -1) {
                    currentPageNo = urlactivepage.substring(urlactivepage.indexOf("#PageNo=") + 8, urlactivepage.length)
                } else {
                    currentPageNo = 1
                }
                document.write('<script src="' + home_page + 'feeds/posts/summary/-/' + postLabel + '?alt=json-in-script&callback=totalcountdata&max-results=1" ><\/script>')
            }
        }
    }
    function redirectpage(numberpage) {
        jsonstart = (numberpage - 1) * perPage;
        noPage = numberpage;
        var nameBody = document.getElementsByTagName('head')[0];
        var newInclude = document.createElement('script');
        newInclude.type = 'text/javascript';
        newInclude.setAttribute("src", home_page + "feeds/posts/summary?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
        nameBody.appendChild(newInclude)
    }

    function redirectlabel(numberpage) {
        jsonstart = (numberpage - 1) * perPage;
        noPage = numberpage;
        var nameBody = document.getElementsByTagName('head')[0];
        var newInclude = document.createElement('script');
        newInclude.type = 'text/javascript';
        newInclude.setAttribute("src", home_page + "feeds/posts/summary/-/" + postLabel + "?start-index=" + jsonstart + "&max-results=1&alt=json-in-script&callback=finddatepost");
        nameBody.appendChild(newInclude)
    }

    function finddatepost(root) {
        post = root.feed.entry[0];
        var timestamp1 = post.published.$t.substring(0, 19) + post.published.$t.substring(23, 29);
        var timestamp = encodeURIComponent(timestamp1);
        if (currentPage == "page") {
            var pAddress = "/search?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage
        } else {
            var pAddress = "/search/label/" + postLabel + "?updated-max=" + timestamp + "&max-results=" + perPage + "#PageNo=" + noPage
        }
        location.href = pAddress
    }
/*]]>*/
</script>
</b:if>
</b:if>

4. Cari (Ctrl+F) kode ]]</b:skin>
5. Copy kode berikut ini dan paste di atas kode ]]</b:skin> tersebut:
1. - Style 1
    
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 7px;margin-right:5px;background:#E9E9E9;color: #888;border:1px solid #E9E9E9;}
    .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color: #000;}
    .showpageOf{display:none!important}
    #blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color: #888;}
    #blog-pager .pages{border:none;}
  - Style 2
    
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{padding: 5px 10px;margin-right:5px; color: #F4F4F4; background-color:#404042;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#EC8D04;text-decoration:none;color: #fff;}
    #blog-pager .showpage, #blog-pager, .pagecurrent{font-weight:bold;color: #000;}
    .showpageOf{display:none!important}
    #blog-pager .pages{border:none;-webkit-box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);-moz-box-shadow:0px 5px 3px -1px rgba(50, 50, 50, 0.53);box-shadow: 0px 5px 3px -1px rgba(50, 50, 50, 0.53);}
  - Style 3
    
    #blog-pager{clear:both;margin:30px auto; padding: 7px; text-align:center;font-size: 11px;background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #000000),color-stop(1, #292929));background-image: -o-linear-gradient(top, #000000 0%, #292929 100%);background-image: -moz-linear-gradient(top, #000000 0%, #292929 100%);background-image: -webkit-linear-gradient(top, #000000 0%, #292929 100%);background-image: -ms-linear-gradient(top, #000000 0%, #292929 100%);background-image: linear-gradient(to top, #000000 0%, #292929 100%); padding: 6px;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{padding: 3px 10px;margin-right:5px; color: #fff;}
    .displaypageNum a:hover,.showpage a:hover,.pagecurrent{background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #59A2CF),color-stop(1, #D9EAFF));background-image: -o-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -moz-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -webkit-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: -ms-linear-gradient(top, #59A2CF 0%, #D9EAFF 100%);background-image: linear-gradient(to top, #59A2CF 0%, #D9EAFF 100%);text-decoration: none;color: #000;-webkit-border-radius: 3px;-moz-border-radius: 3px;border-radius: 3px;}
    .showpageOf{display:none!important}.blog-pager-older-link, .home-link, .blog-pager-newer-link {background: transparent;}
    a.blog-pager-older-link, a.home-link, a.blog-pager-newer-link {color: #fff;}
    #blog-pager .pages{border:none;background: none;}
  - Style 4
    
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px;}
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 14px;padding: 5px 12px;margin-right:5px; color: #666; background-color:#eee;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#359BED;text-decoration:none;color: #fff;}
    #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#359BED;}
    .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}
  - Style 5
    
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #3E5801; background-color:#E0EDC1;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#FEF6DF;text-decoration:none;color: #E16800;}
    #blog-pager .pagecurrent{font-weight:bold;color: #D25E71;background:#FFDEDF;}
    .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}
  - Style 6
    
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 13px;padding: 5px 12px;margin-right:5px; color: #AD0B00; background-color:#FAB001;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#DB4920;text-decoration:none;color: #fff;}
    #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
    .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}
  - Style 7
    
    #blog-pager{clear:both;margin:30px auto;text-align:center; padding: 7px; }
    .blog-pager {background: none;}
    .displaypageNum a,.showpage a,.pagecurrent{font-size: 12px;padding: 5px 12px;margin-right:5px; color: #222; background-color:#eee; border: 1px solid #EEEEEE;}
    .displaypageNum a:hover,.showpage a:hover, .pagecurrent{background:#E5E5E5;text-decoration:none;color: #222;}
    #blog-pager .pagecurrent{font-weight:bold;color: #fff;background:#DB4920;}
    .showpageOf{display:none!important}
    #blog-pager .pages{border:none;}
  Catatan: Jika Anda ingin menyembunyikan tombol "Halaman Pertama" dan "Halaman Terakhir" tambahkan baris ini di bawah kode CSS
  
  .firstpage, .lastpage {display: none;}
2. Selanjutnya cari kode </body> dan tambahkan script tepat di atasnya
  
  <b:if cond='data:blog.pageType != "item"'>
  <b:if cond='data:blog.pageType != "static_page"'>
  <script type='text/javascript'>
  /*<![CDATA[*/
      var perPage=7;
      var numPages=6;
      var firstText ='First';
      var lastText ='Last';
      var prevText ='« Previous';
      var nextText ='Next »';
      var urlactivepage=location.href;
      var home_page="/";
  /*]]>*/
  </script>
  <script src="http://helplogger.googlecode.com/svn/trunk/page-navigation2.js"/>
  </b:if>
  </b:if>
  
  Konfigurasi:
  perPage: berapa banyak posting akan ditampilkan di setiap halaman (7). Nilai ini harus sama dengan jumlah posting di halaman utama. Jika tidak, tambahkan jumlah yang sama dengan pergi ke "Setelan"> "Pos dan komentar" dan ketik jumlah pada "Tampilkan sebanyak mungkin" halaman, kemudian klik pada "Simpan Setelan" tombol.
  numPage: berapa banyak halaman yang akan ditampilkan dalam navigasi halaman (6)
  Untuk menggantikan teks ‘First’, ‘Last’, “« Previous” dan “Next »” teks, cukup ketik sendiri dalam tanda kutip.
  Secara default, Blogger akan menampilkan 20 posting pada halaman label. Untuk membuat widget ini muncul pada halaman label, kita harus mengurangi ini ke nilai yang kami berikan untuk variabel perpage.
3. Selanjutnya cari setiap potongan kode berikut
  
  expr:href='data:label.url'
4. Ganti kode di atas dengan
  
  expr:href='data:label.url + "?&max-results=7"'
  Angka 7 adalah jumlah posting yang akan ditampilkan per halaman
5. Terakhir Simpan Template

Hendy Satria 18

Kamis, 15 Oktober 2015

Cara Mengganti Next Page dengan Angka Di Blog

0 komentar:

Posting Komentar

Like Fanspage

Jam

Chat

Label

Arsip Blog

Lencana

Statistik

Mengenai Saya

Pengikut

Kalender