Cara Mudah Membuat Navigasi Halaman Angka 1 2 3 di Blogger (2016)
Memiliki Blog dengan Navigasi Bagus. Di Lengkapi Fitur Penomoran ala 1 2 3. Memang Memudahkan Banyak Pengunjung mengunjungi Blog
Anda. Mereka Cukup Mengklik Tombol Angka. Maka Halaman Postingan Artikel
Langsung Tertuju Cepat ke Lokasi Sasaran.
Bagi Anda yg Membuat Blog Menggunakan Layanan dari Platform
milik Google (Blogger atau Blogspot). Tombol Navigasi Terlihat Sederhana.
Terdiri Hanya dari 3 Komponen. Yaitu POSTING
LEBIH BARU, BERANDA dan POSTING LAMA.
Bagi Beberapa Pemilik Blog. Tampilan Default milik
Blogger. Terlihat Membosankan dan Kaku. Banyak Orang ingin menggantinya dengan
Navigasi ala Tombol 1 2 3.
KELEBIHAN
DAN KEKURANGAN
Sebelum memasang Kode HTML ini di Blogger. Mohon di
Yakinkan Terlebih Dahulu ya. Mengingat ada Beberapa Kelebihan dan Kekurangan
apabila Anda memasang Kode ini.
# APABILA
ANDA MENGGUNAKAN DESAIN DEFAULT MILIK BLOGGER.
Maka Tampilan Loading Blog Anda akan CEPAT. Artinya
Baik untuk Performa SEO.
Hanya membutuhkan 1 Kode ini saja untuk membuatnya
:
<b:include
name='nextprev'/>
Bandingkan Jika Kita Memasang untuk Tampilan Navigasi
Tombol ala 1 2 3. Kode HTML dan CSS yg dibutuhkan akan Sangat Panjang. Cuman
aja ya, Segi Kekurangannya seperti Pada Pembahasan diatas, Tampilannya Terlihat
Kaku dan Membosankan. Terus tu ya untuk membaca Artikel Selanjutnya. Kita
dituntut untuk membuka Halaman Satu Per Satu.
Alasan inilah. Mengapa banyak orang ingin mengubah
Desain yg dibuat oleh Blogger.
# APABILA
ANDA MENGGUNAKAN DESAIN TOMBOL NAVIGASI 1 2 3
Keunggulannya Terletak Pada Kemudahan untuk membuka
atau mencari Artikel dengan Lebih mudah menyesuaikan dengan Tombol Navigasi 1 2
3. Kita Seolah-olah bisa diajak melompat ke Artikel yg pengen kita tuju dengan
lebih cepat.
Ada Keunggulan. Tentu saja ada Kelemahannya ya.
Memasang Navigasi Keren ini. Kita di Tuntut untuk
Mengutak-atik HTML atau CSS menjadi Lebih Panjang. Hal ini, Bisa saja
Memberatkan Server untuk Proses Kecepatan Loading.
Selain itu, Jumlah Halaman sengaja
dibatasi hingga 30. Sehingga Pengunjung Ngga Bisa Membaca Lagi Daftar List List
Artikel Terlama Anda.
Bagi Teman-Teman. Yang Tetap Pengen Memasang Kode
Tombol Navigasi ini.
Berikut Tutorial dan Langkah-Langkahnya.
CARA
MEMASANG TOMBOL NAVIGASI ALA 1 2 3
1]. Buka Blogger.com Dan Pilihlah Menu Template untuk
Mulai Mengedit Tampilan Blog yg Pengen Anda Ubah.
2]. Klik EDIT HTML
3]. Mohon Data Kode-Kode Template Blog Milik Anda di
Backup Terlebih Dahulu. Tujuannya untuk mengembalikan keadaan apabila Terjadi
Kesalahan. Anda bisa menyimpannya di Notepad, Microsoft Office, atau Media
Lain-Lainnya.
4]. Silahkan Anda Cari Kode ini
]]></b:skin> atau </style>.
Kemudian simpanlah CSS dibawah ini diatas Kode Tadi. [Nb : Proses Pencarian
Klik Ctrl F]
.pagenavi{clear:both;margin:20px
0 10px;text-align:center;font-weight:bold;color:#fff
!important;text-transform:uppercase}
.pagenavi
span,.pagenavi a{padding:5px
15px;margin-right:3px;display:inline-block;color:#fff
!important;background-color:#3498db;}
.pagenavi
.current{color:#fff !important;background-color:#555;}
.pagenavi
.current,.pagenavi .pages,.pagenavi a:hover{color:#fff
!important;background-color:#555;}
.pagenavi
.pages {margin:0 -1px 0 0}
|
5]. Kemudian Anda mencari Lagi Kode yg Mirip Seperti
ini.
<b:widget id='Blog1' locked='true'
title='Posting Blog' type='Blog'>
Lalu Simpanlah Kode
dibawah ini dibawahnya
<b:includable
id='page-navi'>
<div
class='pagenavi'>
<script
type='text/javascript'>
var
pageNaviConf = {
perPage:
5,
numPages:
5,
firstText:
"First",
lastText:
"Last",
nextText:
"Next",
prevText:
"Prev"
}
</script>
<script
type='text/javascript'>
//<![CDATA[
function
pageNavi(o){var m=location.href,l=m.indexOf("/search/label/")!=-1,a=l?m.substr(m.indexOf("/search/label/")+14,m.length):"";a=a.indexOf("?")!=-1?a.substr(0,a.indexOf("?")):a;var
g=l?"/search/label/"+a+"?updated-max=":"/search?updated-max=",k=o.feed.entry.length,e=Math.ceil(k/pageNaviConf.perPage);if(e<=1){return}var
n=1,h=[""];l?h.push("/search/label/"+a+"?max-results="+pageNaviConf.perPage):h.push("/?max-results="+pageNaviConf.perPage);for(var
d=2;d<=e;d++){var c=(d-1)*pageNaviConf.perPage-1,b=o.feed.entry[c].published.$t,f=b.substring(0,19)+b.substring(23,29);f=encodeURIComponent(f);if(m.indexOf(f)!=-1){n=d}h.push(g+f+"&max-results="+pageNaviConf.perPage)}pageNavi.show(h,n,e)}pageNavi.show=function(f,e,a){var
d=Math.floor((pageNaviConf.numPages-1)/2),g=pageNaviConf.numPages-1-d,c=e-d;if(c<=0){c=1}endPage=e+g;if((endPage-c)<pageNaviConf.numPages){endPage=c+pageNaviConf.numPages-1}if(endPage>a){endPage=a;c=a-pageNaviConf.numPages+1}if(c<=0){c=1}var
b='<span class="pages">Pages '+e+' of '+a+"</span>
";if(c>1){b+='<a href="'+f[1]+'">'+pageNaviConf.firstText+"</a>"}if(e>1){b+='<a
href="'+f[e-1]+'">'+pageNaviConf.prevText+"</a>"}for(i=c;i<=endPage;++i){if(i==e){b+='<span
class="current">'+i+"</span>"}else{b+='<a
href="'+f[i]+'">'+i+"</a>"}}if(e<a){b+='<a
href="'+f[e+1]+'">'+pageNaviConf.nextText+"</a>"}if(endPage<a){b+='<a
href="'+f[a]+'">'+pageNaviConf.lastText+"</a>"}document.write(b)};(function(){var
b=location.href;if(b.indexOf("?q=")!=-1||b.indexOf(".html")!=-1){return}var
d=b.indexOf("/search/label/")+14;if(d!=13){var c=b.indexOf("?"),a=(c==-1)?b.substring(d):b.substring(d,c);document.write('<script
type="text/javascript"
src="/feeds/posts/summary/-/'+a+'?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}else{document.write('<script
type="text/javascript" src="/feeds/posts/summary?alt=json-in-script&callback=pageNavi&max-results=99999"><\/script>')}})();
//]]>
</script>
</div>
</b:includable>
|
6]. Carilah Kode ini :
<b:include name='nextprev'/>
Kemudian Hapus dan Ganti dengan Kode dibawah ini.
<b:if
cond='data:blog.pageType == "index"'>
<b:include name='page-navi' />
<b:else/>
<b:if cond='data:blog.pageType ==
"archive"'>
<b:include name='page-navi' />
</b:if>
</b:if>
|
7]. Simpan. Selesai
INFORMASI TAMBAHAN
perPage
: Jumlah yang ingin ditampilkan pada satu halaman
numPages
: Jumlah Navigasi Halaman yang ingin ditampilkan
FirstText
: Teks Halamana Pertama
astText
: Teks Halaman Terakhir
nextText
: Teks untuk Halaman selanjutnya
prevText
: Teks untuk Halaman sebelumnya
|
Artikel
Lainnya :
|
Semoga Bermanfaat ya. Terima Kasih. GBU