Cara Membuat Nomor Page Navigation di Blogger
Nomor navigasi halaman merupakan salah satu fitur yang mengesankan untuk membuat blog semakin menarik. Wordpress telah dahulu membuat numbered page navigation dengan nama wp-pagenavi yang dikembangkan oleh Laster Chan, kemudian menyusul Muhammad Rias (Techie Blogger) telah mengembangkan sistem navigasi halaman untuk blogger, tapi masih ada sedikit bug. Sehingga Abu Farhan telah mengembangkan dan melengkapai fitur navigasi halaman di blogger.
Masih bingung ya, seperti apa sih Nomor Navigasi Halaman itu, langsung saja liat screenshotnya dibawah ini:
Langsung aja gunakan dan letakkan script berikut sebagai berikut langkah-langkahnya:
- Login ke Blogger.
- klik Template.
- Klik Edit HTML.
- Tidak usah cheklist Expand Template Widget ya..
- Cari kode seperti dibawah ini
- Cari kode </body> dan ganti dengan Javascript dibawah ini: <!--Page Navigation Starts-->
- selesai
]]></b:skin>
Ganti dengan Kode ini:
.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;
}
]]></b:skin>
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://makeuse.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
</b:if>
<!--Page Navigation Ends -->
</body>
Anda perhatikan, ada beberapa kode yang dapat anda sesuaikan dengan keinginan sendiri.
var pageCount=5;
Kode ini menentukan jumblah posting yang akan di tampilkan per halaman.
var displayPageNum=5;
Kode ini menentukan jumlah nomor navigasi halaman tambahan yang akan ditampilkan pada halaman.
var upPageWord ='Previous';
var downPageWord ='Next';
Masing-masing kedua baris itu menentukan teks yang akan ditampilakan untuk halaman sebelum dan halaman berikutnya.
Edit Label
Sering terjadi masalah tampilan navigasi page menjadi tidak menarik di sini. Biasanya halaman label blogger hanya menampilkan 20 posting saja. Disini kita akan pangksa dengan nilai yang kami berikan untuk pageCount (posting per halaman). Di bagian ini kita edit template dengan cara klik Edit HTML dan checklist Expand Template Widget, kemudian cari kode:
'data:label.url'
Ganti kode tersebut (termasuk tanda ') dengan kode ini:
'data:label.url + "?&max-results=5"'
5menentukan jumlah posting yang akan ditampilkan per halaman.
Sekarang bilamana template anda menggunakan widget phydeaux3, maka carilah kode:
a.href = '/search/label/'+encodeURIComponent(t);
Gantilah kode itu dengan kode ini:
a.href = '/search/label/'+encodeURIComponent(t)+'?&max-results=5';
5 menentukan jumlah posting yang akan ditampilkan per halaman.
Navigasi halaman sudah sempurna, sekarang bisa anda coba!
Tags: Blogging
Subscribe to:
Post Comments (Atom)
Tinggalkan Komentar
12 Respones to "Cara Membuat Nomor Page Navigation di Blogger"
Mantap gan..
11:16 PM
thx ya gan
saya coba dulu !!!!!!!
4:53 AM
Berhasil Mas Brooo, Matur Suwun
10:35 PM
Coba ulangi berurut barangkali ada yang salah.
mantap gan thanks banget tipsnya !
12:42 PM
mantap gan, terima kasih banyak ya atas ilmunya.. :)
2:41 PM
Kalau untuk blogskin gimana cara nya?
11:27 AM
Tinggal edit css nya aja...
gan, untuk menghilangkan tulisan Page (45) yg sperti contoh diatas caranya gimana ? Thanks..
9:57 AM
Kalau mau edit itu lihat dlu script di http://makeuse.googlecode.com/files/blogger-page-navi.v1.js
TQ gan ..
ini yg lagi saya cari :)
12:22 PM
work gan, Makasih Gan :)
Visit : http://taufanpramono.blogspot.com/
1:38 PM
Post a Comment