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