Pasang Page Navigation 1234 di Blogger

Page Navigation merupakan suatu bentuk navigasi yang berguna untuk memudahkan pengunjung mengeksplorasi halaman-halaman posting yang ada di blog kita. Bentuknya berupa angka-angka berurutan | 1 | 2 | 3 | 4 | dan seterusnya. Salah satu tampilannya adalah seperti yang ditunjukkan gambar di bawah ini.

Page Navigation

Widget yang satu ini dapat dikatakan sebagai pengganti dari fungsi "Posting Lama" atau "Older Posts" dan "Posting Lebih Baru" atau "Newer Posts". Di widget ini kita dapat mengatur jumlah posting yang ingin ditampilkan pada halaman result "Older Posts" (var pageCount=1;). Halaman result  "Older Posts" ini muncul saat mengeklik angka-angka halaman tadi.

Saya sendiri pernah memasang Page Navigation di blog ini. Namun, saya merasa widget ini membuat waktu loading blog menjadi bertambah. Sidebar kanan blog baru muncul setelah menunggu pengolahan data Page navigation selesai. Mungkin hal ini tidak akan terjadi bila koneksi internet yang saya gunakan termasuk kencang atau tidak lelet.

Bagi Anda yang ingin mencoba memasang gadget Page Navigation ini di Blogger dapat mengikuti langkah-langkah yang saya tulis di bawah ini. Skrip dari widget ini saya dapat dari Aaroz Blog.

1. Masuk ke akun Blogger Anda.

2. Setelah berada di Dasbor, klik segitiga hitam (Opsi lainnya) lalu pilih "Template".

3. Selanjutnya pilih "Edit HTML" diikuti klik tombol "Lanjutkan".

4. Cari kode ]]></b:skin> kemudian letakkan kode berikut di atas kode tadi.

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
border:1px solid #CCCCCC;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageNum a:hover {
background-color:#CCCCCC;
border:1px solid #CCCCCC;
}
.showpagePoint {
-moz-background-clip:border;
-moz-background-inline-policy:continuous;
-moz-background-origin:padding;
background:#CCCCCC none repeat scroll 0 0;
border:1px solid #CCCCCC;
color:#333333;
margin:0 3px;
padding:3px 7px;
text-decoration:none;
}
.showpageOf {
margin:0 3px 0 0;
padding:3px 7px;
text-decoration:none;
}
.showpage a {
border:1px solid #CCCCCC;
padding:3px 7px;
text-decoration:none;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link, .showpage a:link {
color:#333333;
text-decoration:none;
}

5. Klik tombol "Simpan template".

6. Langkah selanjutnya masuk ke menu "Tata Letak".

7. Klik Tambah Gadget >> HTML/Javascript.

8. Masukkan kode di bawah ini pada kolom "Konten".

<script type='text/javascript'>

var home_page_url = location.href;

var pageCount=1;

var displayPageNum=3;

var upPageWord ='Previous';

var downPageWord ='Next';

function showpageCount(json) {

var thisUrl = home_page_url;

var htmlMap = new Array();

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= '';

var upPageHtml ='';

var downPageHtml ='';

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);

timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

  thisNum = postNum;

}

if(title!='') postNum++;

htmlMap[htmlMap.length] = '/search?updated-max='+timestamp+'&max-results='+pageCount;

}

}

itemCount++;

}

for(var p =0;p< htmlMap.length;p++){

if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){

 upPageHtml = '<span class="showpage"><a href="/">'+ upPageWord +'</a></span>';

}else{

 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';

}

fFlag++;

}

if(p==(thisNum-1)){

html += '<span class="showpagePoint">'+thisNum+'</span>';

}else{

if(p==0){

  html += '<span class="showpageNum"><a href="/">1</a></span>';

}else{

 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';

}

}

if(eFlag ==0 && p == thisNum){

downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';

eFlag++;

}

}

}

if(thisNum>1){

html = ''+upPageHtml+' '+html +' ';

}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){

html += downPageHtml;

}

if(postNum==1) postNum++;

html += '</div>';

var pageArea = document.getElementsByName("pageArea");

var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){

html ='';

}

for(var p =0;p< pageArea.length;p++){

pageArea[p].innerHTML = html;

}

