Blog Pak Asmuri,S.Pd

Friday, 14 December 2012

Cara Pasang Nomor Navigasi di Blog


Cara Mudah Membuat Navigasi Nomer Halaman Blog

Navigasi Nomor Halaman pada Blog, yap.. itu yang akan Kamu Klik share pada postingan kali ini.
Navigasi Nomor Halaman pada Blog atau yang biasa yang disebut Page Number adalah urutan nomor-nomor halaman pada blog kita. Tampilan Page number yang bakal Kamu Klik share seperti ini sob:


Gimana tampilannya ? Tentunya navigasi halaman bernomer atau page number ini terlihat lebih elegant
dan profesional dengan menampilkan juga total page yang ada.
Buat kamu yang sudah bisa edit css, bisa langsung edit sendiri tampilannya. Tapi tanpa di edit sudah bagus kok, terlihat lebih profesional dari pada tampilan "Older Post" atau "Posting Sebelumnya" dll. wkwk..
Bagaimana cara membuat navigasi nomer halaman blog di blogger?
Yuk langsung saja ikuti tutorialnya dibawah ini:
  • Login ke blog kamu  kemudian menuju halaman Design dan Edit HTML, jangan lupa di back up dulu templatenya untuk keamanan kalo terjadi error gitu, tapi yaa gak bakal koq.
  • Cari kode ]]></b:skin> lalu paste Css di bawah ini 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;
    }

  • Langkah selanjutnya kamu cari kode </body> , kalau sudah ketemu paste kode berikut ini tepat di atas kode </body>

    <!--Page Navigasi-->
    <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=6;
    var displayPageNum=5;
    var upPageWord =&#39;Previous&#39;;
    var downPageWord =&#39;Next&#39;;
    </script>
    <script src='http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
    </b:if>
    </b:if>
    <!--Page Navigasi -->


    Keterangan: Kamu bebas mengubah tulisan yang saya kasih warna merah, angka 6 adalah jumlah posting yang tampil tiap halaman sedangkan yang 5 adalah tombol navigasi yang tampil. Next adalah text untuk ke halaman selanjutnya, sebalikanya Previous untuk kembali kehalaman sebelumnya.
  • Silakan ganti Kata Next menjadi Selanjutnya   Previous Menjadi  Sebelumnya
  • Simpan template dan lihat hasilnya :).
  • Jika Postingan ini bermanfaat bagi anda  Tinggalkan jejak dengan menuliskan komentar yang santun tentunya ...terima ksaih.
Gampang banget kan ? Naah sekian tutor blog cara membuat Navigasi Nomor Halaman pada Blog ini.. sapai jumpa di tutor blog berikutnya :) salam..
Reaksi:

4 komentar:

  1. Dari Semua Tutorial yang ada satupun belum ada yang bisa kenapa yach..?? pedahal caranya sudah benar dengan yang ada di tutorial..

    ReplyDelete
    Replies
    1. @Suwardi cah ganteng jika anda membuka tulisan anda dalam bentuk HTML pasti akan banyak kode yang aneh ,tetapi jika di tampilkan dalam bentuk normal atau tampilan web sebenarnya tentu kita tidak akan temui Kode seperti ini ]]> atau ni bahasa html.jika anda memakai layanan blogspot.com untuk mencari kode tersebut anda harus masuk ke editor halaman blog anda dan cari HTML lalu Klik dan untuk menampilkan tulisan sebenarnya Klik Compose anda dapat menampilkan HTML blog anda ikuti cara tersebut di atas bisa kok dan blog ini menerapkan cara diatas
      selamat mencoba.

      Delete
    2. makasi gan langsung ke tkp dan berhasil, sukses selalu utk mas asmuri :) http://ivanafx.blogspot.com

      Delete
    3. Ivan@ Selamat berkarya yang ada di hal blog ini silakan di Copas untuk tambah ilmu..selamat berkarya.

      Delete

Tinggalkan Komentar anda di sini sebagai tanda anda telah mampir
terima kasih atas Kunjungannya
Salam Pertemanan dari Asmuri ,S.Pd

Kumpulan Poto





































































































Materi Penting Untuk Guru