Kode Menambahkan Widget Related Posts Dengan Gambar Yang Jernih

Berikut adalah kode lengkap untuk menambahkan widget Related Posts dengan gambar yang jernih di Blogger menggunakan gadget HTML/JavaScript melalui Tata Letak. Saya akan memastikan gambar yang digunakan memiliki kualitas lebih baik dan tampil proporsional.

Langkah 1: Menambahkan Kode HTML, CSS, dan JavaScript untuk Related Posts

1. Masuk ke Blogger Dashboard.
2. Pilih Tata Letak > Tambah Gadget.
3. Pilih HTML/JavaScript.
4. Tempelkan kode di bawah ini ke dalam kotak konten dan klik Simpan.

Kode HTML, CSS, dan JavaScript untuk Related Posts

<style>

  .related-posts {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
  }

  .related-post {
    width: calc(33.33% - 20px);
    box-sizing: border-box;
    text-align: center;
  }

  .related-post img {
    width: 100%;
    height: auto; /* Menjaga rasio aspek gambar */
    border-radius: 8px;
    object-fit: cover; /* Mengisi area tanpa merusak proporsi gambar */
  }

  .related-post h3 {
    font-size: 14px;
    margin-top: 10px;
  }

  @media (max-width: 768px) {
    .related-post {
      width: calc(50% - 20px);
    }
  }

  @media (max-width: 480px) {
    .related-post {
      width: 100%;
    }
  }
</style>

<div id="related-posts" class="related-posts"></div>

<script>
  (function() {
    var postsContainer = document.getElementById('related-posts');
    
    // Mengambil feed postingan terbaru menggunakan API Blogger (RSS Feed)
    var feedUrl = 'https://expert160.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=5';  // Ganti 'yourblog' dengan URL blog Anda
    
    var script = document.createElement('script');
    script.src = feedUrl + '&callback=showRelatedPosts';
    document.body.appendChild(script);
    
    window.showRelatedPosts = function(response) {
      var posts = response.feed.entry;
      if (posts) {
        posts.forEach(function(post) {
          var title = post.title.$t;
          var url = post.link.find(link => link.rel === 'alternate').href;
          var imageUrl = post.media$thumbnail ? post.media$thumbnail.url.replace(/\/s72-c\//, '/s600-c/') : 'https://via.placeholder.com/600x400.png?text=No+Image';
          
          var postDiv = document.createElement('div');
          postDiv.classList.add('related-post');
          postDiv.innerHTML = `
            <a href="${url}">
              <img src="${imageUrl}" alt="${title}" width="600" height="400">
              <h3>${title}</h3>
            </a>
          `;
          postsContainer.appendChild(postDiv);
        });
      }
    };
  })();
</script>

Penjelasan Kode:

1. CSS:

   • object-fit: cover;: Memastikan gambar di thumbnail tetap proporsional dan mengisi seluruh area.
   • width: 100%; dan height: auto;: Menjaga rasio gambar agar tidak terdistorsi.
   • @media (max-width: 768px): Responsif, akan menampilkan 2 kolom pada perangkat tablet.
   • @media (max-width: 480px): Responsif, menampilkan 1 kolom pada perangkat ponsel.

2. JavaScript:

   • RSS Feed Blogger: Mengambil data postingan terbaru dari feed blog Anda.
   • Perubahan URL Gambar: Menyesuaikan gambar agar lebih besar, mengganti ukuran gambar thumbnail dari default /s72-c/ menjadi /s600-c/ untuk meningkatkan kualitas gambar.
   • Gambar Placeholder: Jika tidak ada gambar unggulan, akan menampilkan gambar placeholder dengan ukuran 600x400 px.

3. Menambahkan Gambar yang Lebih Jernih:

   • replace(/\/s72-c\//, '/s600-c/'): Mengubah ukuran gambar dari thumbnail kecil (72px) menjadi ukuran gambar lebih besar (600px).
   • Gambar yang lebih besar akan membuat gambar thumbnail lebih jernih di halaman blog Anda.

Langkah 2: Ganti URL Feed Blog

Pastikan Anda mengganti bagian berikut dengan URL feed blog Anda yang sesuai:

var feedUrl = 'https://expert160.blogspot.com/feeds/posts/default?alt=json-in-script&max-results=5';

Gantilah yourblog.blogspot.com dengan URL blog Anda.

Langkah 3: Menyimpan Gadget

Setelah menempelkan kode di atas ke dalam gadget HTML/JavaScript, klik Simpan dan atur posisi gadget di tata letak blog Anda.

Hasil

Gadget ini akan menampilkan 3 hingga 5 postingan terkait dengan gambar jernih dan judul postingan di bawah gambar. Gambar akan disesuaikan ukuran dan kualitasnya, sehingga tampak lebih jelas dan tajam.

Jika Anda mengalami masalah lebih lanjut atau ada bagian yang tidak berfungsi, beri tahu saya!