Jumat, 17 Mei 2013

Cara Membuat Navigasi Nomor Halaman di Blog

Untuk memudahkan pengunjung menjelajah isi blog kita, memang dibutuhkan navigasi. Salah satunya adalah navigasi berbentuk nomor halaman. Kalau tidak tau, apa itu? Lihat saja di homepage http://ipitik.blogspot.com/ terus lihat ke bawah. Ada tulisan next, prev, dan pages. Itulah yang namanya Navigasi Nomor Halaman.

Kalau dalam bahasa inggrisnya "numbered page navigation". Maka dari itu, mari kita mulai tutorial cara membuat navigasi nomor halaman di blog blogger atau blogspot. Istilah amburadulnya yaitu, cara membuat page navigation di blog. Caranya cukup mudah, tapi agak sulit, makanya silakan ikuti petunjuk satu-persatu dan jika ada kebingungan, jangan ragu untuk bertanya melalui komentar.

  1. Login ke Blogger Anda
  2. Masuk ke Menu Template
  3. Pilih Edit HTML.
  4. Lalu cari kode ]]></b:skin> (untuk mempermudah pencarian gunakan CTRL+F)
  5. Silahkan Anda copy kode CSS Page Navigation di bawah ini dulu, kemudian paste tepat di atas kode ]]></b:skin>
    .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;
    }
  6. Jika sudah, cari lagi kode </body>. Lalu masukkan script berikut tepat di atas </body>.
    <b:if cond='data:blog.pageType != &quot;error_page&quot;'>
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
    <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
    <script type='text/javascript'>
    var pageCount=5;
    var displayPageNum=3;
    var upPageWord =&#39;Prev&#39;;
    var downPageWord =&#39;Next&#39;;
    </script>
    <script src='http://pitik.googlecode.com/files/blogger_pagenavi_min.js' type='text/javascript'/>
    </b:if></b:if>
    </b:if>
    Lihat var pageCount=5; angka 5 menunjukkan jumlah posting yang ditampilkan dalam laman utama. Sesuai yang sama dengan Menu - Setelan - Pos & Komentar
    Kemudian jika var displayPageNum=3; menunjukkan banyak nomor halaman yang ditampilkan
  7. Simpan, dan lihat hasilnya! :D

Mudah sekali kan? Ya memang begitulah cara membuat navigasi nomor halaman di blog blogger atau blogspot. Semoga bermanfaat, dan kalau ada bingung2, jangan ragu untuk tanya-tanya melalui kolom komentar di bawah :p

Anda sedang membaca artikel dengan judul "Cara Membuat Navigasi Nomor Halaman di Blog". Anda boleh menyebarluaskannya atau mengcopy paste-nya jika artikel sangat bermanfaat bagi teman-teman anda, namun jangan lupa untuk meletakkan link menuju artikel ini sebagai apresiasi kepada adanya blog ini. Saya sudah sediakan:
Pengunjung yang baik selalu meninggalkan komentar :)

Artikel Terkait Tutorial Blog

28 komentar:

  1. Perlu dicoba nih mas, ini yang saya cari-cari hehe... Makasih tutorialnya :)

    BalasHapus
  2. thanks mas.,. manteb hsilnya

    BalasHapus
  3. Terima kasih sharingnya, izin mencoba dulu kk

    BalasHapus
  4. mantap gan

    http://prediksibola888.blogspot.com/2013/08/cara-membuat-nomor-halaman-blog.html

    BalasHapus
  5. ko ga sesuai mas tampilannya salahnya dimana yah mas, /body.nya ga ketemu yang seperti ini.. info lagi dong mas..

    BalasHapus
  6. sudah lama sy mencari yang beginian...makasih gan...udah sy praktekin di blog saya

    BalasHapus
  7. Terpasang sempurna gan ... thanks ... Dan senang sekali jika agan visit back

    BalasHapus
  8. Komentar ini telah dihapus oleh pengarang.

    BalasHapus
  9. HASILNYA TERBAIKKK!!!!!
    siipp mantepp, makasih gan.

    BalasHapus
  10. makasih ya mas atas tutornya, akan saya coba memasang nomer halaman ini di blog saya :)

    BalasHapus
  11. mantap gan, terima kasih banyak ya atas ilmunya..

    BalasHapus
  12. Maaf bos, di blog saya ini tidak bisa digunakan, bisa tolong di cek?

    BalasHapus
  13. mantap cui work 100%
    kunjungi blog aqu juga
    http://kutuitanyung.blogspot.com/

    BalasHapus
  14. keren, dah ane praktekan...makasih yua

    BalasHapus
  15. alhamdulillah berhasil. terimakasih atas ilmu yang telah dibagikan :)

    BalasHapus
  16. Thx Gan informasinyaa
    mau dicobaiin nich

    BalasHapus
  17. thanks ya gan... boleh ane coba :D

    BalasHapus
  18. Amat sangat membantu gan.. ane tunggu artikel-artikel berikutnya

    BalasHapus
  19. mantap gan, terima kasih banyak ya atas ilmunya..

    BalasHapus
  20. langsung coba, alhamdulilah well done..! nomor muncul di home/beranda. thx bro .. pengin yg muncul di tiap label spt punya mas yaitu saat buka Tutorial Blog pd bagian paling bawah muncul navigasi nomornya ... keren tuh, bgmn caranya? thx again yaaa

    BalasHapus
  21. Thanks gan atas sharenya
    http://satrialarangan.blogspot.com

    BalasHapus
  22. Terima Kasih Banyak Mas BROOOOOOO !!!

    BalasHapus
  23. Terima kasih atas infonya mas, dan sangat membantu sekali buata saya, dan kunjungi juga blog saya http://www.wartasahaja.com/

    BalasHapus