Pada template sobat pasti ada Page Navigation, tapi biasanya bentuknya standart, hanya berupa tulisan seperti
Sepertinya bentuk Page Navigation seperti itu kurang praktis digunakan oleh pengunjung, karena pengunjung tidak bisa menjelajah dengan cepat di blog sobat.
Seperti gambar diatas Page 123 Navigation yang dimaksud judul diatas, seperti layaknya di Wordpress.
Script ini sudah dicoba dan berhasil dengan sukses.
Jika Sobat ingin memasang Page 123 Navigation seperti gambar diatas,
Berikut cara memasangannya :
Login ke Blogger
Klik Rancangan → Elemen Laman → Tambah Gadget yang berada di bawah Posting Blog → HTML/JavaScript
Kemudian Copy Paste kode berikut kedalamnya
<style type='text/css'>
.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;
}
</style>
<script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script>
<script style='text/javascript' src='http://imtikhan.googlecode.com/files/blogger-page-nav-v2.js'></script>
.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;
}
</style>
<script style='text/javascript'>var pageCount=5;var displayPageNum=5;var upPageWord="Previous";var downPageWord="Next";</script>
<script style='text/javascript' src='http://imtikhan.googlecode.com/files/blogger-page-nav-v2.js'></script>
jika sudah selesai SIMPAN dan lihat hasilnya.
jika sobat tidak mau susah payah Edit HTML
ada cara yang lebih mudah dan simpel
silahkan klik link berikut http://bloggerplugins.org/
Lalu sobat cukup dengan mengganti tulisan Previous (Sebelumnya) dan Next (Selanjutnya), kemudian sobat klik Customize dan Add Widget to my Blog.
Kemudian drag dan drop ke Elemen Laman yang terletak dibawah Posting Blog.
Lalu SIMPAN dan lihat hasilnya.
Semoga bermanfaat
No comments:
Post a Comment