Navigasi Halaman Menggunakan Javascript

image Tutorial pemasangan navigasi halaman ini sudah pernah saya bahas dulu, dengan cara meletakkan langsung seluruh kode di gadget. Namun masih saja ada yang kesulitan dengan panduan peletakkan navigasi halaman tersebut. Sekarang saya akan coba berikan sedikit tips yang berbeda dan tentunya dengan variasi bentuk yang lebih menarik. Saya tidak akan panjang lebar menjelaskan tentang pengertian navigasi halaman ini karena sudah pernah saya bahas sebelumnya.

 

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 pasti akan membuat sobat pusing karena kode ini sangat panjang, oleh karenya saya simpan saja di . Berikut cara pemasangannya.

 

  1. Setelah login di blogger, silahkan sobat 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.

 

Semoga berhasil ya !

Berlangganan artikel terbaru via Email
Artikel Lainnya :

23 comments

2 September 2010 03.52

Ini dia yang sedang aku cari....
Makasih sob...

3 September 2010 01.27

Nice post buddy. Really useful for us......

4 September 2010 08.15

Terima kasih mas atas tutorialnya, bisa diterapkan diblog say :D

silahkan kunjungi ya
http://iam.cahbag.us/

5 September 2010 21.03

saya sudah pakai mas sama templatenya juga hehhehee....nice tips..:)

8 September 2010 02.55

apa bedanya dengan pagenumber abu farhan...???

9 September 2010 06.22

manteb, tambah ilmu baru aku..

17 September 2010 14.22

nice post, visit me please...

18 September 2010 09.46

makasih ya ... memang mantap tutorialnya sob

banyak bgt ilmu yg saya dapat disini,apa lagi saya adalah seorang pemula,
thx a lot

19 Oktober 2010 23.01

Kenapa blog yang saya buat setiap kali saya buka munsul tulisan "TypeError: objPost is undefined"? Tolong bantu

9 Januari 2011 19.49

Seep markiseep...Top marko Top lah...Berhasil d blog saya...Thnks

25 Februari 2011 09.41

mantap mas tutorialnya....

27 Februari 2011 03.26

saya coba ya om

10 Maret 2011 09.59

mas kok g bisa y diterapin di blog saya? saya sudah pake yg widget n html ni tp g da yg bisa mas. tlong pencerahannya y mas. mas lihat saja dulu blog saya http://bluezone69.blogspot.com/ siapa tahu ada solusinya..

31 Maret 2011 22.25

Thanks gan!!! infonya bermanfaat banget buat blog saya... gak nyangka yang saya cari semua ada di sini!!!

10 April 2011 09.23

memang mantap artikelnya, mudah dalam penyampaian karena tidak njelimet bagi yang newbie..
terima kasih.

10 April 2011 09.24

benar benar mantap, harus gua bookmark alamat blog ini.... tanks.

13 Juli 2011 20.42

wah siap2 ngencengin helm buat ngacir k TKP nih gan :D haha

19 September 2011 07.33

kok pake yang ini juga ga bisa, kenapa ya...
mohon pencerahannya..

6 Oktober 2011 23.53

sudah saya coba duluan he... berhasil mas, thanks

22 Juni 2012 10.24

di coba yach n bantu doa maklum newbie

30 Juli 2012 06.17

wihhhh,cakep banget hasilnya,ini dia yg saya cari!
Saya udah pake berbagai tips dari blog lain tapi ga ada yg sukses,
makasih banget yaa,sukses selalu,ditunggu tips" berguna lain nya :D

http://www.advantoday.com/

7 Agustus 2012 09.55

siiip dah,,,,,,,,,,,,

Poskan Komentar

Reader Community

Recent Comments