Baiklah untuk postingan kali ini kita akan membahas bagaimana cara membuat navigasi halaman menggunakan angka, berbeda dengan navigasi bawa'an/default dari template blogger
original yang hanya menampilkan sebuah link Older post dan Newer post
tetapi secara fungsi sama saja. perbedaannya terletak pada angka-angka
tersebut dengan demikian pengunjung akan merasa nyaman dan selain itu
blog juga akan terlihat lebih rapi...karena jumlah posting yang akan
kita tampilkan dalam tiap perhalaman bisa kita ubah suaikan dengan
keinginan kita.
Caranyapun cukup mudah karena saya sudah upload JavaScripnya khusus buat anda jadi tidak perlu pusing-pusing
ngelihat JavaScript yang ngejelimet karena tinggal copy paste
gitu...hehe... saya yakin anda pasti bisa menerapkannya. untuk contohnya
lihat gambar diatas atau pada blog ini
dibagian bawah posting itu ada angka-angka dalam beberapa tombol kotak!
itulah yang saya maksud dengan Navigasi halaman dengan angka!
Caranyapun cukup mudah karena saya sudah upload JavaScripnya khusus buat anda jadi tidak perlu
1. Login ke blogger anda!
2. Masuk ke Dasboard>>Rancangan>> Edit HTML (tidak perlu memberikan klik pada Expand template widget) kalau mau di klik juga tidak ada masalah, hehee
3. Cari kode ]]></b:skin> Kemudian Copy dan paste kode CSS berikut tepat diatas kode ]]></b:skin>
/* -- NUMBER PAGE NAVIGATION -- */4. Cari kode </body> kemudian Copy dan paste kode dibawah ini tepat diatas kode </body>
.showpageNum a{font:15px Arial,Verdana;padding:4px 8px;margin:0 4px;text-decoration:none;border:0 solid #333;background:#dfdfdf;color:#686868;border:1px solid #989898}
.showpageOf{margin:0 8px 0 0;color:#222;font:15px Arial,Verdana}
.showpageNum a:hover{color:#494949;background:#dfdfdf;border:1px solid #626262}
.showpageArea{margin:10px 0;font:15px Arial,Verdana;color:#111}
.showpagePoint{color:#434343;font:bold 15px Arial,Verdana;padding:4px 8px;margin:2px;border:1px solid #b6b5b5;background:#fff;text-decoration:none}
<!-- PAGE NAVIGATION START-->5. Sekarang cari 'data:label.url'
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord ='« ';
var downPageWord =' »';
</script>
<script src='http://u-sup.googlecode.com/files/page_num.js' type='text/javascript'/>
<!-- PAGE NAVIGATION END-->
6. Dan ganti kode langkah 5 dengan ini 'data:label.url + "?&max-results=7"'
7. Klik SIMPAN TEMPLATE silahkan lihat hasilnya!
Catatan :
Perhatikan pada kode yang dicetak
hijau itu dapat anda sesuaikan dengan keingin anda kode tersebutlah yang
menentukan berapa jumlah posting yang akan ditampilkan pada setiap
halamannya, contoh saya akan menampilkan 10 Posting dan 5 tombol angka
navigasi berarti kode saya sebagai berikut :
var pageCount=10;
var displayPageNum=5;
var displayPageNum=5;
Dan
untuk merubah Tampilan silahkan rubah kode CSSnya sesuai dengan selera
anda, jika merasa tampilannya kurang cantik menurut anda!
0 Response to "Cara Membuat Halaman Navigasi Dengan Angka"
Posting Komentar