Cara Memasang Navigasi Halaman Dengan Angka Di Blogger

Sobat pernah melihat sebuah blog yang memiliki navigasi halaman dengan angka kurang lebih ibarat ini : 1, 2, 3... Next

Nah kali ini saya akan menuliskan tutorial bagaimana cara memasang navigasi halaman dengan nomor di blogger.

Widget navigasi halaman dengan angka ini tidak bersifat wajib, namun mampu membuat blog teman terlihat lebih keren :-)

Oke sobat, saya rasa tidak perlu panjang lebar ya, dan mari pribadi kita mulai.

Cara Membuat Nomor Navigasi Halaman Di Blogger Dengan Mudah

Di sini saya hanya akan menuliskan cara ter-mudah dan ter-cepat untuk membuat navigasi halaman dengan angka di blogger.

Berikut caranya :

1. Masuk ke dasbor blogger
2. Buka halaman Tata Letak
3. Klik Tambahkan Gadget
4. Pilih gadget HTML/JavaScript
5. Masukkan script navigasi halaman pada bab Konten
6. Simpan

Ya ... hanya itu saja yang harus teman lakukan untuk membuat nomor navigasi halaman di blogger.

Sangat mudah bukan....

Adapun script yang harus teman pasang pada bab Konten gadget HTML/JavaScript ialah ini

 <script type='text/javascript'> var home_page_url = location.href; var pageCount=8; 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> <style type="text/css"> .blog-pager,#blog-pager{text-align:center;font-size:100%} .showpageNum a,.showpage a {background:#00ACED;color:#FFF; margin-right:.3em;text-decoration:none;font-weight:bold;line-height:0;text-align:center;padding:.3em .5em;border-bottom:3px solid rgba(225,225,225,0.5)} .showpageNum a:hover,.showpage a:hover {background:#DD4B39; color:#fff; margin-right:.3em;text-decoration:none;font-weight:bold;line-height:0;text-align:center;border-bottom:3px solid rgba(225,225,225,0.5)} .showpageOf{margin:0 8px 0 0;font-family:'Coming Soon', cursive;text-decoration:none;} .showpagePoint {background:#DD4B39; color:#FFF; margin-right:.3em;font-weight:bold;text-decoration:none;line-height:0;text-align:center;padding:.3em .5em;border-bottom:3px solid rgba(225,225,225,0.5)} </style> 

Keterangan :

• var pageCount=8; → Ganti angka 8 dengan jumlah artikel yang akan ditampilkan pada halaman selanjutnya
• var displayPageNum=3; → Ganti angka 3 dengan jumlah angka yang ingin di tampilkan pada navigasi halaman, angka 3 berarti angka yang akan ditampilkan angka 1-4, bila diganti dengan 5 maka angka yang ditampilkan angka 1-6.
• var upPageWord ='Previous'; → Ganti goresan pena Previous bila menginginkannya, misalnya dengan goresan pena Sebelumnya.
• var downPageWord ='Next'; → Ganti goresan pena Next bila menginginkannya, misalnya dengan goresan pena Selanjutnya.
• Untuk modifikasi tampilan silakan edit isyarat css yang berada di antara isyarat <style type="text/css"> dan </style>

Nah itulah cara ter-mudah memasang navigasi halaman dengan angka di blogger beserta script yang digunakan.

Semoga bermanfaat.