Skip to main content

Tips Mudah Membuat Page Navigasi




Jika anda perhatikan bagian paling bawah blog ini setelah kolom posting, anda akan temukan page navigation (seperti gambar di atas) yang berfungsi untuk memindah halaman demi halaman secara berurutan tanpa mengklik bagian label atau kategori. Ternyata, ada beberapa teman yang menanyakan cara memasangnya. Script ini saya dapatkan dari Mas Yuniarto Rahardjo, yang telah dimodifikasi dari blognya Mas Rias. Maka, saya ucapkan terima kasih untuk beliau berdua.

Ada beberapa pilihan untuk memasangnya. Untuk page navigation yang saya pakai, caranya relatif mudah. Kita hanya memasukkan script tersebut di Elemen Halaman blog, tanpa mengotak atik templet. Cara kedua, anda bisa menambahkan kode CSS di atas kode ]]></b:skin>. Akan, tetapi, metode ini cukup memakan waktu, karena kita harus mengedit templet dan menambahkan kode-kode tertentu. Maka, saya ingin berbagi cara yang pertama saja.

Oke, langsung saja pada langkah-langkah yang harus ditempuh.

1. Login ke account blogger dan tujulah ke tab Layout, kemudian klik link "Add Page Element".
2. Pilih HTML/JAVASCRIPT dalam window Page Element tersebut.
3. Download javascript code disini dan tuliskan (copy/paste) javascript kedalam window.
4. Setelah javascript tersebut ditambahkan, pindahkan (drag n drop) widget tersebut kebawah widget utama Blog Post.


5. Jangan lupa untuk save template / layout untuk menyimpan perubahan yang telah dilakukan.

