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.

Catatan: Script ini hanya berfungsi pada template Plus Ui V2.6.

Langkah-Langkah Implementasi

1. Pastikan Template Anda Memiliki Elemen Target

Pastikan template Blogger Anda memiliki elemen HTML yang akan diperbarui. Misalnya, widget Featured Post berikut:

<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: Pastikan ID elemen FeaturedPost1 sesuai dengan struktur template Anda.

2. Tambahkan Script Auto Update

Tempelkan script berikut sebelum tag penutup </body> di template Blogger:

<script>
(function () {
  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();
      const post = data.feed.entry?.[0];
      if (!post) return console.error("No posts found in feed.");

      const featuredPost = document.getElementById(featuredPostId);
      if (!featuredPost) return console.error(`Element #${featuredPostId} not found.`);

      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)
        return console.error("Required elements missing inside #FeaturedPost1");

      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;

      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 (err) {
      console.error("Error updating Featured Post:", err);
    }
  }

  refreshFeaturedPost();
  setInterval(refreshFeaturedPost, 30000);
})();
</script>
  

3. Simpan Template

Setelah menambahkan script, klik Simpan di editor template Blogger Anda.

Hasil Akhir

• Postingan Terbaru Real-Time: Postingan otomatis diperbarui tanpa perlu reload.
• Tampilan Tidak Berubah: Hanya konten dalam elemen #FeaturedPost1 yang diubah.
• Mudah Disesuaikan: Anda dapat mengganti ID elemen jika diperlukan.

Dengan script auto-update ini, postingan terbaru langsung muncul tanpa perlu refresh halaman, menjadikan pengalaman pengunjung lebih dinamis dan lancar. Fitur ini cocok bagi Anda yang ingin menampilkan konten terbaru secara instan tanpa mengganggu desain situs. Selamat mencoba! 🚀