if(pageArea&&pageArea.length>0){

html ='';

}

if(blogPager){

blogPager.innerHTML = html;

}

}

function showpageCount2(json) {

var thisUrl = home_page_url;

var htmlMap = new Array();

var isLablePage = thisUrl.indexOf("/search/label/")!=-1;

var thisLable = isLablePage ? thisUrl.substr(thisUrl.indexOf("/search/label/")+14,thisUrl.length) : "";

thisLable = thisLable.indexOf("?")!=-1 ? thisLable.substr(0,thisLable.indexOf("?")) : thisLable;

var thisNum = 1;

var postNum=1;

var itemCount = 0;

var fFlag = 0;

var eFlag = 0;

var html= '';

var upPageHtml ='';

var downPageHtml ='';

var labelHtml = '<span class="showpageNum"><a href="/search/label/'+thisLable+'?&max-results='+pageCount+'">';

var thisUrl = home_page_url;

for(var i=0, post; post = json.feed.entry[i]; i++) {

var timestamp1 = post.published.$t.substring(0,19)+post.published.$t.substring(23,29);

timestamp = encodeURIComponent(timestamp1);

var title = post.title.$t;

if(title!=''){

if(itemCount==0 || (itemCount % pageCount ==(pageCount-1))){

if(thisUrl.indexOf(timestamp)!=-1 ){

 thisNum = postNum;

}

if(title!='') postNum++;

htmlMap[htmlMap.length] = '/search/label/'+thisLable+'?updated-max='+timestamp+'&max-results='+pageCount;

}

}

itemCount++;

}

for(var p =0;p< htmlMap.length;p++){

if(p>=(thisNum-displayPageNum-1) && p<(thisNum+displayPageNum)){

if(fFlag ==0 && p == thisNum-2){

if(thisNum==2){

 upPageHtml = labelHtml + upPageWord +'</a></span>';

}else{

 upPageHtml = '<span class="showpage"><a href="'+htmlMap[p]+'">'+ upPageWord +'</a></span>';

}

fFlag++;

}

if(p==(thisNum-1)){

html += '<span class="showpagePoint">'+thisNum+'</span>';

}else{

if(p==0){

 html = labelHtml+'1</a></span>';

}else{

 html += '<span class="showpageNum"><a href="'+htmlMap[p]+'">'+ (p+1) +'</a></span>';

}

}

if(eFlag ==0 && p == thisNum){

downPageHtml = '<span class="showpage"> <a href="'+htmlMap[p]+'">'+ downPageWord +'</a></span>';

eFlag++;

}

}

}

if(thisNum>1){

if(!isLablePage){

html = ''+upPageHtml+' '+html +' ';

}else{

html = ''+upPageHtml+' '+html +' ';

}

}

html = '<div class="showpageArea"><span  class="showpageOf"> Pages ('+(postNum-1)+')</span>'+html;

if(thisNum<(postNum-1)){

html += downPageHtml;

}

if(postNum==1) postNum++;

html += '</div>';

var pageArea = document.getElementsByName("pageArea");

var blogPager = document.getElementById("blog-pager");

if(postNum <= 2){

html ='';

}

for(var p =0;p< pageArea.length;p++){

pageArea[p].innerHTML = html;

}

if(pageArea&&pageArea.length>0){

html ='';

}

if(blogPager){

blogPager.innerHTML = html;

}

}

</script>

<script type='text/javascript'>

var thisUrl = home_page_url;

if (thisUrl.indexOf("/search/label/")!=-1){

if (thisUrl.indexOf("?updated-max")!=-1){

var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"));

}else{

var lblname1 = thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"));

}

}

var home_page = "/";

if (thisUrl.indexOf("?q=")==-1){

if (thisUrl.indexOf("/search/label/")==-1){

document.write('<script src="'+home_page+'feeds/posts/summary?alt=json-in-script&callback=showpageCount&max-results=99999" ><\/script>')

}else{document.write('<script src="'+home_page+'feeds/posts/full/-/'+lblname1+'?alt=json-in-script&callback=showpageCount2&max-results=99999" ><\/script>')

}

}

</script>

9. Klik tombol "Simpan".

10. Pindahkan elemen ini ke bawah "Posting Blog".

11. Klik tombol "Simpan setelan".