Cara Membuat Navigasi Page Number Di Blog

Pada postingan kali ini kita akan membuat navigasi page number atau cara membuat navigasi halaman dengan nomor. Blogger sebenarnya sudah mem...

Pada postingan kali ini kita akan membuat navigasi page number atau cara membuat navigasi halaman dengan nomor. Blogger sebenarnya sudah memiliki navigasi untuk menampilkan postingan baru dan postingan lama. Tapi sayangnya secara default blogger tidak dapat menampilkan jumlah halaman dengan menggunakan nomor.

Dengan membuat navigasi page number di blog, pengguna blog akan lebih cepat untuk melihat postigan lama dari blog. Kegunaan dari navigasi page number adalah untuk menampilkan jumlah halaman dan tombol link dengan angka, dimana setiap halaman memiliki jumlah postingan yg bisa diatur sedemikian rupa. Bagi yg ingin membuat navigasi page number di blog, simak langkah-langkah berikut.

CSS Navigasi Page Number

• Login ke blogger > Template > Edit html
• Cari kode ]]></b:skin>

• Kemudian pastekan salah satu css navigasi page number tepat diatas kode tersebut

CSS Navigasi Page Number 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;}]

CSS Navigasi Page Number 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);}]

CSS Navigasi Page Number Style 3

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

CSS Navigasi Page Number 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: 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;}]

CSS Navigasi Page Number 5

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

JavaScript Navigasi Page Number

Masih di dalam template blogger, cari kode </body> kemudian tambahkan script navigasi page number dibawah ini tepat diatas kode tsb.

[<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 asycn='asycn' type='text/javascript'>/*<![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 = 5
}
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>]

Pengaturan

perPage: 7;
numPages: 6;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
}

Silahkan ubah tulisan warna merah sesuai dengan keinginan anda dan kemudian klik simpan. Demikianlah postingan saya mengenai cara membuat navigasi page number di blog atau cara membuat navigasi halaman dengan nomor. Semoga artikel ini dapat bermanfaat bagi kita semua.