Trik Membuat Navigasi Penomoran di halaman blog

Navigasi halaman sebenarnya udah disediakan oleh pihak blogger dalam template Framework (Default) mereka. Bentuknya berupa link Older Post, Newer Post dan Home. Tapi kalo kalian ingin mengganti tampilan sederhana tersebut dengan yang lebih elegan, navigasi dalam bentuk nomor ini bisa menjadi alternatif buat blog kalian.

• Login ke Account (dashboard) blog kalian.
• Masuk ke menu Rancangan (design), kemudian pilih Edit HTML.
• Cari kode ]]></b:skin> , dan ganti kode tersebut dengan kode berikut :

.showpageArea{padding:15px;background:#fff}
.showpageArea a{-moz-border-radius:5px;text-decoration:none}
.showpageNum a{font-weight:bold;color:#0080ff;padding:1px 8px; margin:0 4px;text-shadow:0px 2px 4px #666;border:1px solid #91bde6;background:#fff;}
.showpageNum a:hover{color:#fff;background:-moz-linear-gradient(top,#cee5fc,#0080ff);text-shadow:0px 2px 2px #00a;border:1px solid #369afc;}
.showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #369afc;background:-moz-linear-gradient(top,#cee5fc,#0080ff);-moz-border-radius:5px;}
.totalpages{margin:0 8px 0 0;color:#444;background:#fff;padding:1px 10px;border:1px solid #91bde6;-moz-border-radius:5px;}
.showpage a{padding:1px 8px; margin:0 2px;border:1px solid #91bde6;background:#fff;color:#0080ff;text-shadow:0px 2px 4px #999;padding-left:10px}
.showpage a:hover{background:-moz-linear-gradient(top,#cee5fc,#0080ff);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}
#showlastpage a{font-weight:bold}
]]></b:skin>

• Save template.

Berikutnya, kita akan memasukkan kode script pada bagian html template. Disini ada dua cara dalam membuatnya.
1. Menggunakan Inline Script.
--> Cari kode </body> pada kode template kalian, dan ganti kode tersebut dengan kode dibawah ini :

<div>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
document.getElementById("blog-pager").style.display="inline";var canvas="";function writescript(a){document.write('<script src="/feeds/posts/summary?alt=json-in-script&callback='+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}function writelabelscript(a){document.write('<script src="/feeds/posts/summary/-/'+label+"?alt=json-in-script&callback="+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}var url=location.href,total;var already=new Boolean(false);var timestamps=new Array();if(url.indexOf("/search/label/")!=-1){if(url.indexOf("?updated-max")!=-1){var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?updated-max"))}else{var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?&max"))}}if(url.indexOf("#Page")!=-1){var currentpagenum=parseInt(url.substring(url.indexOf("#Page")+5,url.length))}else{var currentpagenum=1}var startindex=(currentpagenum-displayPageNum-1>0)?((currentpagenum-displayPageNum-2)*pageCount+1):1;var total=(2*displayPageNum+1)*pageCount;if(url.indexOf("?q=")==-1&&url.indexOf(".html")==-1){if(url.indexOf("/search/label/")==-1){var islabel=new Boolean(false);do{writescript("buildtimestamps");startindex+=100}while(total>startindex)}else{var islabel=new Boolean(true);do{writelabelscript("buildtimestamps");startindex+=100}while(total>startindex)}document.write('<script type="text/javascript">printnav();<\/script>')}function buildtimestamps(b){if(already==false){total=parseInt(b.feed.openSearch$totalResults.$t)}init=pageCount-1;for(var a=init;post=b.feed.entry[a];a+=pageCount){timestamps[timestamps.length]=encodeURIComponent(post.published.$t.substring(0,19)+post.published.$t.substring(23,29))}}function printlast(b){var a=encodeURIComponent(b.feed.entry[0].published.$t.substring(0,19)+b.feed.entry[0].published.$t.substring(23,29));if(islabel==false){link="search?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}else{link="/search/label/"+label+"?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}document.getElementById("showlastpage").innerHTML='<a href="'+link+'">'+maxpages+"</a>"}function printnav(){maxpages=Math.ceil(total/pageCount);canvas=canvas+'<span class="totalpages">Page ['+maxpages+"]</span>";var a=((currentpagenum+displayPageNum)<maxpages)?currentpagenum+displayPageNum:maxpages;var c=((currentpagenum-displayPageNum)>1)?currentpagenum-displayPageNum:1;if(currentpagenum>1){if(islabel==false){if(currentpagenum==2){link="/"}else{link="search?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}else{if(currentpagenum==2){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9668</a></span>'}if(c!=1){if(islabel==true){canvas=canvas+'<span class="showpageNum"><a href="/search/label/'+label+"&max-results="+pageCount+'">1</a></span>'}else{canvas=canvas+'<span class="showpageNum"><a href="/">1</a></span>'}canvas=canvas+"..."}for(var b=c;b<=a;b++){if(islabel==true){if(b==1){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}else{if(b==1){link="/"}else{link="search?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}}if(a!=maxpages){canvas=canvas+' .. <span id="showlastpage" class="showpage"></span>';startindex=Math.floor((total-1)/pageCount)*pageCount;if(islabel==true){writelabelscript("printlast")}else{writescript("printlast")}}if(currentpagenum<maxpages){if(islabel==false){link="search?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9658</a></span>'}document.getElementById("blog-pager").innerHTML=canvas};
//]]>
</script>
</b:if>
</div>
</body>

--> Ubah angka 5 pada var pageCount sesuai dengan jumlah post yang tampil di halaman depan blog kalian.

var pageCount=5;
var displayPageNum=5;

--> Angka 5 pada var displayPageNum adalah jumlah page yang akan ditampilkan. Ganti sesuai yang kalian inginkan.
--> Save, dan lihat hasilnya.
2. Menggunakan script dari luar.
--> Buka Notepad , dan copy kode berikut ini kedalamnya :

//<![CDATA[
document.getElementById("blog-pager").style.display="inline";var canvas="";function writescript(a){document.write('<script src="/feeds/posts/summary?alt=json-in-script&callback='+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}function writelabelscript(a){document.write('<script src="/feeds/posts/summary/-/'+label+"?alt=json-in-script&callback="+a+"&start-index="+startindex+'&max-results=100" ><\/script>')}var url=location.href,total;var already=new Boolean(false);var timestamps=new Array();if(url.indexOf("/search/label/")!=-1){if(url.indexOf("?updated-max")!=-1){var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?updated-max"))}else{var label=url.substring(url.indexOf("/search/label/")+14,url.indexOf("?&max"))}}if(url.indexOf("#Page")!=-1){var currentpagenum=parseInt(url.substring(url.indexOf("#Page")+5,url.length))}else{var currentpagenum=1}var startindex=(currentpagenum-displayPageNum-1>0)?((currentpagenum-displayPageNum-2)*pageCount+1):1;var total=(2*displayPageNum+1)*pageCount;if(url.indexOf("?q=")==-1&&url.indexOf(".html")==-1){if(url.indexOf("/search/label/")==-1){var islabel=new Boolean(false);do{writescript("buildtimestamps");startindex+=100}while(total>startindex)}else{var islabel=new Boolean(true);do{writelabelscript("buildtimestamps");startindex+=100}while(total>startindex)}document.write('<script type="text/javascript">printnav();<\/script>')}function buildtimestamps(b){if(already==false){total=parseInt(b.feed.openSearch$totalResults.$t)}init=pageCount-1;for(var a=init;post=b.feed.entry[a];a+=pageCount){timestamps[timestamps.length]=encodeURIComponent(post.published.$t.substring(0,19)+post.published.$t.substring(23,29))}}function printlast(b){var a=encodeURIComponent(b.feed.entry[0].published.$t.substring(0,19)+b.feed.entry[0].published.$t.substring(23,29));if(islabel==false){link="search?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}else{link="/search/label/"+label+"?updated-max="+a+"&max-results="+pageCount+"#Page"+maxpages}document.getElementById("showlastpage").innerHTML='<a href="'+link+'">'+maxpages+"</a>"}function printnav(){maxpages=Math.ceil(total/pageCount);canvas=canvas+'<span class="totalpages">Page ['+maxpages+"]</span>";var a=((currentpagenum+displayPageNum)<maxpages)?currentpagenum+displayPageNum:maxpages;var c=((currentpagenum-displayPageNum)>1)?currentpagenum-displayPageNum:1;if(currentpagenum>1){if(islabel==false){if(currentpagenum==2){link="/"}else{link="search?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}else{if(currentpagenum==2){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c-2:currentpagenum-c-1]+"&max-results="+pageCount+"#Page"+(currentpagenum-1)}}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9668</a></span>'}if(c!=1){if(islabel==true){canvas=canvas+'<span class="showpageNum"><a href="/search/label/'+label+"&max-results="+pageCount+'">1</a></span>'}else{canvas=canvas+'<span class="showpageNum"><a href="/">1</a></span>'}canvas=canvas+"..."}for(var b=c;b<=a;b++){if(islabel==true){if(b==1){link="/search/label/"+label+"?&max-results="+pageCount}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}else{if(b==1){link="/"}else{link="search?updated-max="+timestamps[(c==1)?b-c-1:b-c]+"&max-results="+pageCount+"#Page"+b}if(b==currentpagenum){canvas=canvas+'<span class="showpagePoint">'+b+"</span>"}else{canvas=canvas+'<span class="showpageNum"><a href="'+link+'">'+b+"</a></span>"}}}if(a!=maxpages){canvas=canvas+' .. <span id="showlastpage" class="showpage"></span>';startindex=Math.floor((total-1)/pageCount)*pageCount;if(islabel==true){writelabelscript("printlast")}else{writescript("printlast")}}if(currentpagenum<maxpages){if(islabel==false){link="search?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}else{link="/search/label/"+label+"?updated-max="+timestamps[(c==1)?currentpagenum-c:currentpagenum+1-c]+"&max-results="+pageCount+"#Page"+(currentpagenum+1)}canvas=canvas+' <span class="showpage"><a href="'+link+'">&#9658</a></span>'}document.getElementById("blog-pager").innerHTML=canvas};
//]]>

--> Simpan kode tersebut dengan nama navigasihal.js (Rubah pilihan Save as type menjadi All Files)

--> Upload script navigasihal.js ke situs hosting. Kalian bisa menggunakan layanan hosting gratis dari Ripway.com
--> Kalau udah di upload, sekarang kita tinggal memasukkan script pemanggilannya pada kode template kita.
Di menu Edit HTML, cari kode </body> dan ganti kode tersebut dengan kode berikut ini :

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script type='text/javascript' src='navigasihal.js'></script>

Nb: ganti teks berwarna hijau dengan URL link file di hostingan kalian.

--> Save, dan lihat hasilnya.
Semoga bermanfaat.

Related Post