Cara Menampilkan Artikel Terkait di Sidebar berasarkan label, Tutorial Lengkap blogger

Menampilkan artikel terkait di sidebar merupakan salah satu cara efektif untuk meningkatkan internal linking, memperkaya pengalaman pengguna, dan tentu saja, membantu optimasi SEO blog Anda. Dalam artikel ini, saya akan membagikan tutorial lengkap tentang bagaimana Anda dapat melakukannya menggunakan script sederhana.

Langkah-langkah Tutorial

1. Tambahkan Script diatas  </head> Tema Blog

    <!-- xxxxxxxx NAmbah sendiri,ganti tema akan hilang 1 xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->
    <script type='text/javascript'>
  // Fungsi untuk mengambil label postingan.
  function getPostLabel() {
    // Contoh selector: periksa dulu apakah label berada di .post-labels
    var labelElem = document.querySelector(&#39;.post-labels a&#39;);
    // Jika tidak ditemukan, coba periksa selector lain yang kemungkinan sesuai dengan Awesome Inc.
    if (!labelElem) {
      labelElem = document.querySelector(&#39;.post-footer .post-labels a&#39;);
    }
    // Jika masih tidak ditemukan, coba selector alternatif (misalnya, berdasarkan atribut atau kelas lain)
    if (labelElem) {
      return labelElem.textContent.trim(); // Kembalikan label yang ditemukan
    } else {
      return null;
    }
  }
</script>
<!-- xxxxxxxx NAmbah sendiri,ganti tema akan hilang xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx -->

klik tema

klik edit HTML

klik tengah kode , lalu CTRL + F ,  muncul kotak pencarian
ketik </head> lalu ENTER

PASTE kan code diatas </head>
lalu simpan

2. Tambahkan Elemen Sidebar

Paste kan code berikut di side bar

    <style>
  #related-posts-sidebar {
    background-color: transparent; /* Ubah sesuai kebutuhan, di sini menggunakan transparan */
    border: 1px solid #ddd;
    padding: 10px;
    border-radius: 5px;
    font-family: Arial, sans-serif;
  }
  #related-posts-sidebar h3 {
    text-align: center;
    margin-bottom: 10px;
    font-size: 18px;
  }
  #related-posts-sidebar ul {
    list-style: none;
    padding: 0;
  }
  #related-posts-sidebar li {
    margin: 5px 0;
  }
  /* Link yang belum dikunjungi */
  #related-posts-sidebar a:link {
    color: #000; /* hitam */
    text-decoration: none;
    font-size: 16px;
  }
  /* Link yang sudah pernah dikunjungi */
  #related-posts-sidebar a:visited {
    color: red;
  }
  /* Link saat hover */
  #related-posts-sidebar a:hover {
    color: #007BFF;
  }
</style>


<div id="related-posts-sidebar"></div>
<script type="text/javascript">
  document.addEventListener("DOMContentLoaded", function () {
    var label = getPostLabel(); // Pastikan fungsi getPostLabel() sudah didefinisikan di head
    if (label) {
      var feedUrl = "https://ayo-baca-shalawat.blogspot.com/feeds/posts/default/-/" + encodeURIComponent(label) + "?alt=json-in-script&callback=displaySidebarPosts";
      var script = document.createElement("script");
      script.src = feedUrl;
      document.body.appendChild(script);
    } else {
      document.getElementById("related-posts-sidebar").innerHTML = "Tidak ada artikel terkait.";
    }
  });

  function displaySidebarPosts(feed) {
    var entries = feed.feed.entry || [];
    var maxPosts = 99; // Jumlah artikel terkait
    var relatedHtml = "<ul>";
    for (var i = 0; i < Math.min(entries.length, maxPosts); i++) {
      var entry = entries[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;
        }
      }
      relatedHtml += "<li><a href='" + link + "'>" + title + "</a></li>";
    }
    relatedHtml += "</ul>";
    document.getElementById("related-posts-sidebar").innerHTML = relatedHtml;
  }
</script>

klik tata letak

klik tambah widget 

pilih HTML/Java Script

beri judul contoh Artikel terkait berdasarkan Label

Pastekan kode diatas
lalu klik save simpan