Cara Membuat Style Page Navigation di Blog

Page Navigation adalah bagian dari template yang berfungsi untuk berpindah page (halaman) atau nomor urut page di blog atau website. biasanya pada template default blog yaitu seperti gambar di bawah.

Untuk mengubah tampilan Page Navigation ke yang kita inginkan sebagaimana gambar yang saya tunjukan dibawah itu mudah dan gampang. Saya juga menyajikan beberapa style page navigation lain yang mungkin Anda suka.

Adapun caranya yaitu:

• Pergi ke "Rancangan"/"Edit HTML" di Dasbor blog Anda (dengan sebelumnya jangan lupa login)
• Back up Template yang ada sebelum membuat perubahan!
• Pastikan untuk menceklis "Expand Template Widget" kotak.
• Cari tag ]]></b:skin>
• Tambahkan kode berikut sebelum atau di atas tag ]]></b:skin>

/* Fungsi page navigation dx
--------------------------------------- */
.blog-pager,#blog-pager {padding:10px 10px;border:1px solid #ddd;}
.showpageArea{float:left;background:#111;}
.showpageOf{margin:0 1px 0 0;padding:3px 7px;color:#333333;border:1px solid #bbb;}
.showpageArea a {text-decoration:underline;}
.showpageNum a {border:1px solid #bbb;color:#000;font-weight:bold;margin-bottom:0;margin-left:1px;margin-right:1px;
padding:3px 7px;text-decoration:none;}
.showpageNum a:hover {
background:url("http://2.bp.blogspot.com/-1YOSc8ngeRs/ToP2YFkdMaI/AAAAAAAAA8A/gRS1h6wkNXI/s000/glass.png") repeat-x scroll 0 100% rgba(0, 0, 0, 0.07);border:1px solid #bbb;color:#000000;font-weight:bold;}
.showpagePoint {-moz-background-inline-policy:continuous;
background:url("http://2.bp.blogspot.com/-1YOSc8ngeRs/ToP2YFkdMaI/AAAAAAAAA8A/gRS1h6wkNXI/s000/glass.png") repeat-x scroll 0 100% rgba(0, 0, 0, 0.07);border:1px solid #bbb;color:#000000;
font-weight:bold;margin:1px 1px;padding:3px 7px;text-decoration:none;}
.showpageOf {color:#000000;font-weight:bold;margin:0 1px 0 0;padding:3px 7px;text-decoration:none;}
.showpage a {border:1px solid #bbb;font-weight:bold;padding:3px 7px;text-decoration:none;}
.showpage a:hover {text-decoration:none;}
.showpageNum a:link, .showpage a:link {color:#000000;font-weight:bold;text-decoration:none;}

• Setelah itu tambahkan pula kode HTML di bawah sebelum atau di atas tag </body>

<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=9;
var numshowpage=9;
var upPageWord =&#39;Kembali&#39;;
var downPageWord =&#39;Selanjutnya&#39;;
</script>
<script type='text/javascript'>
//<![CDATA[
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}('5 G;5 i;5 b;5 n;1f();x 1g(15){5 6=\'\';H=I(K/2);3(H==K-H){K=H*2+1}J=b-H;3(J<1)J=1;o=I(15/j)+1;3(o-1==15/j)o=o-1;L=J+K-1;3(L>o)L=o;6+="<4 e=\'1y\'>1z "+b+\' 1A \'+o+"</4>";5 16=I(b)-1;3(b>1){3(b==2){3(i=="w"){6+=\'<4 e="1B"><a f="\'+y+\'">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">\'+M+\'</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+16+\');A B">\'+M+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+16+\');A B">\'+M+\'</a></4>\'}}}1h(5 g=J;g<=L;g++){3(b==g){6+=\'<4 e="1C">\'+g+\'</4>\'}c 3(g==1){3(i=="w"){6+=\'<4 e="k"><a f="\'+y+\'">1</a></4>\'}c{6+=\'<4 e="k"><a f="/r/s/\'+n+\'?&7-l=\'+j+\'">1</a></4>\'}}c{3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+g+\');A B">\'+g+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+g+\');A B">\'+g+\'</a></4>\'}}}5 17=I(b)+1;3(b<o){3(i=="w"){6+=\'<4 e="k"><a f="#" z="N(\'+17+\');A B">\'+1i+\'</a></4>\'}c{6+=\'<4 e="k"><a f="#" z="O(\'+17+\');A B">\'+1i+\'</a></4>\'}}5 C=u.1D("C");5 18=u.1E("1F-1G");1h(5 p=0;p<C.P;p++){C[p].1j=6}3(C&&C.P>0){6=\'\'}3(18){18.1j=6}}x 1a(Q){5 R=Q.R;5 1k=I(R.1H$1I.$t,10);1g(1k)}x 1f(){5 d=m;3(d.9("/r/s/")!=-1){3(d.9("?S-7")!=-1){n=d.D(d.9("/r/s/")+14,d.9("?S-7"))}c{n=d.D(d.9("/r/s/")+14,d.9("?&7"))}}3(d.9("?q=")==-1&&d.9(".6")==-1){3(d.9("/r/s/")==-1){i="w";3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l("<h T=\\""+y+"U/V/W?7-l=1&X=Y-Z-h&11=1a\\"><\\/h>")}c{i="s";3(d.9("&7-l=")==-1){j=1J}3(m.9("#E=")!=-1){b=m.D(m.9("#E=")+8,m.P)}c{b=1}u.1l(\'<h T="\'+y+\'U/V/W/-/\'+n+\'?X=Y-Z-h&11=1a&7-l=1" ><\\/h>\')}}}x N(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x O(F){12=(F-1)*j;G=F;5 13=u.1m(\'1n\')[0];5 v=u.1o(\'h\');v.1p=\'1q/1r\';v.1s("T",y+"U/V/W/-/"+n+"?1t-1u="+12+"&7-l=1&X=Y-Z-h&11=1b");13.1v(v)}x 1b(Q){1c=Q.R.1K[0];5 1w=1c.1x.$t.D(0,19)+1c.1x.$t.D(1L,1M);5 1d=1N(1w);3(i=="w"){5 1e="/r?S-7="+1d+"&7-l="+j+"#E="+G}c{5 1e="/r/s/"+n+"?S-7="+1d+"&7-l="+j+"#E="+G}1O.f=1e}',62,113,'|||if|span|var|html|max||indexOf||nomerhal|else|thisUrl|class|href|jj|script|jenis|postperpage|showpageNum|results|urlactivepage|lblname1|maksimal|||search|label||document|newInclude|page|function|home_page|onclick|return|false|pageArea|substring|PageNo|numberpage|nopage|nomerkiri|parseInt|mulai|numshowpage|akhir|upPageWord|redirectpage|redirectlabel|length|root|feed|updated|src|feeds|posts|summary|alt|json|in||callback|jsonstart|nBody||banyakdata|prevnomer|nextnomer|blogPager||hitungtotaldata|finddatepost|post|timestamp|alamat|halamanblogger|loophalaman|for|downPageWord|innerHTML|totaldata|write|getElementsByTagName|head|createElement|type|text|javascript|setAttribute|start|index|appendChild|timestamp1|published|showpageOf|Page|of|showpage|showpagePoint|getElementsByName|getElementById|blog|pager|openSearch|totalResults|20|entry|23|29|encodeURIComponent|location'.split('|'),0,{}))
//]]>
</script>

Catatan:

• Untuk yang berwarna merah dapat Anda ganti dengan Kata-kata lain sesuai keinginan.
• Untuk yang berwarna biru merupakan jumlah tampilan page, silakan sesuaikan dengan kebutuhan Anda
• Selamat berkreasi

Untuk bentuk yang lain jika Anda ingin mencobanya silakan kunjungi Web Abu Farhan, saya kira disana juga banyak style lain untuk page navigation yang bagus. Langsung ke Abu Farhan >>>.