Custom Blog Pager/Nextprev with Number, Unlimited Page Navigation for Blogger

bungfrangki Tutorial Blog Custom Blog Pager/Nextprev with Number, Unlimited Page Navigation for Blogger

Tips Blogger kali ini tentang cara membuat Blog pager (nextprev) yang ingin diubah menjadi bernomor, Unlimited Page Navigation for Blogger/Blogspot. Sehingga lebih mudah menavigasi halaman utama (homepage) Blog. Cara ini telah diterapkan pada template Risen Simple. Silahkan lihat langsung tampilannya dengan menekan tombol di bawah ini.

Sebetulnya banyak cara untuk membuat navigasi Blog Pager bernomor di blog. Hanya saja terdapat beberapa cara yang tidak berjalan sempurna pada device tertentu. Biasanya navigasi dengan nomor tersebut berfungsi bagus di device desktop, tetapi tidak berfungsi dengan baik pada tampilan mobile.

Tutorial sebelumnya: Cara Resize Featured Image/Thumbnail Tanpa JavaScript atau jQuery

Berikut ini adalah navigasi number page yang dapat dibilang fungsinya sudah lebih baik untuk semua device. Dilengkapi dengan tombol First dan Last, yang masing-masing berfungsi untuk menampilkan postingan paling terbaru dan paling lama saat pengguna sedang menjelajahi blog melalui homepage.

Bagi yang ingin mengganti Blog-pager di blognya atau baru menerapkannya, silahkan ikuti langkah-langkahnya berikut ini.

Cara membuat unlimited page navigation dengan nomor di Blogger/Blogspot

Masuk ke Blogger > Tema > Edit HTML. Cari kode </head> atau </head> lalu letakkan kode berikut di atas kode tadi.

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
/* Pagen Navigation with number */
#blog-pager {margin: 10px 0 20px 25px;clear:both !important;padding:0;font-size:11px;font-weight:bold;}
a.home-link, #blog-pager-newer-link a, #blog-pager-older-link a {background-color:#fff;border: 1px solid #ddd;padding:0px 12px;line-height:28px;color:#7d7d7d;border-radius: 3px;}
#blog-pager-newer-link a {float:left;display:block;}
#blog-pager-older-link a {float:right;display:block;}
a.home-link {display:inline-block;}
#blog-pager-older-link a:hover, #blog-pager-newer-link a:hover, a.home-link:hover {border: 1px solid #FF8100;}
.feed-links { clear: both;display:none;}
.displaypageNum a,.showpage a,.pagecurrent {padding: 8px 10px;margin-right: 3px;color: #7d7d7d;background-color: #fff;border: 1px solid #ddd;display: inline-block;border-radius: 3px;}
.displaypageNum a:hover,.showpage a:hover, .pagecurrent {border: 1px solid #FF8100;color: #FF8100}
.showpageOf {display:none !important;}
</b:if>
</b:if>

Catatan:
Jika di template blog Anda terdapat custom CSS tersendiri untuk blog-pager pada tampilan homepage, silahkan ganti kode CSS tersebut dengan kode di atas, untuk menghindari tampilan yang berantakan.

Letakkan kode berikut ini di atas kode </body> atau </body>

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
/*<![CDATA[*/
var perPage=5;
var numPages=7;
var firstText ='First';
var lastText ='Last';
var prevText ='« Previous';
var nextText ='Next »';
var urlactivepage=location.href;
var home_page="/";
/*]]>*/
</script>
<script 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+="Page "+currentPageNo+' of '+lastPageNo+"";var prevNumber=parseInt(currentPageNo)-1;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){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>

Temukan kode ini:

<b:include name='nextprev'/>

Kemudian ganti kode di atas dengan kode berikut:

<b:if cond='data:blog.pageType == "index"'>
<b:include name='nextprev'/>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<b:include name='nextprev'/>
<b:else/>
<b:if cond='data:blog.homepageUrl != data:blog.url'>
<b:include name='nextprev'/>
</b:if>
</b:if>
</b:if>

Terakhir, simpan Tema.

Jika tampilan terlihat berantakan, silahkan perhatikan kembali customasi CSS #blog-pager atau .blog-pager di template blog Anda, yang sudah terpasang sebelumnya. Pastikan CSS untuk #blog-pager atau .blog-pager pada tampilan homepage (halaman depan) hanya menggunakan kode CSS yang ada di tutorial ini.

Baca juga: Membuat Navigasi Halaman yang Benar dan Valid HTML5

Demikian tips tentang cara membut custom blog pager atau page navigation dengan nomor di Blogger/Blogspot. Semoga berhasil diterapkan pada template Blogspot Anda. Terima kasih!