Custom Page Navigation With Number

Custom Nextprev/Blog Pager With Number Unlimited Page Navigation for Blogger. Dipostingan kali ini akan membahas mengenai Blog Pager atau Next Previous Navigation yang akan ditampilkan berupa Number untuk Platform Blogspot. Ada banyak undangan untuk mengembangkan Tutorial Pemasangannya menyerupai Page Number yang dipakai pada template dibalikseo ini. 

Seperti yang kita ketahui Page Number ini yaitu salah satu menu navigasi juga yang banyak dipasang di blog khususnya blogspot, fungsi dari Page Number ini untuk memudahkan pengunjung biar dapat melihat seluruh isi postingan yang ada dalam Blog yang kita kelola sehingga diperlukan pengunjung dapat menemukan artikel yang sedang dibutuhkan dan dapat menunjukkan manfaat.

Langsung saja bagi teman yang mau mencoba memasangnya mari kita simak pembahasannya Custom Nextprev/Blog Pager With Number Unlimited Page Navigation for Blogger.

Langkah Pertama

Silahkan teman salin arahan dibawah ini lalu letakkan di atas arahan </head> atau &lt;/head&gt;&lt;!--<head/>--&gt

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> /* 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> 

Jika sebelumnya di template teman sudah pernah terpasang arahan CSS untuk Blog Pager yang ditampilkan pada Home Page silahkan ganti dengan arahan diatas.



Langkah Ke Dua
Silahkan salin arahan dibawah ini lalu letakkan diatas arahan </body>.

<b:if cond='data:blog.pageType != &quot;item&quot;'> <b:if cond='data:blog.pageType != &quot;static_page&quot;'> <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+="<span class='showpageOf'>Page "+currentPageNo+' of '+lastPageNo+"</span>";var prevNumber=parseInt(currentPageNo)-1;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){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=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> 

Langkah Ke Tiga
Silahkan cari arahan dibawah ini untuk lebih memudahkan pencarian silahkan gunakan CTRL-F.

<b:include name='nextprev'/> 

Setelah ketemu dengan arahan yang dimaksud diatas silahkan ganti dengan arahan dibawah ini

<b:if cond='data:blog.pageType == &quot;index&quot;'>         <b:include name='nextprev'/>     <b:else/>     <b:if cond='data:blog.pageType == &quot;archive&quot;'>         <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> 

Perhatikan langkah penerapan kodenya ada baiknya sebelum memulainya backup terlebih dahulu templatenya untuk antisipasi jikalau terjadi error, dan silahkan di SAVE. Selesai selamat mencoba semoga bermanfaat.