Membuat Navigasi Halaman dengan Javascript di Blog

Page Number atau Navigasi Halaman dengan menggunakan nomor atau angka adalah sebagai alat navigasi yang berfungsi selain dapat mempercantik tampilan halaman utama juga dapat memudahkan pengunjung dalam menjelajahi content sebuah website atau blog. Lihat contohnya pada halaman utama blog saya ini, kira-kira tampilan seperti pada gambar di samping.

Kode css dan javascript ini saya ambil dari blog dengan bentuk yang sama persis. Tapi jangan menelan mentah-mentah kode css yang ada karena sobat bisa kreasikan sesuai dengan warna background blog sobat. Jika kode script ini saya pasang langsung di template pasti akan membuat sobat pusing karena kode ini sangat panjang, oleh karenya saya simpan saja di google sites. Berikut cara pemasangannya.
  1. Setelah login di blogger, silahkan anda klik Rancangan.
  2. Kemudian klik tab Edit HTML.
  3. Untuk radio button Expand Template Widget tidak usah di klik karena akan menambah pusing nantinya.
  4. Letakkan kode css berikut ini sebelum kode ]]></b:skin>
    .showpageNum a {
    color:#FFF;padding:4px  10px;
    margin:0 2px;
    text-decoration:none;
    -webkit-border-radius:2px;-
    moz-border-radius:2px;
    background:#848484
    }          
    .showpageOf {
    color:#222;
    margin:0 6px 0 0
    }           
    .showpageNum a:hover {
    background:#222;
    color:#FFF
    }          
    .showpagePoint {
    color:#FFF;
    text-shadow:0 1px 2px #333;
    padding:4px  10px;
    margin:0 2px;
    -webkit-border-radius:2px;
    -moz-border-radius:2px;
    background:#222;
    text-decoration:none
    }
  5. Dan letakkan kode berikut sebelum </body> 
    <script  type='text/javascript'>        
    var  home_page=&quot;/&quot;;         
    var  urlactivepage=location.href;         
    var  postperpage=10;         
    var  numshowpage=7;         
    var upPageWord  =&#39;&#9668;&#39;;         
    var downPageWord  =&#39;&#9658;&#39;;         
    </script>         
    <script  src='http://miscah.googlecode.com/files/pagenav.js'  type='text/javascript'/>
  6. Kemudian Simpan Template.
Keterangan :
  • var postperpage=10; adalah jumlah postingan dalam satu halaman, sesuaikan dengan jumlah postingan sobat, jika jumlah postingannya 5 maka ganti angka tersebut dengan angka 5.
  • var numshowpage=7; adalah jumlah tombol navigasi dalam satu halaman.

Jika temen-temen tertarik silahkan dicoba, tutorial ini saya dapat dari mas Doddy Farial. Terima kasih kepada Mas Doddy semoga blognya tambah ramai pengunjung.

Post a Comment