Cara Membuat Navigasi Halaman Blog Pake Nomor

Cara mengganti teks "Newer Posts" (Posting Terbaru), "Home" (Beranda), dan "Older Posts" (Posting Lama) dengan Nomor/Angka.

PANDUAN cara menampilkan, memunculkan, atau membuat Navigasi Halaman dengan Nomor/Angka (Numbered Page Navigation) ini diambil dari Help Blogger setelah dipraktikkan di blog ini dan sukses.

Tips ini sekaligus mengganti teks "Newer Posts" (Posting Terbaru), "Home" (Beranda), dan "Older Posts" (Posting Lama) yang biasa muncul di halalaman depan dan/atau halaman Label/Kategori konten blog.

Cara Membuat Navigasi Halaman Blog Pake Angka/Nomor

1. Template > 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 += "Page " + currentPageNo + ' of ' + lastPageNo + "";
 var prevNumber = parseInt(currentPageNo) - 1;
 //Iccsi was here, doing magic
 if (currentPageNo > 1) {
 if (currentPage == "page") {
 html += '<a href="' + home_page + '">' + firstText + '</a>'
 } else {
 html += '<a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + firstText + '</a>'
 }
}
 if (currentPageNo > 2) {
 if (currentPageNo == 3) {
 if (currentPage == "page") {
 html += '<a href="' + home_page + '">' + prevText + '</a>'
 } else {
 html += '<a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">' + prevText + '</a>'
 }
 } else {
 if (currentPage == "page") {
 html += '<a href="#" onclick="redirectpage(' + prevNumber + ');return false">' + prevText + '</a>'
 } else {
 html += '<a href="#" onclick="redirectlabel(' + prevNumber + ');return false">' + prevText + '</a>'
 }
 }
 }
 if (pageStart > 1) {
 if (currentPage == "page") {
 html += '<a href="' + home_page + '">1</a>'
 } else {
 html += '<a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a>'
 }
 }
 if (pageStart > 2) {
 html += ' ... '
 }
 for (var jj = pageStart; jj <= pageEnd; jj++) {
 if (currentPageNo == jj) {
 html += '' + jj + ''
 } else if (jj == 1) {
 if (currentPage == "page") {
 html += '<a href="' + home_page + '">1</a>'
 } else {
 html += '<a href="/search/label/' + postLabel + '?&max-results=' + perPage + '">1</a>'
 }
 } else {
 if (currentPage == "page") {
 html += '<a href="#" onclick="redirectpage(' + jj + ');return false">' + jj + '</a>'
 } else {
 html += '<a href="#" onclick="redirectlabel(' + jj + ');return false">' + jj + '</a>'
 }
 }
 }
 if (pageEnd < lastPageNo - 1) {
html += '...'
 }
 if (pageEnd < lastPageNo) {
 if (currentPage == "page") {
 html += '<a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastPageNo + '</a>'
 } else {
 html += '<a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastPageNo + '</a>'
 }
 }
 var nextnumber = parseInt(currentPageNo) + 1;
 if (currentPageNo < (lastPageNo - 1)) {
 if (currentPage == "page") {
 html += '<a href="#" onclick="redirectpage(' + nextnumber + ');return false">' + nextText + '</a>'
 } else {
 html += '<a href="#" onclick="redirectlabel(' + nextnumber + ');return false">' + nextText + '</a>'
 }
}
if (currentPageNo < lastPageNo) {
 //Iccsi was here, doing magic
 if (currentPage == "page") {
 html += '<a href="#" onclick="redirectpage(' + lastPageNo + ');return false">' + lastText + '</a>'
 } else {
 html += '<a href="#" onclick="redirectlabel(' + lastPageNo + ');return false">' + lastText + '</a>'
 }
 }
 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:

#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;}

6. Save Template!

Kini Navigasi Halaman blog Anda berubah jadi nomor, dari yang tadinya Newer, Older, dan Home, menjadi angka seperti tampak di halaman depan blog ini.

Kode no. 5 tadi hanya satu dari sekian kode lain dengan model Numbered Page Navigation lainnya. Silakan pilih di Help Blogger untuk model lainnya. (http://blogromeltea.blogspot.com).*