Cara Menambahkan Script Auto Update Postingan ke HTML Blogger

Menampilkan postingan terbaru dari Blogger secara otomatis di website tanpa perlu reload halaman adalah fitur yang sangat berguna. Dengan script ini, elemen postingan di situs Anda akan diperbarui secara otomatis setiap kali ada artikel baru, tanpa mengubah desain atau tampilan web. Artikel ini akan menjelaskan langkah-langkah implementasi script tersebut.

Script Hanya Berfungsi Pada Template Plus Ui V2.6

Langkah-Langkah Implementasi

1. Pastikan Template Anda Memiliki Elemen Target

Sebelum menambahkan script, pastikan template Blogger Anda memiliki elemen HTML yang akan diperbarui secara otomatis. Contoh elemen target adalah widget Featured Post dengan struktur seperti ini:

<div id="FeaturedPost1">
    <div class="featured-img">
        <img src="" alt="Featured Image">
    </div>
    <div class="post-title">
        <a href="#">Post Title</a>
    </div>
</div>
    

Catatan: ID elemen (#FeaturedPost1) harus disesuaikan dengan elemen di template Anda. Script ini dirancang untuk memperbarui elemen dengan ID tersebut.

2. Tambahkan Script Auto Update

Tempelkan script berikut di bagian bawah template Blogger Anda, tepat sebelum tag penutup </body>:

<script>
(function () {
    // Gunakan URL feed Blogger dinamis berdasarkan lokasi situs
    const feedUrl = `${window.location.origin}/feeds/posts/default?alt=json`;
    const featuredPostId = "FeaturedPost1";

    async function refreshFeaturedPost() {
        try {
            const response = await fetch(feedUrl);
            if (!response.ok) throw new Error("Failed to fetch feed");

            const data = await response.json();

            // Ambil postingan pertama dari feed
            const post = data.feed.entry[0];
            if (!post) {
                console.error("No posts found in feed.");
                return;
            }

            // Dapatkan elemen utama FeaturedPost
            const featuredPost = document.getElementById(featuredPostId);
            if (!featuredPost) {
                console.error(`Element with ID '${featuredPostId}' not found.`);
                return;
            }

            // Periksa elemen-elemen child yang perlu diperbarui
            const imgElement = featuredPost.querySelector(".iThmb .imgThm");
            const titleLink = featuredPost.querySelector(".pTtl a");
            const snippetElement = featuredPost.querySelector(".pSnpt");
            const timeElement = featuredPost.querySelector("time");

            if (!imgElement || !titleLink || !snippetElement || !timeElement) {
                console.error(
                    "One or more child elements (.imgThm, .pTtl a, .pSnpt, time) are missing."
                );
                return;
            }

            // Dapatkan data dari feed
            const link = post.link.find((l) => l.rel === "alternate").href;
            const imageUrl = post.media$thumbnail?.url || "";
            const title = post.title.$t;
            const snippet = post.summary?.$t || "";
            const publishedDate = post.published.$t;

            // Update elemen-elemen dengan konten baru
            imgElement.src = imageUrl;
            imgElement.alt = title;
            titleLink.href = link;
            titleLink.textContent = title;
            snippetElement.textContent = snippet;
            timeElement.textContent = new Date(publishedDate).toLocaleDateString();

            console.log("Featured Post updated successfully!");
        } catch (error) {
            console.error("Error updating Featured Post:", error);
        }
    }

    // Jalankan pembaruan pertama kali dan secara berkala
    refreshFeaturedPost();
    setInterval(refreshFeaturedPost, 30000);
})();
</script>
    

3. Simpan Template

Setelah menambahkan script, klik Simpan di editor template Blogger.

Hasil Akhir

Setelah semua langkah selesai, berikut hasil yang akan Anda dapatkan:

• Postingan Terbaru Ditampilkan Secara Real-Time: Widget Featured Post akan secara otomatis memperbarui kontennya dengan postingan terbaru yang Anda publikasikan di Blogger.
• Desain Web Tetap Tidak Berubah: Script ini hanya memperbarui konten di dalam elemen yang memiliki ID FeaturedPost1. Tampilan desain keseluruhan website Anda akan tetap sama seperti sebelumnya.
• Kompatibilitas dengan Elemen Lain: Anda dapat menyesuaikan ID elemen (FeaturedPost1) sesuai dengan struktur elemen di template Anda. Pastikan ID yang Anda masukkan di script sesuai dengan ID elemen target.

Kesimpulan

Script auto-update ini memastikan postingan terbaru langsung muncul di website tanpa perlu reload halaman, dan desain web Anda tetap tidak berubah sedikit pun. Dengan demikian, pengunjung dapat menikmati pengalaman browsing yang lebih lancar dan dinamis. Selamat mencoba! 🚀

Baca juga :