Blog Khusus Membahas Tentang Tutorial, Tips dan Trik Seputar Blog Di BlogspotDotCom


3 Sep 2010

Cara Membuat Navigasi Page Number Di Blogspot

| 3 Sep 2010
Posting again gan... kali ini saya akan membahas bagaimana cara membuat
Membuat Navigasi Page Number Di Blogspot, Pada template Blogspot umumnya menggunakan navigasi Previous dan Next/Posting lebih baru dan Posting Lama yang ada pada bagian bawah postinagn blog, fungsinya yaitu membantu pembaca/pengunjung untuk berganti halaman menuju tulisan sebelum atau setelah dari tulisan yang sedang dibaca tanpa ada keterangan nomor halaman.Contohnya ada jg pada blog saya ini, Biar tidak bingung saya kasih contoh gambar dibawah ini.

Lihat Gambar


Nah, begitulah kiranya yang akan saya buat, Berikut adalah langkah-langkah membuat navigasi nomor halaman (kode script modifikasi ini dibuat oleh Abu Farhan dan Muhammad Rias).

Ikuti langkah-langkah berikut :

1. Seperti biasa, Login ke blogger sobat

2. klik Tata Letak dan pilih Edit HTML

3. Kalau sudah, klik Expand Template Widget

4. Lalu cari kode berikut (Ctrl + F) : ]]></b:skin>


5. Kemudian masukan kode script dibawah 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;
}

6.
Selanjutnya kita cari lagi kode berikut: </body>

7. Kemudian masukan kode script berikut tepat di atas kode:
</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>


Keterangan :
Kode pageCount di atas menunjukkan jumlah tulisan/posting/artikel yang akan ditampilkan dalam satu halaman.
Kode displayPageNum menunjukkan jumlah nomor halaman yang ditampilkan (jika diisi dengan angka 7 berarti nomor halaman yang muncul ada 8, ditambah satu untuk halaman satu). Kode upPageWord mengarahkan kita ke halaman yang lebih baru (tulisan Previous bisa diganti sesuai dengan keinginan).
Kode downPageWord mengarahkan ke halaman yang lebih lama (tulisan Next bisa diganti sesuai dengan keinginan).

8. Terakhir kita cari kode script berikut: 'data:label.url'

9. Gantilah kode script diatas dengan kode dibawah ini:

'data:label.url + &quot;?&amp;max-results=5&quot;'


Keterangan :
Fungsi dari script ini adalah untuk mengganti default (standar) Blogspot yang akan menampilkan 20 posting setiap halamannya, karena pada pageCount di atas kita isi 5, maka pada script ini pun juga diisi dengan 5 (menampilkan 5 posting per halaman).

10. Simpan template, dan lihat hasilnya.


Semoga bermanfaat.

Related Posts

12 komentar:

  1. good boz
    thanks.....
    xeonkbalap.blogspot.com

    BalasHapus
  2. ga bisa masukinnya :( ga kebaca aja...

    BalasHapus
  3. hahaha... ini kayaknya cuman copy paste aja.. hahahaha

    BalasHapus
  4. sirik tanda tak mampu... wkwkkwkwkw

    BalasHapus
  5. Yang Gak Kebaca Yang mana Sob ??
    Bisa Di perjelas lagi gak pertanyaanya ??

    BalasHapus
  6. Mantaffff sob ...! dh di coba en berhasil ... Siip!

    BalasHapus
  7. bagus infonya thanks & dah nyoba berhasil ok

    BalasHapus
  8. -bismillah-

    Mau Bertanya nih :) , semoga berkenan untuk menjawabnya.

    Pada Kode Terakhir, No.8 yakni mengganti kode ini = data:label.url'

    di template yang saya miliki, kode ini data:label.url' , lebih dari satu, apakah berarti semua kode itu , saya ganti dengan kode yang ini 'data:label.url + "?&max-results=5"'

    Terima Kasih sebelumnya :)

    BalasHapus
    Balasan
    1. wah sama masalahnya mas gan... ane juga bingung, mohon pencerahanya dari para suhu

      Hapus
  9. om,, saya pkai template zoom magazine v2.. emang bner page number ny g'ada... tapi waktu ane tambahin script diatas tetep g'bisa.. ane bingung waktu dsini : 'data:label.url' :... ditemplate ane ada 3.. ane dah coba diganti 1 persatu, tetep g'bisa.. ane ganti smua : 'data:label.url' : nya, tetep jga g'bisa.. Ada saran please help -_-' cek my blog di sini om

    BalasHapus
  10. gan... script http://blogergadgets.googlecode.com/files/blogger-page-navi.v1.js rusak T_T
    http://www.animesubscorner.com/

    BalasHapus

Catatan:
Link hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS DI SINI...</i>