Cara Memasang Navigasi Halaman Posting

Sebelumnya, teman2 ada yang belum tahu apa itu navigasi halaman? Navigasi halaman yaitu fitur yang berfungsi sebagai rel untuk menuju ke halaman selanjutnya maupun ke halaman sebelumnya. Mungkin teman2 akan lebih jelas lagi kalau teman2 langsung pergi ke halaman google.com sekarang juga dan coba perhatikan angka2 halaman yg berada pada bagian paling bawah halaman google search tersebut. Nah, nomor2 halamn tersebutlah yang dinamakan navigasi halaman. Sebenarnya pihak blogger telah menyediakan fitur ini di blog kita sejak awal, akan tetapi bentuk navigasinya sederhana sekali yaitu berbentuk tulisan "Posting lama", "posting lebih baru", dll maka dari itu bagi teman2 yg ingin menampilkan blognya lebih ekspresif lagi maka bisa juga diterapkan trik yg satu ini.

Contoh tampilan



Cara membuatnya silahkan login dulu ke akun blogger, lalu klik tata letak >> Edit HTML ("expand widget templet" gak usah dicentang)

Selanjutnya letakkan kode berikut di atas tag ]]></b:skin>

.showpageArea a {
text-decoration:underline;
}
.showpageNum a {
text-decoration:none;
border: 1px solid #cccccc;
margin:0 3px;
padding:3px;
}
.showpageNum a:hover {
border: 1px solid #cccccc;
background-color:#cccccc;
}
.showpagePoint {
color:#333;
text-decoration:none;
border: 1px solid #cccccc;
background: #cccccc;
margin:0 3px;
padding:3px;
}
.showpageOf {
text-decoration:none;
padding:3px;
margin: 0 3px 0 0;
}
.showpage a {
text-decoration:none;
border: 1px solid #cccccc;
padding:3px;
}
.showpage a:hover {
text-decoration:none;
}
.showpageNum a:link,.showpage a:link {
text-decoration:none;
color:#333333;
}

Lalu letakkan kode berikut di atas kode tag </body>

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord =&#39;Previous&#39;;
var downPageWord =&#39;Next&#39;;
</script>
<script src='http://sites.google.com/site/t4belajarblogger/js_t4belajarblogger/blogger_navpage.js' type='text/javascript'/>
</b:if>

Klik simpan template. Sekarang silahkan untuk melihat hasilnya di blog anda...


Bagian2 yang bisa teman2 atur antara lain

var pageCount=5; = Fungsinya untuk mengatur jumlah halaman postingan yang berada di dalam satu tampilan ketika teman2 mengklik next atau pun nomor halaman.

var displayPageNum=5; = Junmlah angka/nomor halaman yang tampil pada fitur navigasi halaman.

var upPageWord =&#39;Previous&#39;; = Untuk tulisan "Previous" bisa teman2 ganti dengan kata2 lain seperti "sebelumnya" atau apa saja yg semisal.

var downPageWord =&#39;Next&#39;; = Sama halnya dengan kata Previous, kata "next" juga bisa teman2 ganti dengan kata2 lain seperti "selanjutnya" atau apa saja yg semisal.


--------------------------------------------------
NB:

Untuk menerapkan trik ini, usahakan jumlah postingan teman2 di atas 10 buah postingan atau lebih.
--------------------------------------------------



Semoga Bermanfaat []

Tags: membuat navigasi halaman, cara membuat navigasi untuk blogspot, agar blog blogger punya navigasi, cara mudah membuat navigasi, membuat navigasi dengan HTML, script navigasi Blogger