Cara Membuat Halaman Navigasi dengan Angka di Blog

Membuat halaman navigasi dengan angka atau kalau bahasa gaulnya "numbered page navigation"  widget seperti ini saya pernah posting yang bisa dibaca atau dilihat dihalaman sini. tapi sekarang saya punya script yang baru dengan tampilan yang sudah saya modif  lagi dengan tampilan yang cantik dan menarik. jika sudah memasang dengan tampilan yang lama saya sarankan sebaiknya ganti dengan script yang ini karena lebih ringan.

Untuk cara pemasangannya sama dengan posting yang halaman navigasi dengan angka yang dulu disini, tetapi saya akan tulis tutorial nya ulang dari langkah awah agar tidak membingungkan berikut tutorialnya :

1. Login ke blogger.com anda!
2. Masuk ke Dasboard>>Rancangan>> Edit HTML (tidak perlu memberikan klik pada Expand template widget)
3. Cari kode ]]></b:skin> Kemudian Copy dan paste kode CSS berikut tepat diatas kode ]]></b:skin>

/* -- AWAL HALAMAN NAVIGASI DENGAN ANGKA -- */
.totalpages{color:#333; padding-right:7px;}
.showpageArea a{text-decoration:none;}
.showpageNum a{
padding:4px 8px;
margin:0 4px;
text-decoration:none;
color:#000;
text-shadow:#fff 1px 1px 1px;
border:1px solid #CDCDCD;
background:#DADBDB url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi58FGLsXiRm8cmku9jmajpX_aJkC7ndyxzPLTRAWLRyTrIHQo3dx2-E0f2-yfTIKPqr5WNJletOaCxTm7ryg3zdgII-77uL3siKX9qiC3goRvde1DwnbfV2mXkfQHl3cf18TJC7ibPtbDF/s1600/off.png') repeat-x ;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px}
.showpageNum a:hover{ color:#000;
text-shadow:#fff 1px 1px 1px; border:1px solid #CDCDCD; background:#C4C4C4 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhTy_x1mF9E1jHv7SUDofQkH7tG7Ob9grfadiA_7amASkjogu2Vju6MNJsla7CkIji2B8v2LN-WHgqoQhoB7cqfq6yIL0gJpBJYZM1X76hKfXd1l-p5BMVG6UfAWP6Qu7Mw9SqQdL2Q4iX/s104/pghover.png') repeat-x ;}
.showpagePoint{color:#333;
text-shadow:#fff 1px 1px 1px;
padding:4px 8px;
margin:2px;
font-weight:bold;
border:1px solid #cccccc;
background:#959494 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVwCjg-h1lWuJga4K3YKKtSCSLvDmBG-7JrzW_4olNeK49zDMRMPc6ZPTAi15U3m9CXp53IcWz__A1mZDax6J4lLqFAT5x61UDa0Sm8BczadjIDEwYeQnIJ1f38K541yZk-x4UtgAKKmLd/s1600/pgoff.png') repeat-x ;
text-decoration:none;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
.showpageOf{margin:0 8px 0 0; padding:4px 8px; color:#333;
text-shadow:#fff 1px 1px 1px; background:#DADBDB url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi58FGLsXiRm8cmku9jmajpX_aJkC7ndyxzPLTRAWLRyTrIHQo3dx2-E0f2-yfTIKPqr5WNJletOaCxTm7ryg3zdgII-77uL3siKX9qiC3goRvde1DwnbfV2mXkfQHl3cf18TJC7ibPtbDF/s1600/off.png') repeat-x ;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;}
.showpage a{padding:1px 8px; color:#333;
text-shadow:#fff 1px 1px 1px;
margin:0 2px;
text-decoration:none;
border:1px solid #CCC;
background:#DADBDB url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi58FGLsXiRm8cmku9jmajpX_aJkC7ndyxzPLTRAWLRyTrIHQo3dx2-E0f2-yfTIKPqr5WNJletOaCxTm7ryg3zdgII-77uL3siKX9qiC3goRvde1DwnbfV2mXkfQHl3cf18TJC7ibPtbDF/s1600/off.png') repeat-x ;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px}
.showpage a:hover{color:#000;
text-shadow:#fff 1px 1px 1px;
padding:4px 8px;
margin:2px;
font-weight:bold;
border:1px solid #CDCDCD;
background:#C4C4C4 url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhTy_x1mF9E1jHv7SUDofQkH7tG7Ob9grfadiA_7amASkjogu2Vju6MNJsla7CkIji2B8v2LN-WHgqoQhoB7cqfq6yIL0gJpBJYZM1X76hKfXd1l-p5BMVG6UfAWP6Qu7Mw9SqQdL2Q4iX/s104/pghover.png') repeat-x ;}
text-decoration:none;
-moz-border-radius:4px;
-khtml-border-radius:4px;
-webkit-border-radius:4px; border-radius:4px}
.showpageNum a:link, .showpage a:link{text-decoration:none; color:#333}
/* -- AKHIR HALAMAN NAVIGASI DENGAN ANGKA -- */

4. Kemudian tuju bagian paling bawah dan cari kode </body>  kalau sudah ketemu, letakkan kode berikut tepat diatas kode  </body>
DEBBY

<!-- awal navigasi angka u-sup.blogspot.com -->
<script type='text/javascript'>
var home_page="/";
var urlactivepage=location.href;
var postperpage=5;
var numshowpage=5;
var upPageWord ='&#9668;';
var downPageWord ='&#9658;';
</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>
<!-- akhir navigasi angka ber2saudara.blogspot.com -->

5. Dan simpan template

6. Sekarang beri randa centang pada expand widget template
-Kemudian cari kode : 'data:label.url' 
-dan rubahlah dengan kode : 'data:label.url + &quot;?&amp;max-results=6&quot;'
-kemudian simpan template.

Keterangan tambahan :

• Jika tidak menemukan kode  'data:label.url' langkah no.6 tidak perlu dilakukan jadi bisa melewati langkah no.06]
• var postperpage=5; >> angka 5 menunjukkan berapa jumlah posting yang akan ditampilkan dalam setiap halamannya silahkan sesuaikan selera
• var numshowpage=5; >> angka 5 menunjukkan berapa jumlah tombol navigasi yang akan tampil, silahkan sesuaikan selera

Cukup sampai disini tutorial membuat halaman navigasi dengan angka sudah selesai, jika ada kusulitan atau hal lainnya silahkan tuliskan komentar.