Buat Gadget 'Featured Post' Tunjuk Entri Random Bila Berubah Page

Saya nak setiap kali orang klik post atau page lain dekat blog ni, Featured Post pun ikut berubah. Supaya taklah ia asyik tunjuk entri yang sama saja.

Jadi saya tanya kepada Claude AI. Sebab saya sendiri pun tak tahu buat hehe. Agak panjang juga code yang Claude bagi.

Jadi selepas tweak itu dan ini, dapatlah code di bawah.

<b:includable id='main' var='this'>
  <b:if cond='data:title != ""'>
    <h3 class='title'><data:title/></h3>
  </b:if>
  <div class='widget-content'>
    <div id='random-featured-post'>Loading...</div>

    <style>
      #random-featured-post img {
        width: 100%;
        height: auto;
        border-radius: 6px;
        margin-bottom: 10px;
      }
      #random-featured-post h4 { margin: 0 0 8px; }
      #random-featured-post a { text-decoration: none; }
    </style>

    <script>
    //<![CDATA[
    (function () {
      var box = document.getElementById("random-featured-post");

      function esc(s) {
        return s.replace(/&/g, "&amp;")
                .replace(/</g, "&lt;")
                .replace(/>/g, "&gt;")
                .replace(/"/g, "&quot;");
      }

      fetch("/feeds/posts/default?alt=json&max-results=20")
        .then(function (res) { return res.json(); })
        .then(function (data) {
          var here = window.location.pathname;
          var posts = (data.feed.entry || []).filter(function (p) {
            for (var i = 0; i < p.link.length; i++) {
              if (p.link[i].rel === "alternate") {
                return new URL(p.link[i].href).pathname !== here;
              }
            }
            return true;
          });

          if (!posts || posts.length === 0) {
            box.style.display = "none";
            return;
          }

          var post = posts[Math.floor(Math.random() * posts.length)];
          var title = esc(post.title.$t);

          var link = "";
          for (var i = 0; i < post.link.length; i++) {
            if (post.link[i].rel === "alternate") { link = post.link[i].href; }
          }

          var img = "";
          var img2x = "";
          if (post.media$thumbnail) {
            img = post.media$thumbnail.url.replace(/\/s72-c\//, "/s260/");
            img2x = post.media$thumbnail.url.replace(/\/s72-c\//, "/s520/");
          }

          var content = post.summary ? post.summary.$t : (post.content ? post.content.$t : "");
          var text = esc(content.replace(/<[^>]*>/g, "").substring(0, 120)) + "...";

          box.innerHTML =
            (img ? '<a href="' + link + '" tabindex="-1" aria-hidden="true"><img src="' + img + '" srcset="' + img2x + ' 2x" alt=""></a>' : "") +
            '<h4><a href="' + link + '">' + title + '</a></h4>' +
            '<p>' + text + '</p>';
        })
        .catch(function () {
          box.style.display = "none";
        });
    })();
    //]]>
    </script>
  </div>
</b:includable>

Kalau nak guna code ni, ikut langkah-langkah seterusnya di bawah:
(PLATFORM BLOGGER SAHAJA)

Pasang gadget Featured Post dulu di tab Layout. Kemudian Save. Kalau memang dah ada pasang, ok nice.

Pergi ke tab Theme dan klik Edit HTML.

(Sebagai langkah berjaga-jaga, copy dulu (backup) seluruh kod HTML di sini sebelum kita edit. Simpan di Microsoft Word atau Notepad.)

Klik pada butang 'Jump to widget' (lihat gambar bawah) dan cari FeaturedPost1. Nanti dia akan lompat ke kod gadget ni.

Cari kod (kotak pink) macam dalam gambar di bawah dan gantikan dengan code panjang yang Claude beri di atas.

Klik Save.

Nota tambahan:
Nampak tak nombor 20 warna merah dalam kod panjang Claude? Maknanya ia akan pilih entri daripada 20 posts terbaru saja. Boleh ubah kepada nombor yang lebih besar macam 50 kalau nak dia tunjukkan entri lama juga. Tapi ni mungkin akan mempengaruhi kelajuan blog masa loading.

Buat Gadget 'Featured Post' Tunjuk Entri Random Bila Berubah Page

Borang Maklumat Hubungan