BBM : D55 CB 98A
WA : 0853 2023 77xx
info@frosid.com

Cara Membuat Nomor Page Navigation di Blogger



Nomor navigasi halaman merupakan salah satu fitur yang mengesankan untuk membuat blog semakin menarik. Wordpress telah dahulu membuat numbered page navigation dengan nama wp-pagenavi yang dikembangkan oleh Laster Chan, kemudian menyusul Muhammad Rias (Techie Blogger) telah mengembangkan sistem navigasi halaman untuk blogger, tapi masih ada sedikit bug. Sehingga Abu Farhan telah mengembangkan dan melengkapai fitur navigasi halaman di blogger.

Masih bingung ya, seperti apa sih Nomor Navigasi Halaman itu, langsung saja liat screenshotnya dibawah ini:
Cara Membuat Nomor Page Navigation di Blogger

Langsung aja gunakan dan letakkan script berikut sebagai berikut langkah-langkahnya:

  1. Login ke Blogger.
  2. klik Template.
  3. Klik Edit HTML.
  4. Tidak usah cheklist Expand Template Widget ya..
  5. Cari kode seperti dibawah ini
  6. ]]></b:skin>

    Ganti dengan Kode ini:
    .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;
    }
    ]]></b:skin>
  7. Cari kode </body> dan ganti dengan Javascript dibawah ini:
  8. <!--Page Navigation Starts-->
    <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=5;
    var upPageWord =&#39;Previous&#39;;
    var downPageWord =&#39;Next&#39;;
    </script>
    <script src='http://makeuse.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
    </b:if>
    </b:if>
    <!--Page Navigation Ends -->
    </body>
  9. selesai

Anda perhatikan, ada beberapa kode yang dapat anda sesuaikan dengan keinginan sendiri.
var pageCount=5;
Kode ini menentukan jumblah posting yang akan di tampilkan per halaman.
var displayPageNum=5;
Kode ini menentukan jumlah nomor navigasi halaman tambahan yang akan ditampilkan pada halaman.
var upPageWord ='Previous';
var downPageWord ='Next';
Masing-masing kedua baris itu menentukan teks yang akan ditampilakan untuk halaman sebelum dan halaman berikutnya.

Edit Label
Sering terjadi masalah tampilan navigasi page menjadi tidak menarik di sini. Biasanya halaman label blogger hanya menampilkan 20 posting saja. Disini kita akan pangksa dengan nilai yang kami berikan untuk pageCount (posting per halaman). Di bagian ini kita edit template dengan cara klik Edit HTML dan checklist Expand Template Widget, kemudian cari kode:
'data:label.url'
Ganti kode tersebut (termasuk tanda ') dengan kode ini:
'data:label.url + &quot;?&amp;max-results=5&quot;'
5menentukan jumlah posting yang akan ditampilkan per halaman.
Sekarang bilamana template anda menggunakan widget phydeaux3, maka carilah kode:
a.href = &#39;/search/label/&#39;+encodeURIComponent(t);
Gantilah kode itu dengan kode ini:
a.href = &#39;/search/label/&#39;+encodeURIComponent(t)+&#39;?&amp;max-results=5&#39;;
5 menentukan jumlah posting yang akan ditampilkan per halaman.

Navigasi halaman sudah sempurna, sekarang bisa anda coba!

Baca Juga Artikel Terkait







Tinggalkan Komentar



12 Respones to "Cara Membuat Nomor Page Navigation di Blogger"

Netpreneurspot said...

Mantap gan..


11:16 PM
Rivaldo At Thariq said...

thx ya gan


saya coba dulu !!!!!!!


4:53 AM
Mochamad Muslih said...

Berhasil Mas Brooo, Matur Suwun


10:35 PM
Fahro said...

Coba ulangi berurut barangkali ada yang salah.

jam tangan original said...

mantap gan thanks banget tipsnya !


12:42 PM
jam tangan original said...

mantap gan, terima kasih banyak ya atas ilmunya.. :)


2:41 PM
Unknown said...

Kalau untuk blogskin gimana cara nya?


11:27 AM
Fahro said...

Tinggal edit css nya aja...

ChordIndonesia said...

gan, untuk menghilangkan tulisan Page (45) yg sperti contoh diatas caranya gimana ? Thanks..


9:57 AM
Fahro said...

Kalau mau edit itu lihat dlu script di http://makeuse.googlecode.com/files/blogger-page-navi.v1.js

Pratama Aditya said...

TQ gan ..
ini yg lagi saya cari :)


12:22 PM
Mohammad Taufan Pramono said...

work gan, Makasih Gan :)
Visit : http://taufanpramono.blogspot.com/


1:38 PM

Post a Comment

Previous Article Next Article
Home