Membuat Navigasi Angka di Bawah Posting Blog

Masih tentang Tutorial blog, kali ini Andi Techno akan berbagi Tutorial Membuat Navigasi Angka di Bawah Posting Blog, Bagaimanakah Navigasi angka itu? ihat gambar berikut ini:

oke ayo kita praktekkan bagaimana cara Membuat Navigasi Angka di Bawah Posting Blog

1. Masuk ke Dashboard Blogger kamu > Klik Rancangan > Edit HTML > centang Expand Template Widget
2. Cari kode ]]></b:skin> dengan bantuan Ctrl+F lalu letakkan kode dibawah ini tepat diatas kode ]]></b:skin> tadi

/* -- 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/AVvXsEgPxc1RL5kDVVAiYRbwbyp8twjTz8e9Gzc39-_ZO-UvZRcaN0V3DEkvZ011yAhLgq2MDzSetyyCtfrMIYrWLwb0R3rcf-XfmZvUg2GA5J3EULG5h3SXqF7xdP6Q-OzJjYMGJge-_BX4ZX9J/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/AVvXsEiAwvneE92pOqn4J6vJMIuL830ATWAE1tDmH3-nzFCglpz5T0ot38vzZcbI1ocb4Pg7eY-2NfmKG6RweT4Y5VlUJFLuqY3tX574DU5YazD4dWBAs7OCK7qBHwc7rWA8gMRQgkeo8HsWrb9n/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/AVvXsEgOlwM_XxVRJky-WBqIjpSJfe3H69VVuDMHIKG6lKfygUXny1yYJiL3xpFTcyBOuYvj_bjvCYY3fUbh-Hly48OYOcop7Z8SqTKIAhA5ZiWjp7VY0SJ0MLqm2PY7n1G04kJYo_g6YyWb6lSe/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/AVvXsEgPxc1RL5kDVVAiYRbwbyp8twjTz8e9Gzc39-_ZO-UvZRcaN0V3DEkvZ011yAhLgq2MDzSetyyCtfrMIYrWLwb0R3rcf-XfmZvUg2GA5J3EULG5h3SXqF7xdP6Q-OzJjYMGJge-_BX4ZX9J/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/AVvXsEgPxc1RL5kDVVAiYRbwbyp8twjTz8e9Gzc39-_ZO-UvZRcaN0V3DEkvZ011yAhLgq2MDzSetyyCtfrMIYrWLwb0R3rcf-XfmZvUg2GA5J3EULG5h3SXqF7xdP6Q-OzJjYMGJge-_BX4ZX9J/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/AVvXsEiAwvneE92pOqn4J6vJMIuL830ATWAE1tDmH3-nzFCglpz5T0ot38vzZcbI1ocb4Pg7eY-2NfmKG6RweT4Y5VlUJFLuqY3tX574DU5YazD4dWBAs7OCK7qBHwc7rWA8gMRQgkeo8HsWrb9n/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}/* -- NAVIGASI DENGAN ANGKA -- */

3. Lalu cari kode </body> dan letakkan kode dibawah ini tepat diatas kode </body> tadi

 <!-- awal navigasi angka andi-techno.blogspot.com --><script type='text/javascript'>var home_page="/";var urlactivepage=location.href;var postperpage=6;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 andi-techno.blogspot.com -->

keterangan:

• var postperpage=6; >> angka 6 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

4. Cari kode 'data:label.url'  lalu ganti dengan kode 'data:label.url + &quot;?&amp;max-results=6&quot;'

keterangan: jika tidak menemukan kode 'data:label.url'  maka langkah no.4 bisa dilewatkan saja :D

5. Klik pratinjau dan lihat hasilnya, jika berhasil, klik Simpan Template

semoga artikel Membuat Navigasi Angka di Bawah Posting Blog ini dapat berguna

keyword: cara membuat tombol navigasi angka, tutorial membuat navigasi nomor , tutorial blog, membuat navigasi angka dibawah posting blog, cara membuat tombol navigasi nomor dibawah posting blog, navigasi angka, navigasi nomor