Apa itu Numbered Page Navigation?
Coba kamu lihat pada daerah postingan bagian bawahpada Blog kamu!
ada sebuah menu navigasi yang akan menuntun pengunjung ke postingan berikutnya kan?
nah itulah yang disebut dengan Page Navigation
Lalu pada post kali ini kita akan mencoba untuk membuat Page Navigation dengan menampilkan angka yah kurang lebih seperti di bawah ini
Okay langsung aja deh ke tutorialnya!
- Pertama masuk dulu ke Blogger lalu menuju ke "Rancangan" dan "Edit HTML"
- Copy kode CSS dibawah ini dan paste sebelum kode ]]></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;
}
- Silahkan edit CSS tersebut sesuai kebutuhan!
- Lalu langkah berikutnya adalah memasukkan script berikut sebelum tag </body>
<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>
- Kode hijau adalah jumlah halaman yang ditampilkan, kode berwarna merah adalah kode banyaknya angka yang ditampilkan, dan yang biru adalah kata/teks yang keluar pada menu navigasi
- Kamu simpan dulu template kamu
- Tunggu! belum selesai! kamu tandai "Expand Widget Template"
- Cari kode 'data:label.url' dan ganti dengan
'data:label.url + "?&max-results=5"'
- Simpan Template dan selesai!
Eah met beraktivitas kawanku semua!!!!