Cara Mudah Membuat Navigasi Next Page Number Pada Blogspot

Pagi, siang, malam all... kali ini jaka mau membagikan artikel tentang cara membuat next page number di blog (halaman selanjutnya dengan navigasi angka/ penomoran). Adapun tujuan dari penambahan next page number ini adalah agar dapat mempercantik tampilan blog sobat (Biar rapi gitu, gak acak-acakan banget).

Mungkin kebanyakan tempate yang ada diblogger maupun buatan dari mas mas disaign tempalte kebanyakan menggunakan navigasi halaman dengan format teks, seperti "Newer Posts" (Posting Terbaru), "Home" (Beranda), dan "Older Posts" (Posting Lama).

Nah disini kita kita pade bakal mengganti navigasi halaman yang mulanya dengan teks "Newer Posts", "Home", dan "Older Posts" menjadi format nomor/angka.

Untuk lebih jelasnya, lihat gambar berikut ini:

Untuk demonya bisa dilihat DISINI!

Nah jadi langsung saja bapa-bapa, ibu-ibu berikut ini panduan selengkapnya tentang tata cara mengganti, menampilkan, memunculkan, atau membuat Navigasi halaman dengan Nomor/Angka (Numbered Page Navigation) pada blogspot.. (mudah-mudahan berlaku juga untuk wordpress)heee

Oke ikuti ya langkah kangkah nya!>>>

1. Pertama-tama silahkan sobat masuk ke blogger>menu template > edit HTML.
2. Kemudian sobat cari deh kode </body> (Ada di bagian bawah banget) biar lebih cepat gunakan teknik saringgan nya sasuke dengan cara tekan "Ctrl+F"
3. Jaka udah ketemu kodenya, Selanjutnya silakan sobat Copy kode script berikut ini dan paste TEPAT 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>

Note:
Untuk script yang berwarna hijau di atas, sobat bisa menatanya sendiri.. Tentunya sobat pasti mengerti "Kan anak blogger" ckckckck..

4. Setalah itu cari kembali (Ctrl+F) kode ]]</b:skin>
5. Copy kode css berikut ini dan pastekan TEPAT 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. Jika sudah semua, terakhir sobat tinggal klik Save Template!

NOTE:
Sobat bisa men disaign ulang tampilan navigasi halaman, seperti warna dan ukuran. Adapun caranya dengan merubah beberapa kode script pada CSS (Kode kedua) ...

Nah sekarang Navigasi halaman blog sobat sudah berubah dengan format nomor, dari yang tadinya Newer, Older, dan Home....

Oke ... mungkin itu saja yang dapat jaka bagikan pada artikel ini,,, semoga bermanfaat ya guys!!..
==
==
Biar lebih berkah.. bantu share juga ya!!! oke oke?

Cara Mudah Membuat Navigasi Next Page Number Pada Blogspot