Membuat Menu Halaman Kategori Konten Dinamis di Blogger

Walaupun fitur membuat halaman yang tersedia di Blogger tergolong statis, namun dengan cara ini kita bisa memodifikasinya menjadi sebuah static page dengan isi konten dinamis mengikuti update terbaru sesuai pilihan label.

Ketertarikan mas Dirman ingin mencoba membuat halaman dengan fitur isi konten statis seperti sitemap di Blogger ini berawal saat menemukan dan mengunjungi sebuah blog keren yaitu situs Digitalpoin.com.

Di blog tersebut tersedia menu utama di atas header dengan fitur menampilkan konten dengan filter label yang sudah ditentukan untuk ditampilkan. Jika masih penasaran seperti apa hasilnya, silakan berkunjung ke Halaman Kategori Teknologi di blog dirman.web.id.

Membuat Menu Halaman Kategori Konten Dinamis di Blogger

Cara Membuat

Agar tidak berlama-lama, mari kita langsung ke pembahasan utama yaitu bagaimana cara membuat halaman statis di Blogger dimodifikasi menjadi sebuah halaman dengan menampilkan update konten terbaru secara otomatis dan dinamis.

1. Buat halaman statis di Blogger

Atau jika sudah tersedia halaman yang akan dimodifikasi, silakan gunakan di halaman tersebut saja. Ini tidak akan merubah struktur kode html utama pada template Blogger, jadi akan aman-aman saja jika langsung dicoba dipraktikkan karena hanya akan merubah atau membuat halaman baru.

2. Gunakan kode berikut

Setelah membuat halaman baru atau pada halaman lama yang telah tersedia sebelumnya, pastikan beralih ke mode HTML View (bukan mode Compose) dan tempelkan kode di bawah ini:

<style>
#recent-posts {
    color: #333;
    font-size: 14px;
    font-family: Arial, sans-serif;
    width: 100%;
    padding: 10px;
}
.post-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}
.post-item:last-child {
    border-bottom: none;
}
.post-item img {
    width: 80px;
    height: 80px;
    border-radius: 4px;
    object-fit: cover;
}
.post-item a {
    font-weight: bold;
    text-decoration: none;
    color: #222;
    font-size: 16px;
    display: block;
}
.post-item .desc {
    font-size: 12px;
    color: #666;
}
#load-more {
    display: block;
    width: 100%;
    text-align: center;
    background: #007bff;
    color: white;
    padding: 10px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    margin-top: 10px;
}
#load-more:hover {
    background: #0056b3;
}
</style>

<div id="recent-posts">Memuat konten...</div>
<button id="load-more" style="display:none;">Tampilkan konten selanjutnya ▼</button>

<script>
const rcp_numposts = 5;
let rcp_offset = 0;
const rcp_label = "Teknologi";
const rcp_comment = "Komentar";
const rcp_disable = "🔒 Review";
const apiUrl = `https://www.blogger.com/feeds/BlogID/posts/default/-/${rcp_label}/?alt=json`;

