Cara membuat pagination nomor, pengganti navigasi next prev di homepage blog

Pagination berbentuk deretan nomor yang letaknya berada di bagian bawah homepage blog berfungsi untuk memudahkan pengunjung dalam menjelajahi seluruh post di blog karena satu nomor mewakili beberapa daftar post yang jumlahnya telah kamu tentukan.

Hal ini membuat pengunjung bisa dengan leluasa memilih nomor mana yang dikehendaki untuk menuju ke post yang diinginkan, dan ini pun secara otomatis akan menggantikan peran navigasi bawaan blog.

Widget Navigasi Pagination

Dalam template bawaan Blogger, tidak terdapat pagination berbentuk nomor, sebagai gantinya hanya ada navigasi berupa link berbentuk next dan prev ataupun 'post lama' dan 'post baru' untuk template sederhana atau template lama, dan navigasi yang otomatis memuat postingan yang disebut sebagai infinite scrolling untuk template modern atau template baru.

Kelebihan menggunakan pagination nomor

Blogizty akan jelaskan dulu sebelumnya mengenai perbandingan antara pagination nomor dengan navigasi bawaan Blogger.

• Dibanding navigasi Next-Prev

Cara kerja navigasi next-prev, sifatnya statis yang artinya apabila pengunjung ingin mencari postingan lama, maka mereka harus terus mengklik link 'post lama' atau 'post sebelumnya' hingga dia sampai ke postingan yang diinginkan.

• Dibanding navigasi infinite scrolling

Sedangkan infinite scrolling, akan secara otomatis memuat posting sebelumnya atau postingan lainnya ketika pengunjung menggeser halaman ke atas hingga tampilan bawah blog sudah mencapai batas dengan tanpa mengklik link apapun.

Memang, infinite scrolling ini lebih terlihat stylish dibandingkan navigasi lainnya. Akan tetapi, kekurangannya yaitu membebani kecepatan loading blog, apalagi jika jaringan internet yang digunakan pengunjung terlalu lambat, maka pemuatan script akan terhambat atau bahkan terhenti sehingga menyebabkan postingan lainnya tidak akan tampil.

Script navigasi pagination Blogger

Okay, di bawah ini terdapat script pagination yang terdiri dari CSS dan Javascript yang boleh kamu copy dan pastekan ke template blog kamu.

Script CSS

Salin kode CSS di bawah ini untuk kemudian tempelkan ke bagian blok CSS di dalam template blog kamu, atau lebih mudahnya cari kode </style> kemudian tempelkan kode CSS ini sebelum atau di atas kode tersebut.

Harap diingat, apabila kamu menggunakan template pihak ketiga atau hasil dari membeli, maka perhatikan apakah sebelum blok CSS terdapat tag kondisional seperti <b:if cond> atau tidak, jika ada maka jangan ditempatkan di situ, kecuali kamu paham.

Sebagai gantinya, tempatkan kode CSS ini di blok CSS bagian atas yang tidak memiliki tag kondisional.

#blog-pager{clear:both;margin:30px auto;text-align:center;padding:7px;}
.blog-pager {background:none;}
.displaypageNum a,.showpage a,.pagecurrent{padding:3px 7px;margin-right:5px;background:#E9E9E9;color:#888;border:1px solid #E9E9E9;}
.displaypageNum a:hover,.showpage a:hover,.pagecurrent{background:#CECECE;text-decoration:none;color:#000;}
#blog-pager .showpage, #blog-pager .pagecurrent{font-weight:bold;color:#888;}
#blog-pager .pages{border:none;}

Script Javascript

Kode javascript di bawah ini boleh kamu salin dan tempelkan ke dalam template blog kamu sebelum atau di atas tag penutup Body seperti ini </body> atau jika tidak ada, maka bentuknya mungkin seperti ini &lt;!--</body>--&gt;&lt;/body&gt;

<b:if cond='data:blog.pageType not in {&quot;static_page&quot;,&quot;item&quot;}'>
<script>
  /*<![CDATA[*/
    var perPage=8;
    var numPages=10;
    var firstText ='First';
    var lastText ='Last';
    var prevText ='«';
    var nextText ='»';
    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;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>

Simpan pengaturan dan lihat hasilnya.

Mengatur widget navigasi pagination

• Untuk menentukan banyaknya jumlah post per nomor atau per halaman, dan banyaknya nomor yang ditampilkan dalam satu sesi, maka kamu boleh mengubah nilai pada variabel javascript yang berada pada bagian ini :

var perPage=8;

Adalah banyaknya jumlah post yang ditampilkan per nomor, ubah hanya nomornya saja.

Supaya widget bekerja dengan baik, maka kamu juga harus mengaturnya di pengaturan gadget Tata Letak » Main .

var numPages=10;

Adalah banyaknya jumlah nomor yang ditampilkan dalam satu sesi, ubah hanya nomornya saja.

• Sedangkan apabila kamu ingin mengubah tulisan pada pagination, kamu boleh mengganti nilai pada variabel javascript berikut ini :

var firstText ='First';

Ubah sesuai keinginan, misalnya 'Awal', 'Pertama', ataupun lainnya.

var lastText ='Last';

Ubah sesuai keinginan, misalnya 'Akhir', 'Terakhir', ataupun lainnya.

var prevText ='«';

Boleh diganti menjadi teks, misalnya 'Prev', 'Sebelumnya', dan sebagainya.

var nextText ='»';

Boleh diganti menjadi teks, misalnya 'Next', 'Selanjutnya', dan sebagainya.

Semoga berhasil.

©Blogizty