Membuat Navigasi Halaman Homepage dengan Angka di Blogger

Daftar Isi

Memuat daftar isi...

Cara Membuat Navigasi Homepage dengan Angka di Blogger

Navigasi halaman merupakan salah satu elemen penting pada sebuah blog. Selain memudahkan pengunjung berpindah dari satu halaman ke halaman lainnya, navigasi yang baik juga dapat meningkatkan pengalaman pengguna (User Experience) dan membantu mesin pencari mengindeks lebih banyak halaman.

Secara bawaan, Blogger hanya menyediakan navigasi sederhana berupa Newer Posts, Home, dan Older Posts. Pada beberapa tema Blogger versi terbaru, tombol tersebut bahkan hanya ditampilkan sebagai More Posts.

Walaupun navigasi bawaan tersebut sudah cukup berfungsi, tampilannya kurang informatif karena pengunjung tidak mengetahui berapa banyak halaman yang tersedia. Oleh karena itu, banyak pemilik blog memilih menggantinya dengan navigasi berbentuk angka (number pagination).

Dengan navigasi angka, pengunjung dapat langsung menuju halaman tertentu tanpa harus terus-menerus menekan tombol Older Posts. Hal ini membuat proses menjelajahi artikel lama menjadi jauh lebih cepat dan nyaman.

Keuntungan Menggunakan Navigasi Angka

Mengubah navigasi homepage menjadi angka memiliki beberapa keuntungan, di antaranya:

Tampilan blog menjadi lebih profesional.
Pengunjung lebih mudah menemukan artikel lama.
Memperbaiki pengalaman pengguna (User Experience).
Memudahkan mesin pencari mengakses halaman arsip.
Mengurangi jumlah klik saat mencari postingan lama.
Cocok digunakan pada blog dengan jumlah artikel yang banyak.

Jika blog Anda memiliki ratusan bahkan ribuan artikel, navigasi angka akan sangat membantu pengunjung menemukan konten yang mereka cari.

Cara Membuat Navigasi Homepage dengan Angka

1. Login ke Dashboard Blogger

Masuk terlebih dahulu ke akun Blogger Anda.

2. Buka Menu Tema

Pilih menu Tema, kemudian klik Edit HTML.

Sebelum melakukan perubahan pada template, sangat disarankan untuk melakukan Backup Tema terlebih dahulu agar dapat dikembalikan apabila terjadi kesalahan.

3. Tambahkan Kode CSS

Cari kode berikut:

]]></b:skin>

Kemudian letakkan kode CSS berikut tepat di atasnya.

