Cara Membuat Postingan dan Memunculkan Postingan Tertentu Berdasarkan Label di Blogger

Oleh: Lubis Teknisi Indonesia

Optimasi Struktur Blog: Menampilkan Dynamic Feed Menggunakan Script JSON

Mengelola sebuah blog dengan jumlah artikel yang banyak tentu memerlukan pengorganisasian yang rapi. Salah satu fitur bawaan Blogger yang sangat krusial namun sering kali dilewatkan fungsinya adalah sistem Label atau Kategori. Dengan pengelolaan label yang tepat, kita tidak hanya mempermudah navigasi pengunjung, tetapi juga bisa melakukan trik pemrograman web tingkat lanjut.

Pada panduan kali ini, kita akan mengupas tuntas cara membuat postingan dengan pengelompokan yang benar, serta bagaimana cara memanggil atau memunculkan daftar postingan tertentu saja di dalam sebuah halaman artikel secara otomatis berbasis JavaScript JSON Feed. Teknik ini sangat ampuh untuk membuat halaman portofolio, daftar isi dinamis, maupun widget rekomendasi artikel sejenis yang ramah SEO.

1. Langkah Membuat Postingan dengan Label yang Benar

Sebelum kita bisa memunculkan data artikel secara spesifik, struktur data pada database Blogger Anda harus seragam terlebih dahulu. Ikuti langkah pembuatan pengelompokan ini:

Buka dashboard Blogger, lalu buat postingan baru atau edit postingan yang sudah ada.
Perhatikan panel sebelah kanan pada kolom Label.
Ketikkan nama kategori yang spesifik, misalnya Alarm Motor atau Tutorial Blogger.
Catatan Penting: Penulisan label bersifat case-sensitive (sensitif terhadap huruf besar dan kecil). Jika Anda menulis Alarm Motor, jangan menulis alarm motor di artikel lain karena sistem pembacaan script akan menganggapnya sebagai dua kategori yang berbeda.
Klik publikasikan atau perbarui artikel Anda.

2. Kode Script Pemanggil Feed Berdasarkan Label

Berikut adalah script materi yang bisa Anda gunakan untuk memanggil postingan tertentu berdasarkan label. Anda bisa menyalin kode ini untuk diterapkan di halaman lain:

Source Code JSON Feed Blogger

<div id="feed-loader">🔄 Menyinkronkan database...</div>
<ul id="motor-feed-container"></ul>

<script>
function loadArticles(json) {
    var container = document.getElementById("motor-feed-container");
    var loader = document.getElementById("feed-loader");
    var htmlMarkup = "";
    if (json.feed.entry) {
        for (var i = 0; i < json.feed.entry.length; i++) {
            var entry = json.feed.entry[i];
            var title = entry.title.$t;
            var postUrl;
            for (var j = 0; j < entry.link.length; j++) {
                if (entry.link[j].rel == 'alternate') { postUrl = entry.link[j].href; break; }
            }
            htmlMarkup += '<li><a href="' + postUrl + '">' + (i + 1) + '. ' + title + '</a></li>';
        }
        loader.style.display = "none";
        container.innerHTML = htmlMarkup;
    }
}
</script>
<script src="/feeds/posts/default/-/Alarm%20Motor?alt=json-in-script&callback=loadArticles&max-results=50"></script>

3. Panduan Cara Pemasangan Kode di Blogger

Untuk memasang script pemanggil di atas ke dalam postingan atau halaman statis tertentu di blog Anda, ikuti langkah-langkah mudah berikut ini:

Salin Script: Klik tombol Salin Kode pada kotak hitam di atas.
Buat Halaman/Postingan Baru: Masuk ke dashboard Blogger Anda, lalu pilih menu Postingan Baru atau Halaman Baru.
Masuk ke Mode HTML: Klik ikon Pensil (✏️) di pojok kiri atas editor, lalu ubah pilihannya menjadi Tampilan HTML. Hapus semua kode bawaan yang ada di sana jika ada.
Tempelkan Kode: Tempelkan (Paste) kode yang sudah Anda salin tadi ke dalam kolom editor HTML tersebut.
Sesuaikan Nama Label: Perhatikan baris paling akhir pada kode di dalam kotak: /-/Alarm%20Motor. Ganti teks Alarm%20Motor dengan nama label yang ingin Anda munculkan artikelnya (Gunakan kode %20 sebagai pengganti spasi).
Publikasikan: Berikan judul pada postingan Anda, lalu klik tombol Publikasikan di pojok kanan atas.