Cara Menciptakan Page Number Navigasi Di Blogger Responsive

Page Number Navigasi ialah sebuah nomor halaman pada sebuah situs/blog yang terdapat pada halaman beranda dan label, namun tidak untuk halaman pencarian.

Dengan adanya Page Number Navigasi ini pastinya mempermudah pengunjung untuk melihat artikel yang ada pada situs/blog dengan mengklik halaman selanjutnya sebab terdapat nomor halaman. Dan juga dengan adanya Page Number Navigasi ini pengunjung sanggup meloncat dari nomor halaman 1 ke nomor halaman yang ia inginkan, misalnya halaman 20 dan apabila pengunjung menginginkan melihat artikel yang sudah paling usang dengan eksklusif ke halaman terakhir ataupun sanggup menentukan ingin ke halaman berapa saja yang ia inginkan, ini emang fungsi utama Page Number Navigasi ini.

Screenshoot :

Memasang page number navigasi pada situs/blog sebetulnya mudah, Anda hanya perlu memasukan sebuah isyarat pada template pada Edit HTML. Namun, untuk pemula mungkin cukup rumit untuk diawal-awalnya sebab tidak mengerti apa itu CSS dan JS, dan dengan berjalannya waktu Anda juga niscaya akan terbiasa dan andal mengenai HTML. Karena kita memang harus menguasai HTML sebagai blogger biar sanggup mengedit tampilan situs/blog yang kita kelola tersebut. Minimal anda mengerti perbedaan isyarat CSS, HTML dan juga Java Script. Jika anda sudah mengerti perbedaannya maka akan terasa gampang untuk mengikuti tutorial ini. Ok, eksklusif ke proses pembuatan.

Cara Membuat Page Number Navigasi di Blogger Responsive

Cara Pertama :

1. Buka Blogger - Kemudian Login.
2. Dashboard - Tema.
3. Edit HTML.

Proses Pembuatan :

1. Temukan kode ]]></b:skin> atau </style>
2. Copy & Paste isyarat berikut ini, dan letakkan diatas kode ]]></b:skin> atau </style>

/* NUMBERED PAGE NAVIGATION START*/ #blog-pager{clear:both;display:block;padding:10px 0 17px 0;margin:13px 0 13px 0;font-size:13px;text-align:center} #blog-pager a,#blog-pager span.pagecurrent{text-decoration:none;padding:7px 11px;background:#009EFF;border-radius:3px;color:#fff;transition:background 0.3s;margin:1px;display:inline-block} #blog-pager .lastpage,#blog-pager .firstpage,#blog-pager span.showpageOf{display:none} #blog-pager a:hover{background-color:#006caf;color:#fff;transition:.2s;text-decoration:none} /* NUMBERED PAGE NAVIGATION END*/

3. Jika sudah? Temukan lagi kode <b:includable id='nextprev'>

Fokus ke isyarat <b:includable id='nextprev'>...</b:includable>
Screenshoot :

4. Copy & Paste isyarat berikut ini, dan silakan anda ganti kode
<b:includable id='nextprev'>...</b:includable> menjadi isyarat dibawah ini.

<b:includable id='nextprev'> <b:if cond='data:blog.pageType != &quot;item&quot; and data:blog.pageType != &quot;static_page&quot;'>   <div class='blog-pager' id='blog-pager'>     <b:if cond='data:olderPageUrl'>       <span id='blog-pager-older-link'>       <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><i class='fa fa-angle-double-left'/> <data:olderPageTitle/></a>       </span>     </b:if>     <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>     <b:if cond='data:newerPageUrl'>       <span id='blog-pager-newer-link'>       <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/> <i class='fa fa-angle-double-right'/></a>       </span>     </b:if>     <b:if cond='data:mobileLinkUrl'>       <div class='blog-mobile-link'>         <a expr:href='data:mobileLinkUrl'><data:mobileLinkMsg/></a>       </div>     </b:if>   </div> </b:if>   <div class='clear'/> </b:includable>

5. Temukan isyarat </body>
6. Copy & Paste isyarat berikut ini, dan letakkan diatas isyarat </body>

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;item&quot;}'> <script type='text/javascript'>//<![CDATA[ // Page Navigation     var perPage=7;     var numPages=7;     var firstText ='First';     var lastText ='Last';     var prevText ='<span class="fa fa-arrow-circle-left"></span>';     var nextText ='<span class="fa fa-arrow-circle-right"></span>';     var urlactivepage=location.href;     var home_page="/"; 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>