Pada code hasil download di atas anda dapat merubah nilai berikut (berwarna merah) sesuai kebutuhan :

  • var pageCount = 5; angka "5" menujukan jumlah posting yang ditanpilkan dalam setiap page.
  • var displayPageNum = 3; angka "3" menunjukan banyaknya jumlah page yang ditampilkan diblog. Untuk lebih jelasnya silahkan dicoba untuk mengganti nilai-nilai tersebut sehingga perubahannya bisa diketahui langsung.

    Note : untuk melihat kode-kode warna html, silahkan klik di sini.


  • Comments

    1. @ Kang Jaloe ;

      Wah..sebuah kehormatan bagiku deh sudah kedatangan tamu istimewa. Kang Jaloe itu adalah salah satu blogger hacker yang saya kagumi. Saya banyak belajar html dari Kang Jaloe. Saya juga ikuti blog beliau.

      So, terima kasih banget Kang Jaloe...
      Salam akrab...

      ReplyDelete
    2. asyiikk jg nh (udh lama sehh)..tp skali2 boleh jg gw add in

      ReplyDelete
    3. @ Darkbahamut ;

      Yupz...thank's dah mo mampir dan kommen di blog pemula ini. Salam akrab...

      ReplyDelete
    4. wah ini dia info yang saya cari... thks buat infonya mas

      ReplyDelete
    5. @ Z4ro08 ;

      Makasih atas apresiasinya, Mas...
      Salam ...

      ReplyDelete
    6. oke...trima kasih artikelnya...

      ReplyDelete
    7. malem mas.bahauddin :)

      Bagi trik link animasi berubah warna warninya donk...pliz bgts :((

      ok sy tunggu responnya di :
      - hidayat64@gmail.com


      thx a'lot ;)

      ReplyDelete
    8. Sesama pemula saling membantu ya....he3
      Thanks untuk artikelnya.

      ReplyDelete
    9. dah lama nih nyari yg beginian, thak's a lot

      ReplyDelete
    10. mas, klo page yang dibuat kotak-kotak gtu, scriptnya kayak apa? mohon bantuannya, saya masih pemula, =)

      ReplyDelete
    11. mas caranya gimana biar page navigation nya jg ada di bawah komentar postingan??
      klo sudah bca pesan ini beritahu saya di blog saya ya mas..

      ReplyDelete
    12. @ riztee ;

      Anda bisa merubah kode warna pada script hasil download di atas. Sesuaikan dengan templet anda.

      @ f3hry ;
      Sya belum pernah mencoba meletakkan Pagination di bawah komentar. Sebab script tersebut tinggal copy paste pada page elemen di bawah postingan.

      Untuk lebih jelasnya, coba anda lihat di :
      http://www.dynamicdrive.com/dynamicindex17/virtualpagination.htm

      ReplyDelete
    13. mohon bimbingannya masih newbie nih

      ReplyDelete

    Post a Comment

    Kepada Sobat-Sobat sekalian silahkan komen Disini, Semuanya boleh komen, yang tua sampai muda bebas berkomen ria di bawah ini.

    Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

    Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

    Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

    Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia. Jika anda tidak punya blog/website, kolom URL boleh dikosongi.

    Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)

    Makacih ya atas komennya ...

    Popular posts from this blog

    HUMAN RELATION ; Perspektif Psikologi Humanistik, Fungsionalisme dan Behaviorisme (Sebuah Kajian Analitis-Interkonektif)*

    Pendahuluan
    Human Relation, merupakan hubungan atau kerjasama antara dua individu atau lebih, khususnya dalam status hubungan atau interaksi social. Buruk atau baiknya human relation dapat diukur dari adanya kepercayaan yang bersifat timbal balik antara satu orang dengan orang lain serta dari adanya sebuah penghormatan atau penghargaan dan rasa tolong menolong yang kokoh. Bukan menjadi keraguan lagi bahwasanya human relation menjadi suatu keinginan yang sangat primordial bagi setiap yayasan atau sebuah organisasi, bahkan menjadi syarat utama dari terealisasinya tujuan-tujuan serta pencapaian visi dan misi sebagai kunci kesuksesan organisasi pada umumnya.

    Human relation sering disebut juga dengan “interpersonal relation”, yaitu kerjasama sekelompok individu dari masyarakat social yang tumbuh dari adanya hubungan antara satu individu dengan individu yang lain. Interpersonal relation merupakan sebuah deskripsi yang jelas tentang tata pergaulan atau tingkah laku manusia dan karakteristik pr…

    Kumpulan Novel Jar (untuk HP Aplikasi Java)

    Bagi para novel mania, membaca novel tentunya adalah kesenangan tersendiri. Semacam interaksi personal dengan dunia imaji yang kerap menghentak-hentak ambisi. Di dunia maya, kita banyak menjumpai situs-situs yang menyediakan novel dengan berbagai format dan ekstensinya. Ada format PDF (portable document format), yang dapat dibuka dengan program Acrobat Reader atau sejenisnya. Ada juga yang dengan bentuk format htm, yang dapat dibuka dengan browsing atau internet eksplorer secara offline. Ada juga yang berbentuk format exe. Ada juga yang menggunakan windjvu-viewer (untuk membuka file extensi *.djv / *.djvu). Ada format "lit Viewer"(untuk membuka file extensi *.lit). Dan banyak "ada juga-ada juga" yang lain...

    Tapi, pada postingan kali ini, saya akan berbagi lagi dengan sobat sekalian tentang Novel HP (aplikasi java). So, bagi sobat yang punya hobbi ngoleksi novel, tetapi jarang online dan tidak punya komputer, jangan khawatir. Berkat kecerdasan teknologi, kita yang …

    Download Alfiyah MP3

    Di kalangan pondok pesantren, nama Ibnu Malik dan Kitab Alfiyah adalah dua entitas yang sudah tidak asing lagi, terlebih bagi pondok pesantren salaf yang setiap harinya bergumul dengan kitab kuning dan tata gramatika bahasa Arab (Nahwu & sharrof). Di pondok saya sendiri, Mambaul Ulum Bata-bata, Pamekasan, Madura, kitab Alfiyah Ibnu Malik menjadi Kitab standart acuan dalam pembelajaran Kaidah bahasa Arab, dan menjadi syarat pelulusan ke tingkat Aliyah B, yang orientasinya memang menitik beratkan pada kajian kitan klasik.

    Pada malam-malam tertentu, para santri diwajibakan membaca nadham (bait-bait) Alfiyah dengan bersama-sama, dengan lagu dan irama yang bermacam-macam. diharapkan, dengan tradisi pembacaan Alfiyah secara rutin dan intens, santri mamapu menhafal dan memahami isi kandungan kitab Alfiyah ini dengan baik dan mudah.

    Di era teknologi dan informasi yang serba canggih ini, kitab Alfiyah dan kitab-kitab kuning lainnya sudah tidak dipelajari secara manual dan klasikal, tetapi …