Membuat Navigasi Halaman / Page Navigation Blogger

Page Navigation atau navigasi halaman berfungsi untuk mempermudah pengunjung menjelajahi blog kita dan melihat halaman perhalaman.

Bagi pengguna Wordpress tentunya sudah tidak asing dengan page navigation. Bagi pengguna Blogger / Blogspot, harus menyisipkan kode javascript.

Langkah -langkah membuat navigasi menu :
1. Login ke Blogger
2. Masuk ke Dasbor > Rancangan > Edit HTML
3. Cari kode
]]></b:skin>
untuk memudahkan gunakan (Ctrl+F)
4. Paste kode di bawah ini diatas kode ]]></b:skin>
/* Page Navigation styles */
.showpageNum a {
  padding: 3px 8px;
  margin:0 4px;
  text-decoration: none;
  border:1px solid #999;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  background: #ddd;
  }

.showpageOf {
margin:0 8px 0 0;
}
.showpageNum a:hover {
  border:1px solid #888;
  background: #ccc;
  }

.showpagePoint {
  color:#fff;
  text-shadow:0 1px 2px #333;
  padding: 3px 8px;
  margin: 2px;
  font-weight: 700;
  -webkit-border-radius:3px;-moz-border-radius:3px;
  border:1px solid #999;
  background: #666;
  text-decoration: none;
  }
5. Selanjutnya paste kode dibawah ini di atas kode </body>
 <!--Page Navigation Starts-->
<script type='text/javascript'>
var home_page=&quot;/&quot;;
var urlactivepage=location.href;
var postperpage=4;
var numshowpage=6;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://btreaders.googlecode.com/files/pagenav.js' type='text/javascript'/>
<!--Page Navigation Ends -->
6. Simpan dan lihat hasilnya.

Untuk melihat contoh page navigation, lihat di blog ini, klik Home. atau contoh lain disini.
Berita Lebih Baru Berita Lebih Lama
  • Anonim
    Profil:
    06 Juli, 2010

    tengkyu kang

  • ajurNA
    Profil: http://www.ajurna.net/
    13 Juli, 2010

    walah, kok g jalan mas.....

  • Anonim
    Profil:
    11 Agustus, 2010

    aduhh makasih banyak gan, dari kemarin saya coba kayak gini tapi ga bisa..
    tpi sekrng akhirnya bisa

  • Alexa-com Weblog
    Profil: http://www.alexa-com.co.cc
    30 Agustus, 2010

    kang isemet kok gk jln ya ... np ya ...

  • regalia
    Profil: http://metal-arch.blogspot.com
    04 September, 2010

    nah ini navigasi yang rapi, gue cari cari navigasi yg sejenis ini susah banget, kebanyakan navigasinya ga rapi.

  • regalia
    Profil: http://metal-arch.blogspot.com
    04 September, 2010

    berhasil mas bos, bisa dilihat di blog gue (warna navigasi sudah diganti).

  • Bomberx
    Profil: https://www.blogger.com/profile/03225563064900792965
    04 September, 2010

    sip!!
    mantab bro!!
    sukses!!
    akhirnya ketemu juga yang bisa dijalanin!!

  • Blogger Ceria
    Profil: http://www.bloggerceria.com/
    10 September, 2010

    wah berhasil nih kang..
    mantab, thanks ya.. :D

  • Unknown
    Profil: https://www.blogger.com/profile/03484545478749401709
    23 September, 2010

    Good, teng berat. Maknyus tutorialnya :D berhasil kang: http://downloadtemplatewordpress.blogspot.com/

  • abbas aditya
    Profil: https://www.blogger.com/profile/13405277504583912069
    04 Oktober, 2010

    tinkyu kang

  • paoo
    Profil: https://www.blogger.com/profile/10793895641251083886
    10 Oktober, 2010

    Wah makasi banget ya kang..
    almost semua posting nya berguna banget :D

  • Anonim
    Profil:
    23 November, 2010

    terima kasih kang..sangat membantu..
    salam kenal:
    http://xhamayubawono.blogspot.com/

  • Freedownloaderz
    Profil: http://freedownloaderz.blogspot.com
    19 Desember, 2010

    nah mantab nih Kang...makasih Tutornya...

  • hendra
    Profil: http://galusblog.blogspot.com
    31 Desember, 2010

    wah...makasih kangismet.. tutorialnya sangat jelas..
    sayangnya kita harus menyesuaikan sedikit jumlah halaman yang ditampilkan agas sesuai dengan template blog kita. tapi manatap kang, sudah teratasi dengan baik...

    mampir ke blogq untuk melihat hasilnya...

  • pengobatan luka bakar
    Profil: http://obatherbalpenyakit.com/tips/pengobatan-luka-bakar/
    11 April, 2012

    makasih ya gan atas infonya

  • osteoporosis
    Profil: http://xamthoneplus.farid.web.id/agen-obat-herbal/osteoporosis/
    11 April, 2012

    salam kenal ya gan

  • Obat Pendarahan Lambung
    Profil: http://obatherbalpenyakit.net/agen/obat-pendarahan-lambung/
    11 April, 2012

    Wah mantap nih informasinya salam kenal gan...

  • Penyakit Radang Paru-paru
    Profil: http://jellygamat.farid.web.id/obat-herbal-penyakit/penyakit-radang-paru-paru/
    11 April, 2012

    Wah mantap nih informasinya salam kenal gan moga sukses terus...

    • Kang Ismet
      Profil:https://www.blogger.com/profile/07706142952405337288
      12 April, 2012

      Sama2...

  • Unknown
    Profil: https://www.blogger.com/profile/12435761033643771417
    23 November, 2012

    Cara ngebuat menu melayang kayak di blog ini gimana ?

  • moneteize
    Profil: http://moneteize.blogspot.com/
    27 Januari, 2013

    thanks kang..
    walo butuh sedikit tambahan, tapi mantab bnget deh.. :)

  • Unknown
    Profil: https://www.blogger.com/profile/06425479213959667238
    27 Februari, 2013

    mantap euy, makasih..

  • Tanpa Nama
    Profil: https://www.blogger.com/profile/04931621652563093903
    14 Mei, 2013

    mas tolong bantu blog saya,, saya baru saja pake custom template tapi kenapa laman tab saya gak muncul terus cara ngilangi gambar slide bawaan custom template gimana ??
    tolong pencerahanya.. kontak lewat email : [email protected]
    makasih

  • Fauzi
    Profil: https://www.blogger.com/profile/00588514246573277941
    30 Mei, 2013

    Kalau buat komentar bisa nggak bang? :)

  • Saipul Muiz
    Profil: https://www.blogger.com/profile/02322117491768354172
    09 Mei, 2014

    gak jalan mas gimana kalau mau ngaleungitkeun navigasi nu baheulana??

Tambahkan Komentar
comment url
Terima kasih telah berkomentar di Blog Kang Ismet.
  • Untuk menyisipkan Gambar, Kode, atau Kutipan silahkan klik Tab Sisipkan di atas.
  • Emoji yang bisa digunakan pada komentar :), :D, :( <3, :love dan :top
  • Untuk melihat Komentar yang telah ditambah sisipan kunjungi DEMO
Masukkan URL Gambar atau Potongan Kode, atau Quote, lalu klik tombol yang kamu inginkan untuk di-parse. Klik tombol Salin Kode! lalu paste ke kolom komentar.


image quote pre code
25 Komentar