Cara Membuat Paginator Di Blogspot

Banyak sekali bentuk desain paginator untuk blogspot. tapi fungsinya tetap sama, yaitu untuk memudahkan pengunjung untuk membuka postingan yang lebih baru/lama langsung kehalaman tertentu.


Berikut adalah cara membuat paginator di blogspot yang tutorial aslinya berasal dari http://www.abu-farhan.com/2009/12/beautiful-new-page-navi-for-blogger/. akan tetapi pada paginator berikut telah sedikit ada perubahan (link pembuatnya dalam script telah dihilangkan).

- Login ke Blogger dengan akun anda.
- Pergi ke "Rancangan >> Edit HTML".
- Copy paste code CSS berikut dan letakkan diatas ]]></b:skin> :

.paginator {
font-family: Trebuchet MS;
margin-top:0px;
font-size:1.1em;
}
.paginator table {
border-collapse:collapse;
table-layout:fixed;
width:100%;
}
.paginator table td {
padding:0;
white-space:nowrap;
text-align:center;
}
.paginator span {
display:block;
padding:3px 0;
color:#fff;
}
.paginator span strong,
.paginator span a {
padding:2px 6px;
}
.paginator span strong {
background:#333;
font-style:normal;
font-weight:bold;
}
.paginator .scroll_bar {
width:100%; height:20px;
position:relative;
margin-top:10px;
}
.paginator .scroll_trough {
width:100%; height:3px;
background:#E8E8E8;
overflow:hidden;
}
.paginator .scroll_thumb {
position:absolute;
z-index:2;
width:0; height:3px;
top:0; left:0;
font-size:1px;
background:#363636;
}
.paginator .scroll_knob {
position:absolute;
top:-5px; left:50%;
margin-left:-10px;
width:20px; height:20px;
overflow:hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEifUH63_S3pBUqcEcuEYIoiSx6DI8_SRhvzol68AdJb6grA5cCeNNRsx3M1m-7pJXdKo9hIRFNjaRzmDoNWsMTCqxTINh4KFMWM3pUTUR87JWjQ8HzsrzKeMPnx2D_4RoTXSf9pepO8dQfY/s1600/Knob.png) no-repeat 50% 50%;
cursor:pointer; cursor:hand;
}
.paginator .current_page_mark {
position:absolute;
z-index:1;
top:0; left:0;
width:0; height:3px;
overflow:hidden;
background:#333;
}
.fullsize .scroll_thumb {
display:none;
}
.paginator_pages {
width:600px;
text-align:right;
font-size:0.8em;
color:#808080;
margin-top:-10px;
}

- Kemudian copy paste script berikut dan letakkan diatas </body> :

<script src='http://hapiajavascript.googlecode.com/files/paginator.js' type='text/javascript'/>
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=7;
var numshowpage=10;
</script>
<script type='text/javascript'>
//<![CDATA[
/* Widgte by www.abu-farhan.com
copyright by Abu Farhan
Dont edit without permission from the Copyright owner
*/
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\b'+e(c)+'\b','g'),k[c]);return p}('2 r;2 s;2 m;2 f;Q();n R(S){T=U(S/g)+1;2 I=h.1g("1h-1i");J='<K 1j="1k" 1l="V"></K><K><a u="1m://1n.1o-W.1p" 1q="1r-1s: 1t; 1u: 1v;" 1w="1x">1y 1z 1A-W</a>';6(I){I.1B=J}1C=1D 1E('V',T,1F,m,"")}n L(v){2 w=v.w;2 X=U(w.1G$1H.$t,10);R(X)}n Q(){2 4=9;6(4.3("/i/j/")!=-1){6(4.3("?x-5")!=-1){f=4.o(4.3("/i/j/")+14,4.3("?x-5"))}k{f=4.o(4.3("/i/j/")+14,4.3("?&5"))}}6(4.3("?q=")==-1&&4.3(".J")==-1){6(4.3("/i/j/")==-1){s="Y";6(9.3("#p=")!=-1){m=9.o(9.3("#p=")+8,9.Z)}k{m=1}h.11("<7 y=\""+b+"z/A/B?5-c=1&C=D-E-7&F=L\"><\/7>")}k{s="j";6(4.3("&5-c=")==-1){g=1I}6(9.3("#p=")!=-1){m=9.o(9.3("#p=")+8,9.Z)}k{m=1}h.11('<7 y="'+b+'z/A/B/-/'+f+'?C=D-E-7&F=L&5-c=1" ><\/7>')}}}n 1J(d){6(d!=1){G=(d-1)*g;r=d;2 H=h.12('13')[0];2 e=h.15('7');e.16='17/18';e.1a("y",b+"z/A/B?1b-1c="+G+"&5-c=1&C=D-E-7&F=M");H.1d(e)}k{l=b;N.u=l}}n 1K(d){6(d!=1){G=(d-1)*g;r=d;2 H=h.12('13')[0];2 e=h.15('7');e.16='17/18';e.1a("y",b+"z/A/B/-/"+f+"?1b-1c="+G+"&5-c=1&C=D-E-7&F=M");H.1d(e)}k{l=b+"i/j/"+f+"?&5-c="+g;N.u=l}}n M(v){O=v.w.1L[0];2 1e=O.1f.$t.o(0,19)+O.1f.$t.o(1M,1N);2 P=1O(1e);6(s=="Y"){2 l=b+"i?x-5="+P+"&5-c="+g+"#p="+r}k{2 l=b+"i/j/"+f+"?x-5="+P+"&5-c="+g+"#p="+r}N.u=l}',62,113,'||var|indexOf|thisUrl|max|if|script||urlactivepage||home_page|results|numberpage|newInclude|lblname1|postperpage|document|search|label|else|alamat|nomerhal|function|substring|PageNo||nopage|jenis||href|root|feed|updated|src|feeds|posts|summary|alt|json|in|callback|jsonstart|nBody|blogPager|html|div|hitungtotaldata|finddatepost|location|post|timestamp|halamanblogger|loophalaman|banyakdata|maksimal|parseInt|paginator1|farhan|totaldata|page|length||write|getElementsByTagName|head||createElement|type|text|javascript||setAttribute|start|index|appendChild|timestamp1|published|getElementById|blog|pager|class|paginator|id|http|www|abu|com|style|font|size|7pt|display|none|target|_blank|Widget|by|Abu|innerHTML|pag1|new|Paginator|numshowpage|openSearch|totalResults|20|redirectpage|redirectlabel|entry|23|29|encodeURIComponent'.split('|'),0,{}))
//]]>
</script>

- Simpan template anda.

# Keterangan :

- var postperpage=7; adalah untuk menentukan jumlah postingan yang akan ditampilkan pada halaman yang dikunjungi.
- var numshowpage=10; adalah untuk menentukan jumlah nomor halaman paginator yang akan ditampilkan pada satu halaman.

Selamat mencoba dan happy blogging.