cara membuat next page button dengan angka di blog

cara membuat next page button dengan angka di blog

Assalamualaikum.
Tujuan pembuatan navigasi next page,previous page dengan angka di blog adalah untuk memudahkan para pengunjung blog dalam melihat artikel apa saja yang ada di blog yang kita miliki.
Bagi anda yang sedang mengedit template default simple dari blogger.com dan ingin memasang navigasi next page,previous page dengan angka di area homepage blog,maka di tutorial ini saya akan share caranya.

Berikut cara membuat navigasi next page,previous page button dengan angka di blog
1.Pertama-tama yang anda harus lakukan adalah masuk ke halaman dashboard blog anda di www.blogger.com dengan menggunakan akun blogger yang anda miliki.
2.Setelah masuk ke halaman dashboard,silahkan anda klik nama blog yang anda miliki (apabila anda memiliki blog lebih dari 1).Contoh seperti gambar dibawah ini.

cara membuat next page button dengan angka di blog

3.Di halaman berikutnya silahkan anda klik template,seperti contoh gambar dibawah ini.
cara membuat next page button dengan angka di blog

4.Selanjutnya anda klik edit HTML,seperti contoh gambar dibawah ini.
cara membuat next page button dengan angka di blog

5.Nanti anda akan bertemu dengan struktur kode-kode yang membentuk template blog anda.Silahkan anda cari kode
]]></b:skin>
Agar lebih mudah dalam pencarian kode anda bisa menggunakan CTRL+F (jika anda menggunakan komputer).
6.Silahkan anda masukkan kode css berikut ini tepat diatas ]]></b:skin>
.showpageArea{float:left;color:#555;font-size:11px;margin:10px 0}
.showpageArea a{color:#555;text-shadow:0 1px 2px #fff}
.showpageNum a:hover,.showpage:hover{border:1px solid #b2b2b2;color:#555!important}
.showpage{margin:0}
.showpage:hover a{color:#555!important}
.showpagePoint{background:#f8f8f8;border:1px solid #b2b2b2;margin:0 2px 0 0;padding:5px 12px}
.showpageNum a,.showpageOf,.showpage{border:1px solid #e8e8e8;background:#f8f8f8;margin:0 2px 0 0;padding:5px 12px}
7.Berikutnya anda cari kode
</body>
lalu masukkan script berikut ini tepat diatasnya.
<script type='text/javascript'>
var pageCount=4;
var displayPageNum=4;
var upPageWord='Prev';
var downPageWord='Next';
</script>
<!-- NEXT PAGE -->
<script type="text/javascript" src="https://googledrive.com/host/0By9Vs49VphQqeWVMYzNqbWlNaU0"></script>
Keterangan :
  • Kata prev dan next dapat anda ganti dengan kata yang anda inginkan.
  • Angka 4 yang pertama adalah jumlah post yang ditampilkan untuk setiap page yang di klik.
  • Angka 4 yang kedua adalah jumlah nomor yang ingin ditampilkan diarea homepage blog.
8.Berikutnya silahkan anda klik simpan atau save.

Kadang navigasi ini suka mengalami kegagalan  jika kita membuka blog dari handphone.Ini dapat terjadi karena beberapa hal diantaranya adalah terlalu banyak memasang script,tampilan blog tidak responsive,internet yang tidak stabil.Contoh kasusnya antara lain adalah nomor navigasi tetap berada di nomor 1 padahal sudah di halaman ke sekian,contoh lainnya adalah navigasi kadang muncul kadang tidak muncul.
Untuk memperbaikinya,silahkan anda ganti kode yang saya berikan pada langkah nomor 6 diatas dengan kode berikut ini.
.showpageNum a,.showpage a{background:#999;text-decoration:none;white-space:nowrap;color:#ffffff;margin:10px 3px;padding:5px 10px;transition:all 400ms ease-in-out}
.showpageNum a:hover,.showpage a:hover{color:#ffffff;text-decoration:none;background:#47AADD}
.showpageOf{display:none;margin:0}
.showpagePoint{color:#ffffff;text-decoration:none;background:#47AADD;font:20px "PT Sans Narrow";margin:10px 3px;padding:5px 10px;transition:all 400ms ease-in-out
}
@media only screen and (max-width:640px){
.blog-pager,#blog-pager{font:14px "PT Sans Narrow";}}
Dan ganti kode pada langkah nomor 7 dengan script berikut ini.
<script type='text/javascript'>
    var postperpage=10;
    var numshowpage=5;
    var upPageWord =&#39;&#171; Previous &#39;;
    var downPageWord =&#39;Next &#187;&#39;;
    var urlactivepage=location.href;
    var home_page=&quot;/&quot;;
  </script>
<script src='http://yourjavascript.com/218437119/halamanav.js' type='text/javascript'/> 
Silahkan anda kunjungi blog yang anda miliki,maka anda akan melihat tombol next page.previous page telah muncul di area homepage blog yang anda miliki.
Bagaimana? cukup menarik bikan?
Demikianlah cara membuat navigasi next page,previous page di blog.
Terimakasih telah berkunjung dan semoga bemanfaat.
Assalamualaikum.

47 komentar

sama-sama gan thanks atas kunjungannya

iya sama-sama gan,terimakasih udah baca tutorial dari saya..

akhirnya nemu yang pake gambar, makasih infonya :)

sama-sama gan,terimakasih atas kunjungannya gan :)

gan gw gk dpt kode ]]>
Mohon bantuannya

Sebenernya ada gan.
Coba masuk ke edit html seperti biasa,nanti di halaman edit html cari tanda panah di sebelah kiri nomor urut kode-kode,,klik tanda panah tersebut gan :)
Trus cari kode ]]> pake CTRL+F

Terima kasih infonya :)
kunjungai balik ya gan :)
http://informasiberitatop.blogspot.com | http://goo.gl/tw2ZtP | http://goo.gl/eQV9d3 | http://goo.gl/CG1s54 | http://goo.gl/CI4bLf | http://goo.gl/lNMX3D | http://bit.ly/1NM7v7j | http://goo.gl/cAQcMp | http://goo.gl/97Yn1s | http://goo.gl/tw2ZtP

