Cara mudah membuat nomor navigasi halaman blog

Cara mudah membuat nomor navigasi blog di blogger. Setiap pemilik blog (termasuk saya dan sobat-sobat) pasti ingin mempercantik tampilan blognya, agar bisa membuat pembaca lebih nyaman memandangi blog. Dan pastinya mempermudah pembaca mencari tahu isi blog dengan lebih cepat.

Banyak elemen yang bisa kita masukkan dalam tampilan blog, pada bagian atas kolom postingan ada menu navigasi bar, di sidebar bisa menggunakan beberapa widget (about me, arsip blog, post populer dll), sampai bagian bawah seperti yang saya jadikan topik kali ini, yaitu nomor navigasi halaman posting blog.

Sudah tahu kan bagaimana aslinya navigasi halaman bawaan pada blogger???
Benar Sob, menampilkan menu Newer Post, Home dan Older Post. Seperti yang dapat sobat lihat pada kotak berwarna merah no 1 di gambar.

Tampilan inilah yang akan kita rubah, agar menjadi susunan angka yang berurutan sehingga akan lebih memudahkan pembaca karena bisa langsung loncat ke beberapa halaman berikutnya (lihat kotak merah no 2). Penampakannya pun saya jamin lebih asyik dibandingkan navigasi halaman bawaan blogger. Seperti yang terlihat pada gambar di bawah ini...

http://kendhou.blogspot.co.id/2015/12/membuat-nomor-navigasi-halaman-blog.html

Saya sebutkan diatas bahwa cara ini adalah cara yang mudah, nggak percaya???
Ada alasan kenapa saya mengatakan mudah, karena pembuatan menu navigasi halaman ini cukup menggunakan fitur Tata Letak, tanpa melakukan pengeditan HTML pada Template. Sehingga sobat tidak perlu mencari kode-kode tertentu pada Template dan masih dengan beberapa resiko bagi yang belum terbiasa dengan hal ini (benar kan???).

Langsung sobat praktekkan ya...

  1. Masuk/Log In ke akun Blogger sobat seperti biasa
  2. Pada halaman Administrator blog, sobat buka Tata Letak >> Klik Tambahkan Widget/Gadget >> Pilih HTML/Java Script
  3. Masukkan (Copy) Script berikut di dalam kotak widget
<style type='text/css'>
#blog-pager{padding:10px 0;clear:both;}
.showpageNum a {
color:#ffffff;
text-decoration:none;
border: 1px solid #B4B2B2;
margin:0 3px;
padding:3px 7px;
background-color:#00477d;
}
.showpageNum a:hover, .showpage a:hover, .showpagePoint {
color:#E4E0E0;
border: 1px solid #A7A5A5;
padding:3px 7px;
background-color:#ff6600;
margin:0 3px;
}
.showpageOf {
color:#333;
text-decoration:none;
padding:3px 7px;
margin: 0 3px 0 0;
}
</style>
<script style='text/javascript'>
var numshowpage=5;
var postperpage =10;
var upPageWord="Previous";
var downPageWord="Next";
var urlactivepage=location.href;
var home_page="/";
</script>
<script style='text/javascript' src='http://numbered-page.googlecode.com/files/Numbered%20Page%20Navigation%20Widget%20to%20Blogger.js'></script>

Selesai memasukkan Script, klik Simpan dan lihat bagaimana hasil pada blog sobat.

>>  Jumlah halaman (berurutan) yang akan ditampilkan pada menu navigasi.

>>  Jumlah postingan artikel yang ditampilkan per halaman navigasi.


Mudah bukan Sob?? Saya berharap postingan saya ini dapat memberikan manfaat bagi sobat dan blog sobat, Ingat ya Sob... 

'Teruslah belajar, karena belajar tak mengenal batasan (Siapa, dimana, kapan bahkan usia). Dan berbagilah agar ilmu baru mendatangimu.'

Sekian tutorial sederhana saya tentang cara mudah membuat nomor navigasi halaman blog yang tak kalah sederhana. Semoga kita bisa menjadi pribadi yang bermanfaat bagi orang lain.
Salam Pintar...

Berlangganan update artikel terbaru via email:

5 Responses to "Cara mudah membuat nomor navigasi halaman blog"

  1. Contoh screnshotnya g ada mas....

    ReplyDelete
    Replies
    1. Lho..???!!!
      bukannya yang diatas ada gambarnya ya sob?
      yang no 2

      Delete
  2. Nih, yang namanya artikel bermanfaat, saya coba dulu di blog gue yah,,, makasih sobat.

    ReplyDelete
    Replies
    1. silahkan sob katon
      semoga berhasil n terima kasih kembali

      Delete
  3. gan klo untuk pasang navigasi di halaman LABEL gmn?
    aku pasang itu cuma ada tuk beranda aja
    makasih, suskes sllu
    http://mejarapuh.blogspot.co.id/

    ReplyDelete

Terima kasih atas kunjungannya...
Pertanyaan, pendapat,serta saran dan masukan dapat sobat tuliskan pada kolom komentar yang tersedia. Harap menggunakan bahasa yang baik dan sopan.
Mohon maaf, segala bentuk SPAM dan mengandung unsur SARA akan kami hapus.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel