Cara Membuat Navigasi Halaman Blog - Indriawan dot Com | Informasi Dan Berita Online

Breaking

Post Top Ad

Space Iklan

Sabtu, 23 April 2011

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...

49 komentar:

  1. ada pengaruh nggak terhadap loading ???

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

    BalasHapus
  3. ok, , ,

    kax, cara buat blog qta dofollow gmna y?

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

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

    BalasHapus
  6. 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 ^^

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

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

    BalasHapus
  9. emang dadine piye? Dadine yo koyo navigasi blog iki...

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

    BalasHapus
  11. pengetahuan baru nih,,,jadi nambah wawasan nih,,mau ikut juga nyoba,,moga berhasil makasih sobat,,

    BalasHapus
  12. mantap, nih langsung aza ke tkp,,makasih,,

    BalasHapus
  13. Langsung dicoba dan hasilnya....
    BERHASIL GAN!! thanks !!!

    BalasHapus
  14. Selamat sob. Semoga bermanfaat...

    BalasHapus
  15. 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

    BalasHapus
  16. dah follow no.115 and trims untuk tutorialnya

    BalasHapus
  17. 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....

    BalasHapus
  18. emange kenopo gan? dicoba disek gan...

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

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

    BalasHapus
  21. wah, setelah pake trick ini blog ane jadi lebih mantab gan>>>

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

    BalasHapus
  23. kalo membuat page seperti punya mas tu kek mana
    da halaman downlaodnya n sebagainya tu

    baru belajar ngeblog mas hehe

    http://penowo.blogspot.com

    BalasHapus
  24. terimakasi sobat tutorialnya. sudah berhasil di pasang di blog saya

    BalasHapus
  25. @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

    BalasHapus
  26. @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

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

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

    BalasHapus
  29. cara buat kotak komentar kayak gini gmn ya caranya?

    BalasHapus
  30. Saya coba praktekan gan, trims ya...

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

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

    BalasHapus
  33. makasih ata infonya mas bro!!!

    kunjungi juga
    www.rif123.com

    BalasHapus
  34. terimakasih banyak atas info nya sangat bermanfaat sekali
    semoga semakin sukses nya

    BalasHapus
  35. sangat menarik sekali infonya :)

    BalasHapus
  36. terimakasih banyak info nya
    Bermanfaat sekali
    Semoga sukses

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

    BalasHapus
  38. trimakasi atas infonya semoga dapat bermanfaat gan

    BalasHapus
  39. nice infonya.... sukses terus ea ditunggu artikel selanjutnya!!!

    BalasHapus



  40. ditunggu artikel selanjutnya gan

    BalasHapus
  41. Terima Kasih ya Gan, Artikel yang sangat Bagus dan Bermanfaat.. Update terus dan sukses selalu ya Gan..
    jangan lupa berkunjung yah gan^^
    judi online
    situs judi online
    roulette
    roulette online
    baccarat
    baccarat online
    casino online
    live casino
    agen casino
    judi casino

    BalasHapus

Post Top Ad

Space Iklan