Blog, Web, Internet dan Bisnis Online

Cara Membuat Next Page Angka di Home Page Blogspot


Cara Membuat Next Page Angka di Home Page Blogspot - Mungkin anda sedang mencari tutorial cara membuat navigasi berupa next page pada home page yang berupa angka pada bagian bawah blog. Kebetulan anda berada pada blog yang tepat. Sebelum lanjut ke cara membuat Next Page atau angka 1 2 3 dan seterusnya yang berada dibawah halaman home page atau halaman utama, alangkah baiknya kita ketahui dulu pengertian dari next page.

Baca juga : Cara Menambahkan atau Membuat Kotak Pencarian di Blog

Next Page adalah sebuah navigasi yang berada dibawah halaman yang berupa angka atau panah untuk memudahkan pengunjung atau pembaca dalam mengunjungi halaman selajutnya ataupun sebelumnya. Berdasarkan pengertian diatas next page ada berbentuk angka dan panah, tapi pada tutorial ini admin hanya akan menjelaskan cara membuat next page yang berbentuk angka. Berikut bentuk navigasi next page yang berbentuk angka.

Jika sobat tertarik silahkan dicoba tutorial ini karena dengan membuat navigasi next page pada halaman, pengunjung akan lebih mudah membalik halaman selanjutnya untuk membaca artikel blog yang lain. Selain itu pengunjung juga bisa tahu jumlah halaman blog yang dimiliki. Kira - kira seperti diatas penampakkan dari navigasi next page. Untuk membuatnya silahkan ikuti langkah-langkahnya dibawah ini.

Langkah-Langkah Membuat Next Page Angka di Blog:
  1. Login ke blogger
  2. Masuk ke menu Template lalu Edit HTML
  3. Cari kode ini ]]></b:skin> gunakan Ctrl+f untuk mempermudah pencarian
  4. Setelah ditemukan, letakan kode berikut diatas ]]></b:skin>
  5. .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. Jika sudah, sekarang cari kode </body> dan salin kode dibawah ini diatas kode kode </body>.
  7. <script type='text/javascript'>
    var pageCount=5;
    var displayPageNum=5;
    var upPageWord=&#39;Previous&#39;;
    var downPageWord=&#39;Next&#39;;
    </script>
    <script src='http://marbun.googlecode.com/files/scriptsnext.js' type='text/javascript'/>

  8. Terakhir klik Simpan Template.
Dengan mengklik "Simpan Template" pada akhir langkah diatas berarti navigasi next page anda telah diterapkan pada bagiah bawah halaman depan blog. Sekarang blog sobat telah terlihat lebih menarik dari yang sebelumnya karena dengan adanya tombol navigasi next page membuat blog menjadi terlihat lebih rapi.

Baca juga : Cara Membuat Tampilan Kursor di Blog Menjadi Unik

Nah..begitulah cara membuat navigasi next page pada blog. Gimana? mudah bukan cara bikinnya. Silahkan saja dicoba, salam blogger.
Tag : Tips Blog
12 Komentar untuk "Cara Membuat Next Page Angka di Home Page Blogspot"

Bagus sekali tipsnya. Jadi dibuat paginasi halaman ya Blognya. Tentu saja sangatlah membantu untuk para pengguna yang mungkin ingin mengunjungi postingan selanjutnya

Terima kasih. Semoga membantu ya gan :)

gan ko saya ngk ada kode
body ya di template saya
giman tuh

Ada gan, coba cari dengan teliti, gunakan Ctrl+F untuk mencarinya.

sip gan, ane dah coba di blog sendiri dan berhasil

Selamat ya gan,, semoga bermanfaat. Mari sama-sama saling berbagi.

gan saya sudah jalani sesuai prosedur tapi g muncul tetap gmn gan

Gini, gan. Kan udah ada tuh next page-nya, tapi kalo di klik salah satu nomer di next page tersebut, next page-nya ilang?
emang gitu apa gimana ya?
dikabayhaki.blogspot.com

Oh itu. Itu sebnarnya bukan hilang. Tapi, nomor page yang sedang dikunjungi dikasih warna putih sama dengan warna kotaknya sehingga tidak terlihat. Coba ganti warnanya pasti terlihat.

kalo bodynya kayak gini kodenya ditaro mana?

<!-- < /body> -->< / body>

Alhamdulillah berhasil juga akhirnya... pernah nyoba script yg add di blog sebelah gagal... tapi pake script ini berhasil... makasih...

Back To Top