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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6bSoAMOGVQFAX365APvMhkVYKfXGIfDI1tFo3NVMdzWAun1bxrPwrm5ThK-xPYmYw-7sGh26-3UUitU5D2eQszfm87QVNgjSGXuXAaujl9tHHIewGJwFwFsn235Muas2txVCDRiJZ4M/s0/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("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiV6bSoAMOGVQFAX365APvMhkVYKfXGIfDI1tFo3NVMdzWAun1bxrPwrm5ThK-xPYmYw-7sGh26-3UUitU5D2eQszfm87QVNgjSGXuXAaujl9tHHIewGJwFwFsn235Muas2txVCDRiJZ4M/s0/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 >>>.

2 komentar:

  1. Mantap puisinya mas... Supaya itu terhubung ke link untuk nulis atau masukkan fhoto gmana mas ya? Soalnya untuk ke laman kayak ke beranda itu gak ada link ke laman barunya...

    BalasHapus
    Balasan
    1. saya sedikit kaga ngerti dengan apa yang ditanyakan,,, kalo mungkin untuk menautkan ke beranda, tinggal tambah link beranda,,,, bisa diperjelas untuk pertanyaannya?

      Hapus

Cara menulis komentar
1. Ketik komentar Anda pada Kolom dibawah
2. Pilih account login Anda (Email)
3. Klik 'Poskan Komentar'
Saya harap Anda jangan berkomentar dengan bentuk SPAM, karena tidak akan dipublikasina. Jika Anda ingin menautkan link Blog, silakan be Follower (Baca:Cara menjadi followers blog)

Lebih diutamakan pada komentar yang bersifat ingin tahu (bertanya).