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.