async function fetchRecentPosts(loadMore = false) {
    const recentPostsContainer = document.getElementById("recent-posts");
    const loadMoreBtn = document.getElementById("load-more");

    if (!loadMore) {
        recentPostsContainer.innerHTML = "Memuat konten...";
        rcp_offset = 0;
    }

    try {
        let response = await fetch(`${apiUrl}&start-index=${rcp_offset + 1}&max-results=${rcp_numposts}`);
        let data = await response.json();
        let entries = data.feed.entry || [];

        if (!entries.length) {
            loadMoreBtn.style.display = "none";
            if (!loadMore) recentPostsContainer.innerHTML = "<p>Tidak ada posting terbaru.</p>";
            return;
        }

        let content = loadMore ? recentPostsContainer.innerHTML : "";
        for (let i = 0; i < entries.length; i++) {
            let entry = entries[i];
            let postTitle = entry.title.$t;
            let postUrl = entry.link.find(link => link.rel === "alternate")?.href || "#";
            let postSnippet = (entry.content?.$t || entry.summary?.$t || "").replace(/<[^>]*>/g, '').substring(0, 120);
            let postDate = `${entry.published.$t.substring(8, 10)}/${entry.published.$t.substring(5, 7)}/${entry.published.$t.substring(0, 4)}`;
            let commentsNum = entry.thr$total ? `💬 ${entry.thr$total.$t} ${rcp_comment}` : rcp_disable;
            let postThumb = entry.media$thumbnail?.url || "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhKF3CJ7K6aCxvYX3IG0TPy_cLTiG80kD6QK3R0x3O-DGkgO2DiIrmfUr-Bc5066QKzkzfGZbA6c8Qxv-j6cCjMHLytH4A45OjZRvVaJzoYFE_Mv8O3R4kCNgm4hSGt5KxHW_-d9woBqT8O2FwGXDI0eH2RyWkfEdq-L8MG06R5yRDwmhEYUg0Dbh3I/s640/Dirman.web.id%20-%20With%20No%20Image.png";

            content += `
                <div class="post-item">
                    <img alt="Thumbnail ${postTitle}" src="${postThumb}" loading="lazy"/>
                    <div>
                        <a href="${postUrl}" target="_blank" title="${postSnippet}">${postTitle}</a>
                        <p class="desc">${postSnippet}...</p>
                        <span style="font-size:12px; color:#888;">🗓 ${postDate} - ${commentsNum}</span>
                    </div>
                </div>
            `;
        }
        recentPostsContainer.innerHTML = content;
        loadMoreBtn.style.display = "block";

        rcp_offset += rcp_numposts;
    } catch (error) {
        recentPostsContainer.innerHTML = "<p>Terjadi kegagalan saat mengambil data. Silakan reload/refresh halaman ini.</p>";
        console.error("Error fetching posts:", error);
    }
}

document.getElementById("load-more").addEventListener("click", () => fetchRecentPosts(true));

fetchRecentPosts();
</script>

3. Edit sesuai kebutuhan

Beberapa fitur pada kode yang dapat diedit dan disesuaikan dengan kebutuhan adalah sebagai berikut:

const rcp_numposts = 5: sesuaikan dengan keinginan berapa jumlah posting yang akan ditampilkan.
const rcp_label = "Teknologi": ganti dengan nama label yang akan ditampilkan kontennya. Pastikan penulisannya sesuai termasuk jika ada karakter atau nomor sebelum dan sesudah nama label.
const apiUrl = `https://www.blogger.com/feeds/BlogID/posts/default/-/${rcp_label}/?alt=json`: ubah sesuai dengan halaman feed. Jika langsung menggunakan halaman xml feed dengan nama url maka pastikan alamatnya sudah sesuai (contoh: https://www.dirman.web.id/feeds/posts/default). -- mas Dirman sendiri lebih suka menggunakan feed dengan identifikasi BlogID agar berbeda saja, fungsinya tetap sama, kok.

4. Simpan dan selesai!

Setelah selesai melakukan editorial dan penyesuaian, silakan simpan atau publikasikan halaman tersebut kemudian periksa hasilnya.

Mudah bukan? jika ingin melakukan perubahan lebih lanjut untuk kebutuhan mempercantik atau menyesuaikan tampilannya, silakan edit bagian css pada kode yang diawali dengan <style> dan berakhir dengan </style>

Jika menemukan kesulitan atau ada yang ingin ditenyakan, silakan berkunjung ke Grup Telegram NarablogID untuk diskusi bersama.

Penutup

Demikian panduan mudah tentang bagaimana cara membuat menu halaman kategori konten dinamis pada halaman statis Blogger untuk menambah fitur blog agar menjadi lebih menarik dan mempermudah pengunjung agar menemukan konten sesuai dengan kategori/label yang tersedia.

Sumber ide dan inspirasi

DigitalPoin.com: tempat di mana ide ini ditemukan.
Blog kang Ismet: Inspirasi menemukan kode awal sebelum dimodifikasi menyesuaikan fungsi dan kebutuhan.

Semoga bermanfaat.