1.Silahkan Login dulu dengan ID sobat
2.click menu Layout dan Edit HTML dan untuk menghindari kejadian yang tak diinginkan backup template sobat.
3.Cari kode berikut..agar lebih mudah Gunakan Ctrl+F
]]></b:skin>
4.Kemudian masukan script dibawah ini tepat di atas script yang kita cari tadi.
.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;
}
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;
}
Untuk kode diatas digunakan untuk tampilan viualnya silahkan sobat acak sendiri..
5. Selanjutnya script dibawah ini
</body>
6. Kemudian pastekan script berikut tepat di atas script diatas
<b:if cond='data:blog.pageType != "item"'>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
<script type='text/javascript'>
var pageCount=5;
var displayPageNum=5;
var upPageWord ='Previous';
var downPageWord ='Next';
</script>
<script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
Kode pageCount di atas menunjukkan jumlah tulisan/posting/artikel yang akan ditampilkan dalam satu halaman, sedangkan displayPageNum menunjukkan jumlah nomor halaman yang ditampilkan (jika diisi dengan angka 7 berarti nomor halaman yang muncul ada 8, ditambah satu untuk halaman satu). upPageWord mengarahkan kita ke halaman yang lebih baru (tulisan Previous bisa diganti sesuai dengan keinginan sobat), dan downPageWord mengarahkan ke halaman yang lebih lama (tulisan Next bisa diganti sesuai dengan keinginan sobat).
7.Setelah itu kita simpan template kita.
8.Terakhir kita cari script berikut ini (jangan lupa untuk mengklik Expand Widget ).
'data:label.url'
Ganti script Diatas dengan script di bawah ini.
'data:label.url + "?&max-results=5"
Fungsi dari script ini adalah untuk mengganti default (standar) Blogspot yang akan menampilkan 20 posting setiap halamannya, karena pada pageCount di atas kita isi 5, maka pada script ini pun juga diisi dengan 5 (menampilkan 5 posting per halaman).
Simpan template sobat, dan kita coba lihat hasilnya dengan membuka blog sobat. Jika berhasil maka pada halaman Home blog kita akan muncul nomor halaman setelah posting terakhir (paling bawah)
seperti dibawah ini :
Dan selamat mencoba….!
Info : ariwijaya.com dan Script diatas dibuat oleh: Abu Farhan dan Muhammad Rias
Lanjutkan>> “Cara Membuat nomor urut halaman blog(Navigasi Page Number)” »»
