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...
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...
- Masuk/Log In ke akun Blogger sobat seperti biasa
- Pada halaman Administrator blog, sobat buka Tata Letak >> Klik Tambahkan Widget/Gadget >> Pilih HTML/Java Script
- 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>
#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...
Contoh screnshotnya g ada mas....
ReplyDeleteLho..???!!!
Deletebukannya yang diatas ada gambarnya ya sob?
yang no 2
Nih, yang namanya artikel bermanfaat, saya coba dulu di blog gue yah,,, makasih sobat.
ReplyDeletesilahkan sob katon
Deletesemoga berhasil n terima kasih kembali
gan klo untuk pasang navigasi di halaman LABEL gmn?
ReplyDeleteaku pasang itu cuma ada tuk beranda aja
makasih, suskes sllu
http://mejarapuh.blogspot.co.id/