Membuat Widget Daftar Artikel Blog Dengan Bantuan AI

Ditulis oleh Dea Maulana pada 22:44 | 14 Jun 2025

Di era Kecerdasan buatan/AI ini, kita hanya perlu niat belajar dan kesungguhan untuk bisa melakukan sesuatu. Karena AI mampu membimbing kita untuk mewujudkan apa yang kita mau walaupun awalnya kita tidak tahu apa yang harus diperbuat. Cukup tanyakan hal tersebut pada AI, maka AI akan memberikan tutorial langkah-langkah yang harus diperbuat untuk mencapai apa yang kita inginkan. Dalam hal ini saya membuat Widget Daftar Artikel Blog Dengan Bantuan AI ChatGPT. Walaupun saya tidak terlalu paham bahasa coding, dengan bantuan AI saya bisa membuat widget Daftar Artikel Blog yang keren dengan navigasi yang intuitif, ringan, dan elegan.

Perintah pertama yang saya berikan kepada Neng AI ChatGPT kurang lebih seperti ini.

Kemudian Neng AI ChatGPT memberikan kode widgetnya lengkap dengan langkah cara penerapan kode nya seperti apa. Jadi buat kamu yang pemula, tidak ada alasan untuk tidak bisa melakukannya.

Dan inilah tampilan awal widget Daftar Artikel Blog, hasil dari perintah yang saya berikan kepada Neng AI ChatGPT.

Sederhana sekali dan masih jauh dari apa yang saya harapkan. Lalu saya menjelaskan apa yang saya inginkan secara bertahap, mulai dari struktur widget, warna, hingga interaksi tombol. Setiap kali saya kurang puas, saya memberi tahu perubahan yang diinginkan dan AI pun langsung menyesuaikan kodenya. Hasilnya? Widget yang tampil profesional dan dinamis, seperti yang saya bayangkan!

Widget ini menggunakan data dari RSS Feed Blogger (format JSON) untuk menampilkan 5 artikel terbaru. Pengunjung bisa melihat artikel lainnya dengan tombol navigasi, dan kembali ke artikel terbaru dengan satu klik. Setiap judul artikel ditampilkan dalam kotak bergaris tipis dengan warna khas blog saya, serta menampilkan jumlah komentar secara real-time. Kamu tertarik mencobanya? Berikut adalah hasil akhir kode widget yang saya buat dengan bantuan AI ChatGPT.

<!-- Widget Daftar Artikel Deafile Bedah Blog -->
<div class="widget-title-artikel">
  <h3>Daftar Artikel</h3>
  <ul id="judul-artikel-terbaru"></ul>
  <div class="artikel-nav">
    <button id="btn-prev">Sebelumnya</button>
    <button id="btn-beranda">Beranda</button>    
    <button id="btn-next">Selanjutnya</button>
  </div>
</div>

<script>
  let page = 0;
  const maxResults = 5;
  const container = document.getElementById("judul-artikel-terbaru");
  const nextBtn = document.getElementById("btn-next");
  const prevBtn = document.getElementById("btn-prev");
  const homeBtn = document.getElementById("btn-beranda");

  function updateButtons(totalEntries) {
    const isFirstPage = page === 0;
    const isLastPage = (page + 1) * maxResults >= totalEntries;

    prevBtn.style.display = isFirstPage ? "none" : "inline-block";
    homeBtn.style.display = isFirstPage ? "none" : "inline-block";
    nextBtn.style.display = isLastPage ? "none" : "inline-block";
  }

  function loadArticles() {
    const startIndex = page * maxResults + 1;
    const url = `https://deafile.blogspot.com/feeds/posts/default?alt=json&start-index=${startIndex}&max-results=${maxResults}&orderby=published`;

    fetch(url)
      .then(res => res.json())
      .then(data => {
        const entries = data.feed.entry;
        const totalEntries = parseInt(data.feed.openSearch$totalResults.$t);

        if (!entries || entries.length === 0) {
          container.innerHTML = "<li>Tidak ada artikel.</li>";
          return;
        }

        container.innerHTML = "";
        entries.forEach(entry => {
          const title = entry.title.$t;
          const link = entry.link.find(l => l.rel === "alternate").href;
          const commentCount = entry.thr$total ? parseInt(entry.thr$total.$t) : 0;

          const li = document.createElement("li");
          li.innerHTML = `
            <a href="${link}" target="_blank">${title}</a>
            <span class="komentar-count">${commentCount} Komentar</span>
          `;
          container.appendChild(li);
        });

        updateButtons(totalEntries);
      })
      .catch(err => {
        console.error("Gagal memuat artikel:", err);
        container.innerHTML = "<li>Gagal memuat artikel.</li>";
      });
  }

  nextBtn.addEventListener("click", () => {
    page++;
    loadArticles();
  });

  prevBtn.addEventListener("click", () => {
    if (page > 0) {
      page--;
      loadArticles();
    }
  });

  homeBtn.addEventListener("click", () => {
    page = 0;
    loadArticles();
  });

  loadArticles();
</script>

<style>
  .widget-title-artikel {
    padding: 6px;
    border: 1px solid #ccc;
    background: #fff;
    border-left: 4px solid #008C5F;
    border-radius: 6px;
    font-family: 'Segoe UI', sans-serif;
    margin-bottom: 12px;
  }

  .widget-title-artikel h3 {
    font-size: 14px;
    color: #008C5F;
    margin-bottom: 6px;
    border-bottom: 1px solid #e0e0e0;
    padding-bottom: 3px;
  }

  .widget-title-artikel ul {
    list-style: none;
    padding-left: 0;
    margin: 0;
  }

  .widget-title-artikel li {
    margin-bottom: 4px;
  }

  .widget-title-artikel li a {
    display: block;
    padding: 4px 6px;
    border: 1px solid #008C5F;
    border-radius: 4px 4px 0 0;
    text-decoration: none;
    color: #008C5F;
    font-weight: 500;
    font-size: 13px;
  }

  .widget-title-artikel .komentar-count {
    display: block;
    border: 1px solid #008C5F;
    border-top: none;
    padding: 3px 6px;
    border-radius: 0 0 4px 4px;
    color: #333;
    font-size: 11px;
    background-color: #f9f9f9;
  }

  .artikel-nav {
    display: flex;
    justify-content;
    gap: 3px;
    margin-top: 6px;
    flex-wrap: wrap;
  }

  .artikel-nav button {
    padding: 2px 3px;
    background-color: #008C5F;
    color: #fff;
    border: none;
    border-radius: 3px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    flex: 1;
    font-size: 11px;
  }

  .artikel-nav button:hover {
    background-color: #006f4a;
  }

  .artikel-nav button:disabled {
    background-color: #ccc;
    cursor: not-allowed;
  }
</style>

Silahkan Copy Paste kode diatas dan pasang di blog yang kamu miliki, jangan lupa untuk mengganti link blog deafile.blogspot.com dengan link blog yang kamu miliki. Jika masih belum paham dengan apa yang saya sampaikan, silahkan bertanya di kolom komentar, atau kamu bisa mulai bertanya kepada Neng AI :D

14 Jun 2025

Membuat Widget Daftar Artikel Blog Dengan Bantuan AI

Artikel Terkait

0 Komentar:

Posting Komentar

Daftar Artikel

Postingan Populer

Ikuti Blog ini

Profil Admin

Kotak Diskusi