Kode HTML Javascript Related Posts HD Terbaru Mode Elit Tapi Ringan

Related Posts HD Moderen Mode Elit Tapi Ringan

Pendahuluan

Sebelum eksekusi silahkan siapkan kopi dan baca doa dahulu agar pekerjan berjalan lancar dan tidak ada kendala apapun. Namun dengaan mengikuti tutorial ini tangungjawab dan resiko anda tangung sediri.

Lanjut masuk Bloger, Tata Letak dan tingggal klik Tambah Gadget pilih HTML Javascript di tempat yang kamu inginkan, kopi diseruput dan copy kode yang gue siapin di bawah pastekan di kotak bawah HTML Javascript. Ganti alamat blog dengan alamat blolog anda dan klik simpan

Berikut KODE UTUH THUMBNAIL BURAM tinggal COPAS, pasang di HTML/JS Gadget Blogger atau di dalam post (mode HTML).
✔ Tajam
✔ Responsif
✔ Ringan
✔ Aman semua pola thumbnail Blogger

---

🔥 KODE UTUH PAMUNGKAS (ANTI BURAM)

<div id='modern-related-box'>
  <div id='related-target' class='rp-grid-container'>Memuat...</div>
</div>

<style>
/* ===============================
   MODERN RELATED POSTS – HD
   =============================== */
#modern-related-box {
  margin: 20px 0;
  clear: both;
}

.rp-grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 15px;
}

.rp-item-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #eee;
  overflow: hidden;
  transition: 0.3s;
  text-decoration: none !important;
  display: block;
}

.rp-item-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

.rp-thumb-area {
  width: 100%;
  height: 120px;
  overflow: hidden;
  background: #f5f5f5;
}

.rp-thumb-area img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.rp-text-area {
  padding: 8px;
}

.rp-text-area h4 {
  margin: 0;
  font-size: 13px;
  line-height: 1.4;
  color: #333;
  font-weight: 600;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

@media (max-width: 480px) {
  .rp-grid-container {
    grid-template-columns: 1fr 1fr 1fr;
    gap: 8px;
  }
  .rp-thumb-area {
    height: 80px;
  }
  .rp-text-area h4 {
    font-size: 11px;
  }
}
</style>

<script type='text/javascript'>
//<![CDATA[
function getRelatedPostsHD(json) {
  var container = document.getElementById('related-target');
  var html = '';

  if (!json.feed.entry) {
    container.innerHTML = '';
    return;
  }

  for (var i = 0; i < json.feed.entry.length; i++) {
    var entry = json.feed.entry[i];
    var title = entry.title.$t;
    var link = '';

    for (var j = 0; j < entry.link.length; j++) {
      if (entry.link[j].rel === 'alternate') {
        link = entry.link[j].href;
        break;
      }
    }

    var imgUrl = entry.media$thumbnail
      ? entry.media$thumbnail.url
          .replace(/\/s[0-9]+(-c)?/, '/s800')
          .replace(/=s[0-9]+(-c)?/, '=s800')
          .replace(/=w[0-9]+-h[0-9]+/, '=s800')
      : 'https://placehold.jp/800x500.png?text=No+Image';

    if (imgUrl.indexOf('blank.gif') !== -1) {
      imgUrl = 'https://placehold.jp/800x500.png?text=No+Image';
    }

    html += '<a class="rp-item-card" href="' + link + '">';
    html += '<div class="rp-thumb-area">';
    html += '<img loading="lazy" src="' + imgUrl + '" alt="' + title + '">';
    html += '</div>';
    html += '<div class="rp-text-area"><h4>' + title + '</h4></div>';
    html += '</a>';
  }

  container.innerHTML = html;
}

(function() {
  var script = document.createElement('script');
  script.src = 'https://expert160.blogspot.com/feeds/posts/default?alt=json-in-script&callback=getRelatedPostsHD&max-results=9';
  document.body.appendChild(script);
})();
//]]>
</script>

---

✅ HASIL YANG DIDAPAT

✔ Thumbnail HD tajam (s800)
✔ Tidak ada thumbnail pecah
✔ Lazyload aktif
✔ Grid auto responsif
✔ Aman untuk template Emporio / custom

---

⚠️ CATATAN TAKTIS

• Upload gambar minimal 1200px di post

• Hindari gambar hasil download ulang WA

• Rasio aman 16:9