News Update :

Cara Membuat Navigasi Halaman Blog

Wah sudah lumayan lama tidak posting tentang tutorial blog nih, jadi agak kurang update deh blog ini. Setelah dulu saya pernah membahas tentang Mengganti Tulisan Posting Lama Dan Posting Baru Jadi Lebih Menarik (silahkan baca disini), sekarang kita akan membahas cara membuat navigasi halaman blog. Lihat gambar di bawah ini sebagai contoh.

klik gambar untuk live demonya

Memang cara ini sudah banyak sekali yang membahas, tapi tidak apa-apa saya bahas lagi untuk pengunjung setia blog ini. Navigasi halaman ini saya padukan dengan sedikit sentuhan css3 gradient, border radius, dan text sadhow. Bagi kalian yang sudah terbiasa dengan kode css, silahkan di modifikasi agar jadi lebih menarik sesuai template.

Oke langsung saja dengan menambahkan kode css berikut DI ATAS ]]></b:skin>

.showpageArea{padding:10px;background:#fff}

.showpageArea a{border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;text-decoration:none}

.showpageNum a{font-weight:bold;color:#ca1717;padding:1px 8px; margin:0 4px;text-shadow:0px 2px 4px #666;border:1px solid #fff;background:#fff;}

.showpageNum a:hover{color:#fff;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);text-shadow:0px 2px 2px #00a;border:1px solid #ddd;}

.showpagePoint{color:#fff; text-shadow:0px 2px 2px #00a; padding:1px 8px; margin:2px; font-weight:bold;border:1px solid #ddd;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

.totalpages{margin:0 8px 0 0;color:#444;background:#fff;padding:1px 10px;border:1px solid #ddd;border-radius:5px;-moz-border-radius:5px;-webkit-border-radius:5px;}

.showpage a{padding:1px 8px; margin:0 2px;border:1px solid #ddd;background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);;color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}

.showpage a:hover{background: #ca1717;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fff', endColorstr='#ca1717');
background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#ca1717));
background: -moz-linear-gradient(top, #fff, #ca1717);color:#fff;text-shadow:0px 2px 2px #00a;padding:1px 8px;padding-left:10px}
#showlastpage a{font-weight:bold}

Setelah itu tambahkan script berikut DI ATAS tag </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;&#9668;&#39;;
var downPageWord =&#39;&#9658;&#39;;
</script>
<script src='http://belajarblogging.googlecode.com/files/pagenav.js' type='text/javascript'/>
</b:if>

Dan terakhir save template dan lihat hasilnya. Bagaimana, mudah kan? Kalau ada yang kesulitan, silahkan bertanya di kotak komentar di bawah.

Semoga bermanfaat.
Alhamdulillah...

comment 51 Komentar on "Cara Membuat Navigasi Halaman Blog"

  • ada pengaruh nggak terhadap loading ???

  • @Nyach MMS Gak ada pengaruh yg terlalu berat kok sob, mungkin loading dalam pemanggilan script aja dari hosting..

  • ok, , ,

    kax, cara buat blog qta dofollow gmna y?

  • @fery : lah mas fer, lak pe ngeke'i serial nak AAA Logo piye?? tak golek'i kok gag enek yow

  • Jembedok, biasane nang about. Yo coba ae gawe logo engkok nek di kongkon registrasi yo tulisen seriale

  • gag enek mas bro sumpah wes, hehehe..ki enek'e order now malahan asem kok, jan urip kok yow digawe angel ^^

    ki mau tips'e tak jajal kok yow gagal maning gagal maning sing ndi sing salah yow", guablok ki soal'e, hahahahaha ^^

  • Tips opo??
    Timbange angel2, mending unistall trs install ulang lak wes...

  • yow tips'e navigasi iki luw..dadine gag seperti yang ku inginkan dan ku harapkan, hahahaha
    oke tak jajal'e sik mas bro,

  • emang dadine piye? Dadine yo koyo navigasi blog iki...

  • rengket" mas, gag enek background warnane blas cumak text'e tok..jajal pean delok

  • pengetahuan baru nih,,,jadi nambah wawasan nih,,mau ikut juga nyoba,,moga berhasil makasih sobat,,

  • mantap, nih langsung aza ke tkp,,makasih,,

  • Langsung dicoba dan hasilnya....
    BERHASIL GAN!! thanks !!!

  • Selamat sob. Semoga bermanfaat...

  • gunan'q kok panggah gag kenek tok op mbak jampi" mas blogku, hahahaha .. peh asem kalah apik blogku, wi GA tas entok ye mas pean

  • dah follow no.115 and trims untuk tutorialnya

  • heeemmmm...gemes aku...iki tutoriale sing keliru po aku sing bodho to hhheee.....mbok diwarahi gan aku ki neh...blogku koyok tempat sampah ki lho,hhheee....

  • emange kenopo gan? dicoba disek gan...

  • salam kenal mas. trim's atas resepnya dan saya tunggu kunjungan anda dan para pembaca di blog saya.

  • Sob, ane request yang warna ijo bisa kagak, biar cocok ama blog ane www.niceinfogan.co.cc

  • wah, setelah pake trick ini blog ane jadi lebih mantab gan>>>

  • link yang ini : http://belajarblogging.googlecode.com/files/pagenav.js
    apa gak perlu diganti ?

  • kalo membuat page seperti punya mas tu kek mana
    da halaman downlaodnya n sebagainya tu

    baru belajar ngeblog mas hehe

    http://penowo.blogspot.com

  • terimakasi sobat tutorialnya. sudah berhasil di pasang di blog saya

  • @dede : aku dulu coba juga gag berhasil sob, aku bukan si admin tp temennya (horier.blogspot.com)..tunggu si admin benerin yah coz lagi repot ama kerjanya

    @sofwan : oke sob . .

    @rival : untuk warna bisa di edit sendiri sob, cari aja kode warna yang sesuai dengan blognya sobat..pake template designer di blogger kan bisa buat cari tahu daftar nama warna

  • @triyono : yoi dunk..jadi keren kan sob ^^

    @dyo : kayaknya gag sob, kan ini mank code-nya si mas feri admin..aku assisten-nya nih (horier.blogspot.com)

    @khusaini : yg mana yah sob? aku kurang jelas

  • @download : wah hebat klo berhasil..padahal di beberap temen blogger lain ada yang gag mau jalan tuh script-nya, sukses deh

  • bro,tutornya ga berjalan di blogku,minta bantuan'a yak.tx brader

  • cara buat kotak komentar kayak gini gmn ya caranya?

  • Saya coba praktekan gan, trims ya...

  • informasinya luar biasa sangat bermanfaat sekali...
    Banyak sekali ilmu pengetahuan yang saya dapatkan
    Terimakasih banyak atas informasinya ...
    Semoga semakin sukses

  • informasinya sangat bagus sekali...
    saya suka..
    banyak pengetahuan yang saya dapatkan setelah saya berkunjung ke blog ini....

  • makasih ata infonya mas bro!!!

    kunjungi juga
    www.rif123.com

  • terimakasih banyak atas info nya sangat bermanfaat sekali
    semoga semakin sukses nya

  • sangat menarik sekali infonya :)

  • terimakasih banyak info nya
    Bermanfaat sekali
    Semoga sukses

  • kebaikan yang anda berikan melalui blod ini semoga menjadi amal soleh,,,amin salam kenal dan sukses selalu

  • trimakasi atas infonya semoga dapat bermanfaat gan

  • nice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!




  • ditunggu artikel selanjutnya gan

  • Hai..
    kita dari agen poker online papadomino mau memberitahukan bahwa sekarang sedang ada promo bonus yaitu :
    * Bonus Minguuan : 0.5% (setiap senin)
    * Bonus Referral : 20% (seumur hidup)

    Hanya dengan minimal depo & wd Rp 20.000,-
    Proses depo / wd cepat
    100% PLAYER VS PLAYER Tanpa ROBOT
    link pendaftaran : http://papadomino.com/?ref=jesica6413
    Untuk info lebih lanjut silahkan hubungi : 2B4A514B

    * Buat yang suka bermain togel silahkan kunjungi http://www.papa4d2.com/ref.php?ref=jesica
    ;)
    judi poker
    bandar poker
    domino online
    agen poker online
    poker online
    capsa susun
    poker online terpecaya

  • Leave Your Comment

     
    site kreator
    © Copyright Indriawan dot Com | Informasi Dan Berita Online 2013 | Design by Fery Eka Indriawan | Powered by Blogger