Membuat Navigasi Nomer Halaman Blog untuk Blogger

Membuat Navigasi Nomer Halaman Blog untuk blogger / blogspot. Navigasi nomer halaman blogger ini intinya sebagai pengganti dari blog pager. Tentunya navigasi halaman bernomer ini terlihat lebih elegant dan profesional dengan menampilkan juga total page yang ada. Lihat contohnya di bawah ini.
Membuat Navigasi Nomer Halaman Blog
Lihat juga contohnya pada blog Template Blogger, nah kalau yang ini beda lagi desainnya hehe. Buat anda 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. Bagaimana cara membuat navigasi nomer halaman blog di blogger? yoi lanjut baca tutorialnya di bawah ini.

Cara Membuat Navigasi Nomer Halaman Blogger

  • Login ke blog anda  kemudian menuju halaman Design dan Edit HTML, jangan lupa di back up dulu templatenya untuk keamanan soalnya akhir akhir ini sering error blogger.
  • 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 anda 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 -->
Simpan template dan lihat hasilnya :).

Keterangan :
Anda bebas mengubah tulisan yang saya kasih warna hijau, 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.

Membuat Navigasi Nomer Halaman Blog

Cara membuat Navigasi Nomer Halaman Blog untuk blogger ini di dapat dari jalan jalan tadi ke blog lain hehe. Thanks bloggerplugin yang sudah posting tutorial ini. Oh ya buat anda yang males mau edit HTML atau bingung dengan cara yang saya kasih di atas, bisa langsung add widget navigasi halaman untuk blogger di bawah ini.

Tambahan :
Untuk menyesuaikan Tampilan pada label, silahkan cari kode
'data:label.url' dan ganti dengan kode 'data:label.url + &quot;?&amp;max-results=5&quot;'
Nah angka 5 di sana samakan dengan Pagecount pada kode Navigasi. Semoga sukses

54 comments:

Amri MF mengatakan...

kea wp-pagenavi yak...

BamZ Gz mengatakan...

@Amri MF: ho oh gan hehee

ash mengatakan...

berhasil sob,
thx for info

BamZ Gz mengatakan...

@ash: sama sama sob :)

asroma kp mengatakan...

Tanya bro, kalo kita edit html (utk pasang keyword, script, meta tag dsb) via hape koq slalu gagal yo? Dah gak cukup buat nambah karakter. Ada solusi?

BamZ Gz mengatakan...

@asroma kp: walah, saya g pernah coba pake hp gan, hehe

Panji mengatakan...

Thanks gan

BamZ Gz mengatakan...

sama sama kawan :)

LEMBAGA PENDIDIKAN KETRAMPILAN mengatakan...

terima kasih sdh bagi2 ilmunya..........

hardisport mengatakan...

kalo menampilkan seluruh isi label tapi formatnya dengan navigasi nomor halaman kaya gini juga gimana ? bukan di halaman utamanya, tapi pas kita klik LABEL A, isi label A banyak... dan tampilannya kaya gitu juga, gimana caranya ??

asa 2009 mengatakan...

aq kok g bisa ea gan? apa pengaruh template yang memang g bisa di ubah yea???

bintangindonesia mengatakan...
Komentar ini telah dihapus oleh administrator blog.
muti mengatakan...

matur nuhun pak............

Rossi Agisti mengatakan...

makasih yaa pak ;)

senirupa mengatakan...

ak dah praktekin mas.. tapi ko cuma halaman depan aja yg berubah ya.. truuss page 2 dan seterusnya masih model bawaan blog,.. mohon pencerahannya..

Admin Ovoo mengatakan...

gan,Punya ane kok gak bisa keluar ya? saya sudah mengikuti langkah-langkah di atas secara teliti , mohon bantuannya gan >> lihat blog saya ini gan >> http://blogovoo.blogspot.com thanks Gan!

BamZ Gz mengatakan...

@senirupa: jumlah posting yang tampil di halaman blog di sesuaikan dengan var pageCount=..;

ke halaman setting > formating

BamZ Gz mengatakan...

@Admin Ovoo: biasanya lancar2 saja mas, coba lagi mas

hardisport mengatakan...

punya saya belum ditanggapi :
kalo menampilkan seluruh isi label tapi formatnya dengan navigasi nomor halaman kaya gini juga gimana ? bukan di halaman utamanya, tapi pas kita klik LABEL A, isi label A banyak... dan tampilannya kaya gitu juga, gimana caranya ??

