Cara Membuat Page Number Navigasi di Blogger Responsive

Page Number Navigasi adalah 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 karena terdapat nomor halaman. Dan juga dengan adanya Page Number Navigasi ini pengunjung bisa meloncat dari nomor halaman 1 ke nomor halaman yang dia inginkan, contohnya halaman 20 dan apabila pengunjung menginginkan melihat artikel yang sudah paling lama dengan langsung ke halaman terakhir ataupun bisa memilih ingin ke halaman berapa saja yang dia inginkan, ini emang fungsi utama Page Number Navigasi ini.

Screenshoot :

Memasang page number navigasi pada situs/blog sebenarnya mudah, Anda hanya perlu memasukan sebuah kode pada template pada Edit HTML. Namun, untuk pemula mungkin cukup rumit untuk diawal-awalnya karena tidak mengerti apa itu CSS dan JS, dan dengan berjalannya waktu Anda juga pasti akan terbiasa dan jago mengenai HTML. Karena kita memang harus menguasai HTML sebagai blogger supaya dapat mengedit tampilan situs/blog yang kita kelola tersebut. Minimal anda mengerti perbedaan kode CSS, HTML dan juga Java Script. Jika anda sudah mengerti perbedaannya maka akan terasa mudah untuk mengikuti tutorial ini. Ok, langsung 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 kode 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 kode <b:includable id='nextprev'>...</b:includable>
Screenshoot :

4. Copy & Paste kode berikut ini, dan silakan anda ganti kode
<b:includable id='nextprev'>...</b:includable> menjadi kode 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 kode </body>
6. Copy & Paste kode berikut ini, dan letakkan diatas kode </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>
Keterangan :

var perPage=7;
var numPages=7;

Silakan anda ganti tulisan yang berwarnah merah untuk memaksimalkan berapa artikel yang ingin ditampilkan pada setiap halaman.

Demikian, bila anda mengalami kesalahan atau ada yang ingin dipertanyakan silakan jangan sungkan untuk berkomentar dibawah ini. Semoga Bermanfaat! Thanks for Reading : Cara Membuat Page Number Navigasi di Blogger Responsive

Incomming Search :

Cara Membuat Page Number Navigasi di Blogger ResponsiveCara Membuat Pagination (Navigasi Page Number) di BlogCara Mudah Memasang Navigasi Page Number Pada BlogCara Memasang Page Number Navigasi Pada BlogCara Mudah Memasang Navigasi Page Number pada BlogCara Mengatasi Numbered Page Navigation yang ErorCara Memasang Page Number Navigation/Navigasi Halaman KerenCara Memasang Navigasi Nomor Halaman Di BlogspotCara Cepat Membuat Page Number Navigasi, Cara Membuat Halaman Bernomor di Blogger, Cara Membuat Halaman Bernomor, Cara Membuat Halaman Berangka Pada Blogger

Related Post

3 Responses to "Cara Membuat Page Number Navigasi di Blogger Responsive"

  1. Terima kasih artikel ini sangat membantu, saya berdonasi untuk artikel ini dengan mengklik semua iklan , terima kasih

    ReplyDelete
  2. Apakah cara ini berfungsi juga mas untuk versi mobile???..

    ReplyDelete
  3. Makasih Mas
    Punya saya jadi bisa digunakan lagi

    ReplyDelete