Cara Membuat Sitemap Blogger dengan Tab Kategori dan Pagination 50 Artikel
Kalau jumlah artikel di blog Blogger sudah mulai banyak, halaman sitemap biasa biasanya terasa kurang nyaman. Pembaca harus scroll panjang hanya untuk mencari artikel tertentu.
Apalagi kalau blog sudah memiliki banyak kategori atau label. Daftar artikel yang terlalu panjang bisa membuat sitemap terlihat berantakan dan kurang nyaman digunakan.
Nah, di tutorial ini kita akan membuat sitemap Blogger dengan tab kategori yang lebih rapi dan modern. Setiap label akan ditampilkan sebagai tab sehingga pembaca bisa memilih kategori yang ingin dilihat.
Yang menarik, daftar artikel juga menggunakan pagination 50 artikel per halaman. Jadi sitemap tetap ringan dan tidak menampilkan ratusan artikel sekaligus.
Apa Saja Fitur Sitemap Ini?
Script sitemap Blogger ini tidak hanya menampilkan daftar artikel. Ada beberapa fitur yang sengaja dibuat agar sitemap lebih nyaman digunakan, terutama pada blog dengan jumlah artikel yang sudah banyak.
- Tab kategori atau label otomatis.
- Nama label tetap mengikuti nama asli di Blogger.
- Label tidak otomatis menjadi huruf kapital.
- 50 artikel ditampilkan setiap halaman.
- Nomor artikel dibuat secara manual.
- Nomor halaman 1 dimulai dari 1 sampai 50.
- Nomor halaman 2 dilanjutkan dari 51 sampai 100.
- Nomor halaman 3 dilanjutkan dari 101 sampai 150.
- Artikel terbaru ditampilkan lebih dahulu.
- Tanggal publikasi artikel ditampilkan.
- Artikel baru mendapatkan label Baru!.
- Tab kategori bisa digeser pada perangkat mobile.
- Pagination tersedia untuk berpindah halaman.
- Responsive untuk desktop, tablet, dan smartphone.
1. Label Blogger Ditampilkan Otomatis
Salah satu bagian yang membuat sitemap ini praktis adalah daftar label tidak perlu ditulis satu per satu secara manual.
Script akan membaca halaman sitemap Blogger dan mencari URL label seperti:
/search/label/TeknologiDari URL tersebut, script mengambil nama label kemudian membuatnya menjadi tab kategori.
Jadi ketika blog memiliki label seperti Teknologi, Tips Blogger, Gadget, atau Internet, label tersebut dapat ditampilkan secara otomatis.
2. Label Tidak Dibuat Kapital Otomatis
Ini penting terutama untuk blog yang ingin mempertahankan gaya penulisan nama label.
Misalnya nama label di Blogger adalah:
Tips Blogger
Maka sitemap akan mempertahankan tulisan tersebut.
Tidak akan diubah menjadi:
TIPS BLOGGER
CSS juga menggunakan:
text-transform: none!important;Dengan begitu template Blogger tidak mengubah nama label menjadi uppercase atau capitalize secara otomatis.
3. Pagination 50 Artikel per Halaman
Agar sitemap tidak terlalu panjang, script ini membatasi jumlah artikel menjadi 50 artikel per halaman.
Sistemnya dibuat seperti berikut:
- Halaman 1: artikel 1–50
- Halaman 2: artikel 51–100
- Halaman 3: artikel 101–150
- Halaman 4: artikel 151–200
Script sengaja mengambil 51 artikel dari Blogger Feed. Sebanyak 50 artikel digunakan untuk ditampilkan, sedangkan artikel ke-51 digunakan untuk mengetahui apakah masih ada halaman berikutnya.
postsPerPage: 50,
feedLimit: 51,Jadi kalau feed mengembalikan 51 artikel, sistem mengetahui bahwa tombol Berikutnya masih diperlukan.
4. Nomor Artikel Tetap Berlanjut
Salah satu masalah sitemap menggunakan pagination adalah nomor artikel terkadang kembali ke angka 1 ketika masuk ke halaman berikutnya.
Script ini mengatasinya dengan membuat nomor artikel secara manual menggunakan JavaScript.
Rumus yang digunakan:
var numberingStart =
(
(currentPage - 1) *
CONFIG.postsPerPage
) + 1;Hasilnya menjadi:
- Halaman 1 dimulai dari nomor 1.
- Halaman 2 dimulai dari nomor 51.
- Halaman 3 dimulai dari nomor 101.
- Halaman 4 dimulai dari nomor 151.
Jadi nomor artikel tidak kembali menjadi 1 setiap kali halaman pagination berpindah.
5. Kenapa Nomor Artikel Dibuat Manual?
Secara HTML, kita sebenarnya bisa menggunakan elemen <ol>
untuk membuat daftar bernomor.
Namun pada Blogger, CSS template terkadang memiliki aturan global yang mematikan marker bawaan daftar.
Misalnya:
ol {
list-style: none;
}
Atau aturan lain yang membuat ::marker tidak terlihat.
Akibatnya nomor artikel bisa tiba-tiba hilang.
Karena itu sitemap ini menggunakan elemen manual:
<span class="toc-number">1</span>Nomor kemudian diatur menggunakan CSS Grid sehingga posisinya tetap sejajar dengan judul artikel.
6. Nomor Artikel Tetap Berwarna Hitam
Nomor artikel juga sengaja dibuat tetap berwarna hitam agar tidak ikut berubah ketika link atau tab sedang aktif.
.tabbed-toc .toc-number{
color:#111827!important;
}Dengan begitu tampilannya kurang lebih seperti:
1 Cara Membuat Sitemap Blogger
2 Tutorial Optimasi Blogger
3 Cara Membuat Blog Lebih Cepat
Warna nomor tetap hitam, sedangkan judul artikel dapat berubah warna ketika disentuh atau diarahkan dengan mouse.
7. Artikel Terbaru Ditampilkan Lebih Dahulu
Artikel dalam setiap label diurutkan berdasarkan tanggal publikasi.
Dengan demikian artikel terbaru akan berada di bagian atas.
Sitemap juga memiliki fitur Baru! untuk artikel yang baru dipublikasikan.
Secara default artikel dianggap baru selama 7 hari:
showNew: true,
newDays: 7,Kalau ingin label Baru! muncul selama 14 hari, ubah menjadi:
newDays: 14,8. Tanggal Artikel Menggunakan Bahasa Indonesia
Sitemap juga menampilkan tanggal publikasi artikel.
Format tanggal dibuat lebih mudah dibaca, misalnya:
13 Agustus 2026
Nama bulan sudah menggunakan bahasa Indonesia:
- Januari
- Februari
- Maret
- April
- Mei
- Juni
- Juli
- Agustus
- September
- Oktober
- November
- Desember
9. Tampilan Responsive untuk Smartphone
Sitemap tidak hanya dirancang untuk layar komputer.
CSS sudah menyediakan penyesuaian untuk desktop, tablet, smartphone, HP kecil, hingga layar yang sangat kecil.
Ukuran font, jarak antar artikel, ukuran nomor, tab kategori, dan pagination akan menyesuaikan ukuran layar.
Jadi pembaca tetap bisa menggunakan sitemap dengan nyaman meskipun mengakses blog dari smartphone.
Cara Memasang Sitemap di Blogger
Setelah mengetahui fiturnya, sekarang kita masuk ke bagian pemasangan.
Langkah 1 — Buat Halaman Sitemap
Masuk ke dashboard Blogger kemudian pilih:
Halaman → Halaman Baru
Berikan judul:
Sitemap
Setelah itu buka mode HTML.
Langkah 2 — Pastikan URL Sitemap Sesuai
Pada script terdapat konfigurasi seperti berikut:
blogUrl: 'https://www.fairusmajid.com',
sitemapUrl:
'https://www.fairusmajid.com/p/sitemap.html',Jika menggunakan blog lain, ubah alamat tersebut sesuai domain blog Anda.
Misalnya:
blogUrl: 'https://contohblog.blogspot.com',
sitemapUrl:
'https://contohblog.blogspot.com/p/sitemap.html',Pastikan halaman sitemap memang tersedia pada alamat yang digunakan.
Langkah 3 — Tempel Script
Tempel kode sitemap berikut ke mode HTML halaman Blogger.
Script Sitemap Blogger Lengkap
Berikut script lengkap yang dapat digunakan pada halaman sitemap.
<div class="tabbed-toc" id="tabbed-toc">
<div class="toc-loading">
Memuat kategori artikel...
</div>
</div>
<script>
(function () {
'use strict';
var CONFIG = {
blogUrl:
'https://www.fairusmajid.com',
sitemapUrl:
'https://www.fairusmajid.com/p/sitemap.html',
containerId:
'tabbed-toc',
postsPerPage:
50,
feedLimit:
51,
showDates:
true,
showNew:
true,
newDays:
7,
monthNames: [
'Januari',
'Februari',
'Maret',
'April',
'Mei',
'Juni',
'Juli',
'Agustus',
'September',
'Oktober',
'November',
'Desember'
]
};
var container =
document.getElementById(
CONFIG.containerId
);
if (!container) return;
var LABELS = [];
var currentLabel = '';
var currentPage = 1;
var loading = false;
function escapeHTML(text) {
return String(text || '')
.replace(/&/g, '&')
.replace(/</g, '<')
.replace(/>/g, '>')
.replace(/"/g, '"')
.replace(/'/g, ''');
}
function getTitle(entry) {
if (
entry &&
entry.title &&
entry.title.$t
) {
return entry.title.$t;
}
return 'Tanpa Judul';
}
function getDate(entry) {
if (
entry &&
entry.published &&
entry.published.$t
) {
return entry.published.$t;
}
return '';
}
function getURL(entry) {
if (
!entry ||
!entry.link
) {
return '#';
}
for (
var i = 0;
i < entry.link.length;
i++
) {
if (
entry.link[i].rel ===
'alternate'
) {
return entry.link[i].href;
}
}
return '#';
}
function formatDate(dateString) {
if (
!CONFIG.showDates ||
!dateString
) {
return '';
}
var date =
new Date(dateString);
if (
isNaN(date.getTime())
) {
return '';
}
return (
'<time datetime="' +
escapeHTML(
date.toISOString()
) +
'">' +
String(
date.getDate()
).padStart(
2,
'0'
) +
' ' +
CONFIG.monthNames[
date.getMonth()
] +
' ' +
date.getFullYear() +
'</time>'
);
}
function isNewPost(dateString) {
if (
!CONFIG.showNew ||
!dateString
) {
return false;
}
var postDate =
new Date(dateString);
if (
isNaN(
postDate.getTime()
)
) {
return false;
}
var difference =
(
new Date().getTime() -
postDate.getTime()
) /
(
1000 *
60 *
60 *
24
);
return (
difference >= 0 &&
difference <= CONFIG.newDays
);
}
function sortPosts(posts) {
return posts.sort(
function (a, b) {
return (
new Date(
getDate(b)
).getTime() -
new Date(
getDate(a)
).getTime()
);
}
);
}
function loadLabels() {
return new Promise(
function (
resolve,
reject
) {
var xhr =
new XMLHttpRequest();
xhr.open(
'GET',
CONFIG.sitemapUrl +
'?v=' +
Date.now(),
true
);
xhr.timeout =
15000;
xhr.onload =
function () {
if (
xhr.status < 200 ||
xhr.status >= 300
) {
reject(
new Error(
'Sitemap tidak dapat diakses.'
)
);
return;
}
try {
var parser =
new DOMParser();
var doc =
parser.parseFromString(
xhr.responseText,
'text/html'
);
var links =
doc.querySelectorAll(
'a[href]'
);
var found = {};
for (
var i = 0;
i < links.length;
i++
) {
var href =
links[i]
.getAttribute(
'href'
);
if (!href)
continue;
var match =
href.match(
/\/search\/label\/([^?#]+)/i
);
if (!match)
continue;
var encoded =
match[1];
var label = '';
try {
label =
decodeURIComponent(
encoded
);
} catch (e) {
label =
encoded;
}
label =
label
.replace(
/\+/g,
' '
)
.trim();
if (!label)
continue;
var key =
label.toLowerCase();
if (
!found[key]
) {
found[key] =
true;
LABELS.push(
label
);
}
}
LABELS.sort(
function (
a,
b
) {
return a.localeCompare(
b,
'id',
{
sensitivity:
'base'
}
);
}
);
resolve(
LABELS
);
} catch (
error
) {
reject(
error
);
}
};
xhr.onerror =
function () {
reject(
new Error(
'Gagal mengambil sitemap.'
)
);
};
xhr.ontimeout =
function () {
reject(
new Error(
'Sitemap timeout.'
)
);
};
xhr.send();
}
);
}
function renderHeader() {
return (
'<div class="toc-header">' +
'<div class="toc-title">' +
'<span class="toc-icon">☰</span>' +
'<span>Daftar Artikel</span>' +
'</div>' +
'</div>'
);
}
function renderTabs() {
var html = '';
html +=
'<div class="toc-tabs-wrapper">';
html +=
'<button ' +
'class="toc-scroll-btn toc-scroll-left" ' +
'type="button" ' +
'aria-label="Geser label ke kiri">' +
'‹' +
'</button>';
html +=
'<ul class="toc-tabs" role="tablist">';
for (
var i = 0;
i < LABELS.length;
i++
) {
var label =
LABELS[i];
var labelURL =
CONFIG.blogUrl +
'/search/label/' +
encodeURIComponent(
label
);
html +=
'<li class="toc-tab-item' +
(
label ===
currentLabel
? ' active-tab'
: ''
) +
'">';
html +=
'<a ' +
'class="toc-tab-button" ' +
'href="' +
escapeHTML(
labelURL
) +
'" ' +
'data-label="' +
escapeHTML(
label
) +
'" ' +
'role="tab">';
html +=
escapeHTML(
label
);
html +=
'</a>';
html +=
'</li>';
}
html +=
'</ul>';
html +=
'<button ' +
'class="toc-scroll-btn toc-scroll-right" ' +
'type="button" ' +
'aria-label="Geser label ke kanan">' +
'›' +
'</button>';
html +=
'</div>';
return html;
}
/*
* Fungsi loadLabelFeed, renderPosts,
* renderPagination, showLabel,
* initLabels, initPagination,
* initTabScroller, renderInitial,
* showError dan start digunakan
* untuk memproses feed Blogger,
* pagination dan tab kategori.
*/
})();
</script>Catatan: Untuk pemasangan sebenarnya, gunakan script lengkap JavaScript dan CSS pada blok kode yang disediakan di bagian utama tutorial. Jangan menghapus fungsi JavaScript yang diperlukan karena masing-masing bagian saling terhubung.
Kalau Ingin Mengubah Jumlah Artikel
Secara default sitemap menampilkan 50 artikel per halaman.
Jika ingin mengubahnya menjadi 25 artikel, ubah:
postsPerPage: 50,
feedLimit: 51,menjadi:
postsPerPage: 25,
feedLimit: 26,Kalau ingin 100 artikel:
postsPerPage: 100,
feedLimit: 101,Prinsipnya adalah:
Satu artikel tambahan digunakan untuk mendeteksi apakah halaman berikutnya masih tersedia.
Kesimpulan
Sitemap Blogger sebenarnya bisa dibuat jauh lebih nyaman daripada sekadar daftar panjang berisi link artikel.
Dengan sistem tab kategori dan pagination, pembaca bisa langsung memilih label yang diinginkan tanpa harus mencari artikel dari daftar yang terlalu panjang.
Ditambah penomoran manual, nomor artikel tetap konsisten meskipun berpindah halaman. Halaman pertama dimulai dari 1–50, halaman kedua 51–100, dan halaman berikutnya terus melanjutkan nomor sebelumnya.
Yang tidak kalah penting, nama label tetap mengikuti label Blogger dan tidak dipaksa menjadi huruf kapital. Tampilan juga sudah dibuat responsive sehingga sitemap tetap nyaman digunakan di smartphone.
Jadi kalau blog Anda sudah memiliki puluhan, ratusan, atau bahkan ribuan artikel, model sitemap seperti ini bisa menjadi pilihan yang jauh lebih rapi dan nyaman untuk pembaca.
Posting Komentar untuk "Cara Membuat Sitemap Blogger dengan Tab Kategori dan Pagination 50 Artikel"