makasihhhhh infonya....
kunjungan baliknya gan:)

oke terimakasih terimakasih udah nengok blog ane gan

oke sama-sama gan terimakasih gan atas kunjungannya

gagal. bagaimana? sudah diikuti sesuai intruksi.
tidak ada perubahan.

Mantap Gan.. Nice.. ijin comot yaaa :D

gan, kala untuk post yg ada di laman, gimana caranya?

ditunggu kunbalnya ya

maaf,kemarin saya menyimpan file js di wen.ru,namun saya baru tau wen.ru sudah ditutup bulan kemarin...
oke gan,kode sudah saya perbaiki..terimakasih gan atas kunjungannya

oke gan terimakasih atas kunjungannya,ane udah kunbal gan

gan kok di blog aku gak muncul yah

Mohon maaf kemarin ada kesalahan penulisan kode..sekarang sudah diperbaiki.

Makasih buanyak,,, ini work banget. mampir juga ya di halaman saya.... http://dedisoehendar.blogspot.co.id/

sama-sama dan terimakasih atas kunjungannya

gan kunjungi blog ane yah, thanks gan infonya.. ane pemula nih.

Makasih gan, saya coba terapkan dulu....

terima kasih banyak, thanks for sharing :D

Artikelnya bagus, salam kenal ajan dan sukses selalu buat blognya giribig.com

Alhamdulillah,sama-sama gan n salam kenal juga

saya udah beres bikinnya, tapi kalo bloggnya di buka di hp fungsinya gk maksimal knp ya? misal kita ngeklik 3, memang bloggnya berpindah ke page 3 tapi di next page buttonnya itu sendiri masih nunjukin ke satu.

Terimakasih atas komentarnya,posting sudah saya perbarui :)

coba homepage nya di reload gan :)

thanks gan berhasil tips nya http://inirajawali.blogspot.co.id/

work gan.. makasih
Kunjungan balik gan http://www.makananlampung.com/

Berkomentarlah dengan kata-kata yang baik dan dilarang mencantumkan link berbau pornografi,iklan