Kode Sakti Blogger: Menampilkan Postingan dengan Thumbnail + Navigasi!

 

Halo, para petualang Blogger!  Apakah kamu sedang mencari kode rahasia untuk menampilkan daftar postingan dengan gambar thumbnail, judul, cuplikan isi, serta tombol Next & Previous?

Tenang, kamu berada di tempat yang tepat! Karena kali ini, kita akan membongkar "Kode Sakti Blogger" yang akan membuat blogmu makin kece, interaktif, dan tentunya

Masalah Blogger yang Bikin Pusing!

Banyak blogger mengalami masalah seperti:
Postingan tidak muncul dengan thumbnail yang rapi
Tidak ada tombol Next & Previous, bikin pengunjung tersesat
Cuplikan isi postingan terlalu panjang atau berantakan

Jika blogmu mengalami masalah di atas, jangan panik! Karena dengan kode berikut, blogmu akan tampil lebih profesional, SEO-friendly, dan tentu saja, makin menarik buat pengunjung!

Kode Sakti Blogger!

 Salin & Tempel di Halaman Blogger-mu!

<h2> Postingan Terbaru di Blog! </h2>
<div id="blog-posts"></div>

<!-- Tombol Navigasi -->
<div style="margin-top: 15px; text-align: center;">
  <button id="prevBtn" onclick="changePage(-1)" disabled>⬅️ Sebelumnya</button>
  <button id="nextBtn" onclick="changePage(1)">Berikutnya ➡️</button>
</div>

<script>
  var blogURL = "https://NAMA-BLOG.blogspot.com"; // Ganti dengan blog kamu
  var label = "Linux"; // Ubah sesuai label postingan yang diinginkan
  var maxPosts = 5; // Jumlah postingan per halaman
  var startIndex = 1;
  var prevPageTokens = [];

  function loadPosts() {
    var feedUrl = blogURL + `/feeds/posts/default/-/${label}?alt=json&max-results=${maxPosts}&start-index=${startIndex}`;

    fetch(feedUrl)
      .then(response => response.json())
      .then(data => {
        var posts = data.feed.entry;
        var output = "<ul style='list-style:none;padding:0;'>";

        for (var i = 0; i < posts.length; i++) {
          var post = posts[i];
          var title = post.title.$t;
          var link = post.link.find(l => l.rel === "alternate").href;
          var content = post.content ? post.content.$t : (post.summary ? post.summary.$t : "");
          var snippet = content.replace(/<[^>]*>?/gm, '').substring(0, 100) + "...";

          // Ambil gambar pertama dari postingan
          var imgSrc = "https://via.placeholder.com/150"; // Default gambar jika tidak ada
          var imgTag = post.content ? post.content.$t.match(/<img.*?src="(.*?)"/) : null;
          if (imgTag && imgTag[1]) {
            imgSrc = imgTag[1];
          }

          output += `<li style="margin-bottom:15px;display:flex;align-items:center;">
                      <img src="${imgSrc}" style="width:100px;height:100px;margin-right:10px;border-radius:5px;">
                      <div>
                        <h3 style="margin:0;"><a href="${link}" target="_blank">${title}</a></h3>
                        <p style="margin:0;font-size:14px;color:#555;">${snippet}</p>
                      </div>
                    </li>`;
        }

        output += "</ul>";
        document.getElementById("blog-posts").innerHTML = output;

        // Update tombol navigasi
        document.getElementById("prevBtn").disabled = prevPageTokens.length === 0;
        document.getElementById("nextBtn").disabled = posts.length < maxPosts;
      })
      .catch(error => console.error("Error fetching posts:", error));
  }

  function changePage(direction) {
    if (direction === 1) {
      prevPageTokens.push(startIndex);
      startIndex += maxPosts;
    } else if (direction === -1 && prevPageTokens.length > 0) {
      startIndex = prevPageTokens.pop();
    }
    loadPosts();
  }

  // Load data pertama kali
  loadPosts();
</script>

Cara Menggunakan di Blogger:

1. Masuk ke Blogger → Pages → Buat halaman baru atau edit halaman yang sudah ada.
2. Pilih mode HTML (bukan Compose).
3. Salin dan tempelkan kode di atas.
4. Ganti NAMA-BLOG dengan URL blog kamu (contoh: https://contohblog.blogspot.com).
5. Ganti Linux dengan label yang ingin ditampilkan.
6. Simpan dan publikasikan halaman.

 Hasil yang Diharapkan:

Postingan dengan label tertentu tampil rapi
Thumbnail otomatis dari gambar pertama di postingan
Judul & cuplikan isi muncul dengan tampilan menarik
Navigasi "Next" & "Previous" untuk eksplorasi lebih lanjut
SEO lebih baik & pengalaman pengguna meningkat!

 

 

 Kesimpulan: Blogger Level Up!

Jika blogmu terasa "jadul" dan tidak menarik, jangan sedih! Dengan kode sakti ini, blogmu akan lebih interaktif, menarik, dan SEO-friendly.

Jadi, tunggu apa lagi? Salin kode di atas, tempel di Blogger-mu, dan biarkan blogmu tampil lebih kece dari sebelumnya!

 Jangan lupa share ke teman-teman Blogger lainnya!