Lompat ke konten Lompat ke sidebar Lompat ke footer

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: &quot;First&quot;,
lastText: &quot;Last&quot;,
nextText: &quot;Next&quot;,
prevText: &quot;Prev&quot;
}
</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