Membuat Navigasi Halaman / Page Navigation Blogger

Sabtu, 25 September 2010 - - 14

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, karena biasanya template-template wordpress sudah menyediakan fasilitas ini. Bagi pengguna Blogger / Blogspot, harus menggunakan jurus-jurus sakti tambahan yaitu 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://mrmung.googlecode.com/files/pagenav.js' type='text/javascript'/>
<!--Page Navigation Ends -->
6. Simpan dan lihat hasilnya.

Semoga bermanfaat.


Bagi yang gak ada waktu dan gak  mau repot cara membuat dan mengedit blog, serahkan saja kepada Mung Bisnis | Jasa Pembuatan Blog.

Oh aku kirain menu navigasi yang di tab menu atas itu mr..bawahnya header tu loh yang jika disentuh kursor mouses trus muncul menu-menu lagi dibawahnya, klo kyak itu namanya apa ych Mr...??

kok gak bisa gan saya taruhh di blogg ane....

Mr.Mung at 14 Februari 2012 21.46

@Relief: hmm... masa si..? sudah diikuti petnjuknya dg benar? atau mungkin memang gk cocok dg template anda.

hadi aktual at 23 April 2012 13.36

]]> simbol tersebut tdk ada di templat saya mr ,sdh aku coba bolak-balik tetap ndk bisa.adakah cara lainya?trims

Mr.Mung at 23 April 2012 22.56

@hadi: coba di cek lagi pak, ada koq, ]]></b:skin>

hadi aktual at 25 April 2012 07.36

iya mr lain kali aku teliti lagi dan aku terapkan.tlg mr mung posting mengenai webmaster tool dong karena saya belum mengetahuinya.trims

Andalanku.com at 2 November 2012 01.55

Makasih banyak juragan infonya

Rino Wijaya at 15 Januari 2013 06.30

Thanks mas tutorialnya.

Kata Kata Cinta at 27 Agustus 2013 22.47

Makasih mas

ribut ariadi at 27 Juni 2015 07.13

Terimakasih banyak atas tutorialnya om, sangat bermanfaat
hadirkanlah
Kata Kata Cinta
Kata Kata Bijak

NOPI ISBAT at 17 Februari 2016 04.00

Thanks mas tutorialnya.

Rani El-Mutiara at 7 Agustus 2016 10.28

Kalau sudah urusan html, mumet.

Satuperjuangan at 28 Februari 2017 15.46

Terima kasih tutorialnya Gans semoga bermanfaat !

Hendra Roper at 12 April 2017 22.44

Terima kasih banyak atas info dan tuturialnya mas, sangat mambantu

Silahkan tinggalkan komentar anda disini dan Terimakasih anda mau menuliskan nama anda.

Koleksi Tutorial Blog

Arsip Blog