content top

Membuat Numbered Page Pada Page Blog Kamu

Sebenarnya trik kali ini bisa dibilang trik yang lumayan zadul juga sih sebab trik ini udah ada dari dulu.
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 iniOkay 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 != &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://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 + &quot;?&max-results=5&quot;'
  • Simpan Template dan selesai!
Coba kamu cek deh! kalau gagal coba kamu ulangi! siapa tahu ada yang terlewat
Eah met beraktivitas kawanku semua!!!!

content top