Cara Menampilkan Related Produk di Postingan Tertentu di Blogger - Panduan SEO

Jika Anda ingin menampilkan daftar produk terkait atau related post berdasarkan label di Blogger, tetapi hanya di postingan tertentu, ada beberapa metode yang bisa digunakan. Berikut tutorial lengkapnya.

🔹 Metode 1: Menggunakan Shortcode Manual di Postingan

Dengan metode ini, kita bisa menambahkan related post hanya di postingan yang diinginkan menggunakan kode khusus.

1️⃣ Tambahkan Kode Berikut di Template Blogger (Widget HTML/JavaScript)

<script>
function showRelatedPosts(label, maxPosts, targetId) {
    var url = "/feeds/posts/summary/-/" + label + "?alt=json-in-script&max-results=" + maxPosts + "&callback=function(data){ displayRelatedPosts(data, targetId); }";
    var script = document.createElement("script");
    script.src = url;
    document.getElementsByTagName("head")[0].appendChild(script);
}

function displayRelatedPosts(json, targetId) {
    var entries = json.feed.entry || [];
    var container = document.getElementById(targetId);
    if (!container) return;

    var content = '<div class="related-grid">';
    for (var i = 0; i < entries.length; i++) {
        var entry = entries[i];
        var title = entry.title.$t;
        var link = "#";
        var imgSrc = "https://via.placeholder.com/150";

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

        if (entry.media$thumbnail) {
            imgSrc = entry.media$thumbnail.url;
        } else if (entry.content && entry.content.$t.match(/<img.*?src="(.*?)"/)) {
            imgSrc = entry.content.$t.match(/<img.*?src="(.*?)"/)[1];
        }

        content += `
            <div class="related-item">
                <a href="${link}" title="${title}">
                    <img src="${imgSrc}" alt="${title}">
                    <p>${title}</p>
                </a>
            </div>
        `;
    }
    content += '</div>';
    container.innerHTML = content;
}
</script>

2️⃣ Masukkan Kode Ini di Postingan yang Ingin Ditampilkan Related Produk

Tempatkan kode ini dalam mode HTML di postingan Blogger:

<div id="related-wpc"></div>
<script>showRelatedPosts("WPC Wall Panel", 4, "related-wpc");</script>

🔹 **Ganti "WPC Wall Panel"** dengan label produk yang ingin ditampilkan.

🔹 Metode 2: Menampilkan Otomatis di Postingan Tertentu

Jika ingin otomatis menampilkan related produk hanya di URL tertentu, gunakan metode ini.

1️⃣ Tambahkan Kode Berikut di Template atau Widget

<script>
function getPostURL() {
    return window.location.href;
}

function showRelatedInSpecificPost(urlK