LarhTech – Sebuah website yang terus bertumbuh pasti akan memiliki puluhan bahkan ratusan artikel. Saat halaman depan (Homepage) Anda sudah penuh dengan artikel terbaru, Anda wajib menyediakan jalan bagi pengunjung untuk menelusuri arsip artikel lama Anda.
Fitur penunjuk jalan ini disebut Pagination (Navigasi Halaman). Tanpa navigasi ini, artikel-artikel lama Anda akan terkubur dan tidak bisa diakses oleh pengunjung maupun mesin pencari Google.
Secara bawaan, Blogger memang sudah menyediakan navigasi “Posting Lebih Baru” dan “Posting Lama”. Namun, tampilannya sangat sederhana dan sering kali posisinya berantakan. Dalam tutorial Part 6 ini, kita akan menggunakan teknik override (menimpa kode bawaan) pada tag <b:includable id=’nextprev’> untuk menyulap teks biasa tersebut menjadi tombol navigasi yang modern dan cantik.
Langkah 1: Menemukan Lokasi Includable
Buka menu Tema > Edit HTML di dashboard Blogger Anda.
Pada Part 3 dan Part 4, kita telah banyak memodifikasi tag <b:includable id=’main’> yang berada di dalam <b:widget id=’Blog1′ …>.
Sekarang, kita akan menambahkan satu blok includable baru khusus untuk navigasi. Gulir ke bagian kode widget Blog Anda, dan letakkan kode navigasi ini tepat di bawah penutup </b:includable> dari main tadi.
Langkah 2: Memasukkan Kode Navigasi (Next/Prev)
Copy dan paste kode XML berikut ke dalam widget Blog Anda:
<b:includable id='nextprev'>
<div class='blog-pager' id='blog-pager'>
<b:if cond='data:newerPageUrl'>
<a class='blog-pager-newer-link' expr:href='data:newerPageUrl' title='Artikel Terbaru'>
← Artikel Terbaru
</a>
</b:if>
<b:if cond='data:view.isSingleItem or data:view.isArchive or data:view.isSearch'>
<a class='blog-pager-home-link' expr:href='data:blog.homepageUrl' title='Kembali ke Beranda'>
Beranda
</a>
</b:if>
<b:if cond='data:olderPageUrl'>
<a class='blog-pager-older-link' expr:href='data:olderPageUrl' title='Artikel Lama'>
Artikel Lama →
</a>
</b:if>
</div>
</b:includable>
Penjelasan Logika Kode:
- data:newerPageUrl dan data:olderPageUrl: Ini adalah tag dinamis Blogger yang otomatis menghasilkan tautan (link) ke halaman sebelum dan sesudahnya.
- Kode ← dan →: Ini adalah kode HTML untuk menampilkan ikon panah ke kiri (←) dan panah ke kanan (→) tanpa perlu memuat file gambar atau font tambahan, sehingga loading blog tetap secepat kilat!
Langkah 3: Menghias Tombol dengan CSS
Jika Anda simpan sekarang, navigasinya sudah berfungsi, namun bentuknya masih berupa link teks biasa. Mari kita ubah menjadi tombol melayang yang sejajar.
Gulir ke atas menuju area CSS Anda (di antara <b:skin><![CDATA[ dan ]]></b:skin>), lalu tambahkan kode gaya ini di bagian paling bawah:
/* --- NAVIGASI HALAMAN (PAGINATION) --- */
.blog-pager {
display: flex;
justify-content: space-between; /* Mendorong tombol ke ujung kiri dan kanan */
align-items: center;
margin: 40px 0 20px 0;
padding-top: 20px;
border-top: 2px solid #f3f4f6;
}
.blog-pager a {
display: inline-block;
background-color: #ffffff;
color: #2563eb;
padding: 10px 20px;
border-radius: 6px;
text-decoration: none;
font-weight: 600;
font-size: 0.95em;
border: 1px solid #e5e7eb;
box-shadow: 0 2px 4px rgba(0,0,0,0.05);
transition: all 0.3s ease;
}
.blog-pager a:hover {
background-color: #2563eb;
color: #ffffff;
transform: translateY(-2px);
box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
}
/* Jika tombol Beranda ada di tengah, posisikan agar rapi */
.blog-pager-home-link {
margin: 0 auto;
}
/* Responsif untuk Layar HP */
@media (max-width: 600px) {
.blog-pager {
flex-direction: column;
gap: 15px;
}
.blog-pager a {
width: 100%;
text-align: center;
box-sizing: border-box;
}
}
Langkah 4: Simpan dan Uji Coba!
- Klik tombol Simpan.
- Buka halaman depan blog uji coba Anda.
- Gulir ke bagian paling bawah (di bawah deretan Kartu Artikel yang kita buat di Part 3).
Jika blog uji coba Anda belum memiliki banyak artikel, tombol tersebut mungkin tidak langsung muncul (karena tidak ada halaman lama yang bisa dituju). Untuk mengujinya, Anda bisa mengubah setelan jumlah artikel per halaman di Blogger > Setelan > Postingan > Jumlah maksimum postingan yang ditampilkan di halaman utama menjadi “1”.
Setelah itu, refresh halaman depan Anda. BAM! Anda akan melihat tombol “Artikel Lama →” yang sangat estetik di pojok kanan bawah. Jika Anda mengekliknya, Anda akan dibawa ke halaman kedua, dan tombol “← Artikel Terbaru” akan otomatis muncul di sebelah kiri!
Kesimpulan
Dengan berfungsinya sistem Navigasi Halaman ini, tema Blogger kustom Anda kini sudah 100% fungsional layaknya tema premium yang dijual di pasaran.
Pengunjung kini bisa menjelajahi seluruh isi blog Anda tanpa batas. Mesin pencari Google pun akan lebih mudah merayapi (crawling) struktur website Anda karena tautan halamannya sangat jelas.
Baca Juga: Cara Setting Obejct Chache WordPress
Eksperimen pengembangan tema XML Anda sudah selesai. Anda kini memiliki skill untuk mengubah layout apa pun di ekosistem Blogger!
