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

makasih mas sangat saya mau langsung praktek salam by Adekaprinting.com

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

.:: Iklan ::.

Koleksi Tutorial Blog

Pengertian Blog dan Cara Membuat Blog Terbaru

Cara Melakukan Posting Artikel

Cara Membuat Readmore di blog dengan Mudah

Cara Mendapat Hosting Gambar Gratis

Cara Menghilangkan Tulisan Subscribe To Post (Atom)

Cara Setting Blog Yang Baru di Buat

Cara memasang Jam Animasi di Blog

Cara memasang banner affiliate di blog

Cara menampilkan dokumen office (word, excell, power point) di blog

Changing the Read More in blogger - New Feature

Creating 'After the jump' summaries

Encode dan Decode

Gadget Posting Terpopuler dengan Thumbnile dan Statistik Blog

How to create a blog with Blogger - Video YouTobe

Membuat Banner atau Gambar Berjalan

Membuat Navigasi Halaman / Page Navigation Blogger

Membuat Site Map, Daftar Isi Otomatis Versi 2

Membuat Slide Gambar di Blog Dengan JQuery

Membuat Teks Berkedip Seperti Gadis Cantik yang Centil

Membuat Tombol Share Facebook Dengan Counter

Membuat Tombol Show Hide Gambar - Text di Blog (spoiler)

Menciptakan blog yang keren dan elegant

Mengganti Avatar Komentator dengan Avatar MyblogLog

Mengganti Template Blogger Standard

Navbar Blogger, Amankan Blog dari DELETE

Perancangan Template Blog Baru

Posting Gambar di Blog

Script Buku Tamu Model Show Hide

Script Membuat Buku Tamu Cepat dan Praktis

Script Membuat Random Posting di Blogspot

Script Membuat Slide Photo Panorama

Tips dan Trik Blog: Agar Title Blog Kita SEO Friendly

Tips dan Trik: Menghapus Link Subsribe Post

Video Tutorial Membuat Blog di Blogspot 1

Video Tutorial Membuat Email di Ymail

Website Penyedia Layanan Shout Box

Posting Blog Terbaru Otomatis Update di Status Facebook

Gambar bergoyang ketika di sentuh

Membuat Page(Laman Terpisah) di Blogger.com

Cara Membuka Website Yang Benar (Untuk Pemula)

Cara Mudah Custom Domain di Blogspot

Cara Custom Domain blogspot dengan Domain web.id

Cara Membuat Scroll Widget Blog

Cara Edit Menu dan Sub Menu Melalui EDIT HTML Template

Cara Mengedit Gambar Slide
Cara Setting Sub Domain dan Redirect Domain
Cara Menyimpan Javascript di Google Drive

Arsip Blog