/* NEXT PAGE----------------------------------------------- */
#blog-pager {overflow: visible;font:normal normal 12px oswald, sans-serif;}
.showpageOf {display:none}
span.showpagePoint { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: .6em .8em; margin: 0 .2em; border: 1px solid #555555; border-radius: 0.25em; background-color:#444444; border-color: #555555; color: #fff; pointer-events: none; }
span.showpageNum, span.showpage { margin: 0 .2em; }
.showpageNum a, .showpage a { display: inline-block; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; padding: .6em .8em; border: 1px solid #cccccc; border-radius: 0.25em; color: #444444; text-decoration: none; }
.showpageNum a:hover,.showpage a:hover {background:#555555;color:#fff}

Kode CSS di atas berfungsi untuk mengatur tampilan navigasi seperti warna, ukuran, border, dan efek ketika kursor diarahkan ke nomor halaman.

4. Tambahkan Script Pagination

Selanjutnya cari kode berikut:

</body>

Kemudian letakkan script berikut di atas kode tersebut.

<!-- NEXTPAGE -->   
    <b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
  <script type='text/javascript'> /*<![CDATA[*/ var postperpage=5; var numshowpage=2; var upPageWord ='« Previous Page'; var downPageWord ='Next Page »'; var urlactivepage=location.href; var home_page="/"; /*]]>*/ </script> <script type='text/javascript'> /*<![CDATA[*/ var nopage;var jenis;var nomerhal;var lblname1;halamanblogger();function loophalaman(banyakdata){var html='';nomerkiri=parseInt(numshowpage/2);if(nomerkiri==numshowpage-nomerkiri){numshowpage=nomerkiri*2+1}mulai=nomerhal-nomerkiri;if(mulai<1)mulai=1;maksimal=parseInt(banyakdata/postperpage)+1;if(maksimal-1==banyakdata/postperpage)maksimal=maksimal-1;akhir=mulai+numshowpage-1;if(akhir>maksimal)akhir=maksimal;html+="<span class='showpageOf'>Page "+nomerhal+' of '+maksimal+"</span>";var prevnomer=parseInt(nomerhal)-1;if(nomerhal>1){if(nomerhal==2){if(jenis=="page"){html+='<span class="showpage"><a href="'+home_page+'">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">'+upPageWord+'</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+prevnomer+');return false">'+upPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+prevnomer+');return false">'+upPageWord+'</a></span>'}}}if(mulai>1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}if(mulai>2){html+=' ... '}for(var jj=mulai;jj<=akhir;jj++){if(nomerhal==jj){html+='<span class="showpagePoint">'+jj+'</span>'}else if(jj==1){if(jenis=="page"){html+='<span class="showpageNum"><a href="'+home_page+'">1</a></span>'}else{html+='<span class="showpageNum"><a href="/search/label/'+lblname1+'?&max-results='+postperpage+'">1</a></span>'}}else{if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+jj+');return false">'+jj+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+jj+');return false">'+jj+'</a></span>'}}}if(akhir<maksimal-1){html+='...'}if(akhir<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+maksimal+');return false">'+maksimal+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+maksimal+');return false">'+maksimal+'</a></span>'}}var nextnomer=parseInt(nomerhal)+1;if(nomerhal<maksimal){if(jenis=="page"){html+='<span class="showpageNum"><a href="#" onclick="redirectpage('+nextnomer+');return false">'+downPageWord+'</a></span>'}else{html+='<span class="showpageNum"><a href="#" onclick="redirectlabel('+nextnomer+');return false">'+downPageWord+'</a></span>'}}var pageArea=document.getElementsByName("pageArea");var blogPager=document.getElementById("blog-pager");for(var p=0;p<pageArea.length;p++){pageArea[p].innerHTML=html}if(pageArea&&pageArea.length>0){html=''}if(blogPager){blogPager.innerHTML=html}}function hitungtotaldata(root){var feed=root.feed;var totaldata=parseInt(feed.openSearch$totalResults.$t,10);loophalaman(totaldata)}function halamanblogger(){var thisUrl=urlactivepage;if(thisUrl.indexOf("/search/label/")!=-1){if(thisUrl.indexOf("?updated-max")!=-1){lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?updated-max"))}else{lblname1=thisUrl.substring(thisUrl.indexOf("/search/label/")+14,thisUrl.indexOf("?&max"))}}if(thisUrl.indexOf("?q=")==-1&&thisUrl.indexOf(".html")==-1){if(thisUrl.indexOf("/search/label/")==-1){jenis="page";if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write("<script src=\""+home_page+"feeds/posts/summary?max-results=1&alt=json-in-script&callback=hitungtotaldata\"><\/script>")}else{jenis="label";if(thisUrl.indexOf("&max-results=")==-1){postperpage=20}if(urlactivepage.indexOf("#PageNo=")!=-1){nomerhal=urlactivepage.substring(urlactivepage.indexOf("#PageNo=")+8,urlactivepage.length)}else{nomerhal=1}document.write('<script src="'+home_page+'feeds/posts/summary/-/'+lblname1+'?alt=json-in-script&callback=hitungtotaldata&max-results=1" ><\/script>')}}}function redirectpage(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function redirectlabel(numberpage){jsonstart=(numberpage-1)*postperpage;nopage=numberpage;var nBody=document.getElementsByTagName('head')[0];var newInclude=document.createElement('script');newInclude.type='text/javascript';newInclude.setAttribute("src",home_page+"feeds/posts/summary/-/"+lblname1+"?start-index="+jsonstart+"&max-results=1&alt=json-in-script&callback=finddatepost");nBody.appendChild(newInclude)}function finddatepost(root){post=root.feed.entry[0];var timestamp1=post.published.$t.substring(0,19)+post.published.$t.substring(23,29);var timestamp=encodeURIComponent(timestamp1);if(jenis=="page"){var alamat="/search?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}else{var alamat="/search/label/"+lblname1+"?updated-max="+timestamp+"&max-results="+postperpage+"#PageNo="+nopage}location.href=alamat} /*]]>*/ </script>
</b:if>
      </b:if>

Script tersebut akan mengubah navigasi bawaan Blogger menjadi navigasi berbentuk angka secara otomatis.

5. Mengatur Jumlah Postingan per Halaman

Di dalam script terdapat kode berikut:

var postperpage=5;

Angka 5 menunjukkan jumlah postingan yang akan ditampilkan pada setiap halaman.

Contohnya:

var postperpage=5; = 5 postingan per halaman.
var postperpage=10; = 10 postingan per halaman.
var postperpage=15; = 15 postingan per halaman.

Silakan sesuaikan jumlah tersebut sesuai kebutuhan blog Anda.

6. Simpan Template

Jika semua kode sudah dipasang, klik tombol Simpan.

Selanjutnya buka halaman utama blog untuk memastikan navigasi angka telah muncul dan berfungsi dengan baik.

Mengubah Tampilan Navigasi

Anda dapat memodifikasi tampilannya melalui bagian CSS.

Beberapa bagian yang bisa diubah antara lain:

Warna background.
Warna teks.
Border.
Radius sudut.
Efek hover.
Ukuran font.
Padding dan margin.

Dengan sedikit penyesuaian CSS, navigasi dapat dibuat lebih modern dan selaras dengan desain template Blogger yang digunakan.

Tips Sebelum Memasang Script

Sebelum memasang script navigasi angka, ada beberapa hal yang sebaiknya diperhatikan:

Backup template Blogger terlebih dahulu.
Pastikan tidak ada script pagination lain yang aktif.
Bersihkan cache browser setelah menyimpan template.
Gunakan tema Blogger yang sudah mendukung elemen blog-pager.

Jika navigasi tidak muncul, biasanya penyebabnya adalah template telah menggunakan sistem pagination bawaan yang berbeda.

Kesimpulan

Mengubah navigasi homepage Blogger menjadi navigasi angka merupakan salah satu modifikasi sederhana yang memberikan manfaat besar bagi kenyamanan pengunjung. Selain membuat tampilan blog lebih profesional, navigasi ini juga mempermudah akses ke artikel lama tanpa harus menekan tombol Older Posts berkali-kali.

Bagi blog dengan jumlah artikel yang banyak, penggunaan navigasi angka sangat direkomendasikan karena mampu meningkatkan pengalaman pengguna sekaligus membantu pengunjung menemukan informasi yang mereka butuhkan dengan lebih cepat.

Semoga tutorial ini bermanfaat dan berhasil diterapkan pada blog Blogger Anda.