BamZ mengatakan...

itu sudah saya tambahkan pada posting mas . Good luck

...:::DieBrie:::... mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Dudi Suswandi mengatakan...

wah ...yang saya ko ga keluar ya gan

www.dudi-suswandi.blogspot.com

Fakry Naras Wahidi mengatakan...

ijin menggunakan kodenya iya
makasi...

Cataatn Blog M Hasbi mengatakan...

@bamz gz : ane kurang ngerti gan,,,tolong kasih penjelasan yabg lebih jelas lagi donk,,
atau buat vide nya aja gitu,,biar lebih gampang

campor bawor mengatakan...

mas aku coba kok gak bisa ya... gak muncul ..kira2 apa penyebabnya

BamZ Gz mengatakan...

@Cataatn Blog M Hasbi: itu sudah paling manteb gan :)

BamZ Gz mengatakan...

@campor bawor: mungkin salah kode penempatan :)

Idmaspor mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Teknokers mengatakan...

kereen, akhirnya blogku ada page navigationnya, tadinya bingung mau diapain, btw thanks gan!

addyn mengatakan...

makasih mas infonya, salam kenal ^^

CherryAnime mengatakan...

makasih info nya, berguna banget buat blog baru saya

321 Full Download mengatakan...

I Like To Post. Visit http://321fulldownload.blogspot.com/ to vew navigasi, sucessfull

fredivsky mengatakan...

Thank nice info ..... navigasi kini jadi lebih mudah
cari template wordpress kunjungi blog ane ya ....
http://templetwp.blogspot.com/

team blogger mengatakan...

tanks frnd............

Denvitroy mengatakan...

wah aku pingin nih

DUNIA BISNIS mengatakan...

alow gan mohon bimbingannya ,,kenapa pada template ku kagak keluar thu halamannya padahal udah benar ...

mohon bimbingannya gan ..

Styler 199 mengatakan...
Komentar ini telah dihapus oleh administrator blog.
herly mengatakan...

thanks infonya ,,sangat bermanfaat

dF4u mengatakan...

Max post berapa bang?? saya cari2 di google kok hasilnya ga ada yg lebih dari 500 postingan,jdi kalo 500 lebih sisanya hilang,,

fajar firmansyah mengatakan...

sama ane juga bang kaga keluar nih.???
minta penjelasannya bang..coba ceek ke blog saya..
http://fajar196.blogspot.com

Achmat Taofik mengatakan...
Komentar ini telah dihapus oleh administrator blog.
Gopar mengatakan...

keren sharenya..

Yohanes mengatakan...
Komentar ini telah dihapus oleh administrator blog.
ARTIS17845 mengatakan...

Tombol navigasi halaman yang mantap mas bro, thanks for sharing, happy blogging, salam kenal persahabatan

alivea mengatakan...

tanks banget infonya yah

Selebriti Asia mengatakan...

File Js sepertinya dihapus tuh error sob? Coba dah cek, kalo ada backupannya mohon segera diperbaiki thanks

Ellin Queenza mengatakan...

gan ko saya ga bisa padahal tmplte nya buatan agan...mhon pencerahan gan... kalau bisa tlong liat disi http://www.mobilenewssat.com

Ellin Queenza mengatakan...

terus 1 lagi gan, kalau dah di liat bagai mana cara biar tulisannya biar lebih banyak di halaman home nya. terimakasih gan

Ulil Azmy mengatakan...

@Bamz.US
Gan , template sy gk bisa .
sy template SEO Elite dari agan..
www.kang-azmie.com

@Ellin
sma, sy juga gk bisa. sy pkai SEO Elite juga.
www.kang-azmie.com

Erick mengatakan...

Wah. kebetulan blogku lom ada beginiannya, wajib dicoba nih trik. Biar pengunjung makin seneng.

lowongan kerja 2012 mengatakan...

asik nih bacanya. penjelasannya sangat jelas, mudah di fahami

SHARE AJA mengatakan...

Tombol navigasi nomor halaman yang mantap, terima kasih telah berbagi

Tokotua-shop mengatakan...

Kok saya gak bisa nongol yah nomor navigasinya :(

Bayu Handono mengatakan...

tak coba dulu mas :D

Posting Komentar

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.

◄ Posting Baru Posting Lama ►
 
Exit Di Like yah Sob!! Makasih