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.

27 komentar

tengkyu kang

Balas

walah, kok g jalan mas.....

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

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

Balas

Wah mantap nih informasinya salam kenal gan...

Balas

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

Balas

Cara ngebuat menu melayang kayak di blog ini gimana ?

Balas

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

Balas

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 : mohammadrobih@gmail.com
makasih

Balas

Kalau buat komentar bisa nggak bang? :)

Balas

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

Balas
Komentar ini telah dihapus oleh pengarang.

om di blog saya pas di page 2 kok yang previousnya ukuran kotaknya gak sama...
ketika di page 3 uda sama kyk yang next ukuran kotaknya... mohon infonya om.

Balas

Poskan Komentar


×
Chat