Cara mudah membuat nomor navigasi halaman blog.
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 potingan 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...

Tidak ada komentar:
Posting Komentar