Sabtu, 08 Januari 2011

Membuat Navigasi Next Page Number Atau Halaman Berurut Di Blogspot

Masih seputar dunia blogspot, postingan kali ini akan membahas cara membuat navigasi halaman berurut atau next page number 1 2 3. Next page number terletak di bawah posting. Atribut ini hanya terlihat pada halaman awal atau home page saja, jika kita mulai masuk pada postingan maka atribut next page number tidak akan muncul. Dengan atribut ini di harapkan dapat memudahkan pengunjung untuk  menelusuri halaman demi halaman blog kita.

Pemasangan navigasi next page number atau halaman berurut akan mucul seperti gambar di bawah ini:


Atau untuk lebih jelasnya silahkan klik link ini

Berikut ini Adalah cara pemasangannya:
  • Login ke bloger.com dengan akun anda.
  • Klik Design kemudian Edit HTML.
  • Jangan lupa klik Download Full Template.
  • Centang Expand Widget Templates.
  • Cari Kode berikut  ]]></b:skin> ( Gunakan ctrl + f untuk memnudahkan pencarian )
  • Copy kode dibawah ini dan letakan di atas ]]></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;
}

  • Selanjutnya cari kode </body>
  • Jika sudah ketemu copy paste script kode di bawah ini dan letakan ditas </body>

<b:if cond='data:blog.pageType != &quot;item&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://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js' type='text/javascript'/>
</b:if>
  • Langkah terakhir carilah kode
'data:label.url'
  • Jika sudah ketemu hapus kode tersebut dan gantilah dengan kode di bawah ini:
'data:label.url + &quot;?&amp;max-results=5&quot;'
  • Simpan template dan Anda bisa lihat hasilnya sekarang

Semoga bermanfaat
Sumber Kode script dari http://ariawijaya.com

40 komentar:

  1. informasi yang sangat bermanfaat segera kami coba

    BalasHapus
  2. wah ini yang ane cari-cari gan.
    trims dah share..

    BalasHapus
  3. Terima kasihh,, info berguna bgt untuk newbie dunia maya seperti saya ini.
    oh ya,, kunjungi juga blog saya yah mas,,
    http://aikoponsel76.blogspot.com
    blog dunia ponsel,terimakasih ^^

    BalasHapus
  4. dari kemarin saya pengen yang kayak gni.
    oke ke tkp dulu bang kita implementasikan langsung

    BalasHapus
  5. sudah di praktek mas, berhasil terimakasih ya ilmunya,sukses selalu

    BalasHapus
  6. salam sukses mas, terimakasih ilmunya dan saya sangat terinspirasi dengan berkunjung ke blog mas ini. sukses

    BalasHapus
  7. nah,ini dia yg dicari...akhirnya ktmu jg yg cocok...thanks infonya,keep blogging!

    salam Exzhadhian's Blog

    BalasHapus
  8. Terima kasih atas artikel ini, amat menarik sekali. =)

    BalasHapus
  9. makasih cuy, sekarang pengetahuan saya jadi bertambah...mga sukses truz.

    BalasHapus
  10. salam kenal .
    nice post .
    thanks .

    BalasHapus
  11. thanks boss infonya lagi saya cari2 nih..Salam kenal dan sekalian izin bookmark dan saya follow mas.

    BalasHapus
  12. thx kang, sudah saya coba cara diatas dan berhasil.. thx, thx...

    BalasHapus
  13. mantaaaaaaaaaaaaaap bener

    BalasHapus
  14. ok trims infonya .... bagus artikelnya

    BalasHapus
  15. wah..gimana ya cara mambuat ...navgaisi kasi tau dong cara membuat nya ........,?

    BalasHapus
  16. oo gtu ya caranya,,boleh deh saya coba makasi ya gan atas infonya...

    BalasHapus
  17. waah saya jadi dapet ilmu nih
    langsung ajah deh saya coba..
    makasih infonya,,

    BalasHapus
  18. artikel yang bagus dan bermanfaat sekali..

    BalasHapus
  19. mantabb.. teknik perbanyak page view secara cepat!!

    BalasHapus
  20. navigasi ny mudah bgi pengunjung untuk melihatny..

    BalasHapus
  21. mantab gan sangat berguna, sekarang saya sudah memakainya.
    THUMBUP 5

    BalasHapus
  22. waah saya jadi dapet ilmu nih
    langsung ajah deh saya coba ya..
    makasih infonya,,

    http://job.lowongan-kerja.us/

    BalasHapus
  23. 'data:label.url'
    kode diatas banyak ak liat gan,,..
    trus harus hapus yg mana nech.. bingun gan....
    mohon pencerahannya

    BalasHapus
  24. to senirupa: gak usah hiraukan yang itu, langsung aja save templatenya.

    BalasHapus
  25. terima kasih gan ,, atas tutornya....
    www.adybakom.blogspot.com

    BalasHapus
  26. Nice info :D
    Jalan lupa nerkunjung balik ya funedition24.blogspot.com

    BalasHapus
  27. informasi yang bermanfaat,,
    lagsung akan saya coba

    BalasHapus

Terimakasih telah bersedia berkomentar. Komentar SPAM terpaksa saya hapus. terimakasih