Cara Memasang Page Number Navigation di Blogger

Cara Memasang Page Number Navigation di Blogger

Codepelajar.com - Cara Memasang Page Number Navigation di Blogger - Untuk berpindah dari halaman satu ke dua dan seterusnya selain memakai page link bawaan blogger (next/previous) atau metode Load More yang sudah di jelaskan di tutorial sebelumnya, kali ini ada metode lain yang dinamakan Unlimited Page Number. Metode menggunakan Javascript yang befungsi untuk memberi penomoran pada halaman depan blog sobat. Jadi user pun akan mudah apabila ia sedang mencari artikel lama di blog sobat namun tidak terlalu lama. Hanya dengan mengklik nomornya halamannya saja maka akan tertuju pada postingan-postingan yang agak lama di blog sobat


Baca Juga : Tutorial Membuat Post Info di Postingan Blog

Bagi sobat blogger yang ingin memasang juga, kali ini saya akan berbagi tutorial cara memasangnya. Ikuti dengan baik langkah-langkahnya supaya tidak eror ataupun salah menempatkan kodenya. Berikut Langkah membuat Page Number di postingan Blog

Pertama yang harus sobat lakukan tentunya masuk ke Blogger.com dan login dengan akun sobat. Setelah itu pergi ke menu Tema >> Edit HTML dan masukan CSS berikut tepat di atas </b:skin>.



/* === PAGE NUMBER CODEPELAJAR === */
#blog-pager {
clear: both;
margin: 0px auto;
text-align: center;
padding: 7px;
}
.blog-pager {
background: none;
}
.displaypageNum a, .showpage a, .pagecurrent {
padding: 10px 10px;
margin-right: 5px;
color: #444;
background-color: #fafafa;
display: block;
border-radius: 3px;
transition: all .5s;
}
.displaypageNum a:hover,
.showpage a:hover,
.pagecurrent {
background: #e91e63;
text-decoration: none;
color: #fff;
}
#blog-pager .showpage,
#blog-pager,
.pagecurrent {
font-weight: bold;
color: #fff;
}
.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);
}
/* === END === */

Setelah itu letakan kode Javascript berikut tepat dibawah </body>



<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<script>/*<![CDATA[*/
var perPage=8; /* === JUMLAH POSTINGAN SETIAP HALAMAN == */
var numPages=4; /* ===  JUMLAH HALAMAN YANG INGIN DITAMPILKAN SEBELUM LAST === */
var prevText ='First'; /* ==== UNTUK LONCAT KE HALAMAN PERTAMA === */
var nextText ='Last'; /* === UNTUK LONCAT KE HALAMAN TERAKHIR === */
var urlactivepage=location.href;
var home_page="/";
/* PAGE BY NUMBER */
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;if(currentPageNo>1){if(currentPageNo==2){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){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>'}}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>

Jika sudah sobat tinggal save dan lihat hasilnya. Jika Belum berhasil juga perhatikan template yang agan pakai atau peletakan kodenya juga

Baiklah cukup sekian dari saya dari pemasangan Page Number di blog ini. Semoga informasi ini membantu sobat dan jangan lupa tinggalkan komentar jika ada pertanyaan seputar tutorial dari CODEPELAJAR.COM

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel