Pasang Script Automatic Related Post Blogger: Pageview Auto Panen!

BeniSubianto.web.id - Halo sobat planter dan blogger sekalian! Apa kabar kebunnya hari ini? Semoga buahnya banyak terus dan harganya makin meroket ya.

Sama seperti merawat sawit yang butuh pemupukan tepat biar akarnya kuat, nge-blog juga butuh strategi biar pengunjung betah berlama-lama. Salah satu "pupuk" terbaik buat blog adalah Internal Linking. Kalau di kebun kita bikin piringan biar bersih, di blog kita bikin pengunjung gampang loncat ke artikel lain tanpa harus nyari manual.

Nah, kali ini saya mau bagi-bagi ilmu tentang cara masang Script Automatic Related Post Blogger. Ini bukan script sembarangan, lho. Script ini bakal nyelipin rekomendasi bacaan secara otomatis di tengah-tengah artikel, sesuai dengan Label atau Kategori artikel yang lagi dibaca. Jadi, sangat relevan!

Kenapa Harus Pakai Artikel Terkait Otomatis Blogspot?

Mungkin ada yang nanya, "Ah, kan sudah ada widget related post di bawah artikel?"

Betul, tapi jujur saja, jarang ada pembaca yang scroll sampai mentok ke paling bawah, apalagi kalau bacanya lewat HP. Dengan memasang Artikel Terkait Otomatis Blogspot di tengah paragraf (inline), peluang artikel lain diklik jadi jauh lebih besar. Efeknya apa?

• Bounce Rate Turun: Pengunjung nggak langsung kabur setelah baca satu artikel.
• Pageview Naik: Satu pengunjung bisa baca 2-3 artikel sekaligus.
• SEO Bagus: Google suka struktur link yang saling berkaitan (silo).

Persiapan: Script Automatic Related Post Blogger

Script yang akan kita pakai ini spesial. Dia punya fitur Lazy Load (biar loading enteng), gambar thumbnail yang tajam (nggak gepeng), dan pintar membedakan mana postingan artikel dan mana halaman statis (seperti About atau Contact). Jadi script ini nggak akan error di halaman yang nggak seharusnya.

Langkah 1: Pasang Kode CSS

Pertama, kita percantik dulu tampilannya biar rapi. Kita pakai gaya minimalis dengan garis atas-bawah biar enak dilihat di HP.

Masuk ke dashboard Blogger > Tema > Edit HTML. Cari kode ]]></b:skin> atau </style>, lalu taruh kode ini tepat di atasnya:

/* Style Auto Link by Petani Sawit Blogger */
.auto-inline-link {
    display: flex;             
    align-items: center;       
    margin: 20px 0;
    padding: 15px 5px !important;
    background: #ffffff;
    border-top: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    text-decoration: none !important;
    transition: transform 0.2s;
    gap: 5px; 
}
.auto-inline-link:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
/* Bagian Gambar */
.auto-inline-link img {
    width: 90px !important;     
    height: 70px !important;    
    object-fit: cover;
    border-radius: 2px;
    margin-right: 5px !important; 
    margin-bottom: 0 !important; 
    margin-top: 0 !important;
    padding: 0 !important;
    background: #f0f0f0;
    flex-shrink: 0;            
    display: block;       
}
/* Bagian Teks */
.auto-link-info {
    flex: 1;                   
    display: flex;
    flex-direction: column;
    justify-content: center;    
}
.auto-link-info span {
    font-size: 11px;
    font-weight: 700;
    color: #e74c3c;
    text-transform: uppercase;
    margin-bottom: 6px;        
    letter-spacing: 0.5px;
    line-height: 1;
    display: block;
}
.auto-link-info strong {
    font-size: 15px;
    font-weight: 600;
    color: #333;
    line-height: 1.35;         
    margin: 0 !important;      
    display: -webkit-box;      
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    .auto-inline-link { background: #2d2d2d; border-color: #444; }
    .auto-link-info strong { color: #eee; }
}

Langkah 2: Pasang Kode JavaScript

Nah, ini "mesin" utamanya. Script ini akan otomatis mencari label artikel, mengacak postingan lain yang satu label, dan menyisipkannya di antara paragraf postingan Anda.

Cari kode </body> (biasanya ada di paling bawah), lalu letakkan kode Script Automatic Related Post Blogger ini tepat di atasnya:

<script>
//Auto linking by' benisubianto.web.id)
(function() {
    // --- KONFIGURASI ---
    const config = {
        linksToDisplay: 4,      // Mau tampil berapa link?
        textPrefix: "BACA JUGA",
        noImage: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg.../s1600/no-image.png", // Ganti URL ini dengan gambar cadangan blogmu
        selectors: ['.post_body', '.post-body', '.entry-content', '.article-body'] 
    };

    function log(msg) { console.log("[AutoLink]: " + msg); }

    function shuffleArray(array) {
        for (let i = array.length - 1; i > 0; i--) {
            const j = Math.floor(Math.random() * (i + 1));
            [array[i], array[j]] = [array[j], array[i]];
        }
        return array;
    }

    async function startEngine() {
        // Cek apakah ini halaman postingan artikel (bukan page statis)
        if (!window.location.pathname.match(/\/\d{4}\/\d{2}\/.*\.html/)) {
            return;
        }

        let postBody = null;
        for (let sel of config.selectors) {
            let el = document.querySelector(sel);
            if (el) { postBody = el; break; }
        }
        
        if (!postBody) return;

        let labelName = "";
        let targetLink = document.querySelector('a[rel="tag"]');
        
        if (!targetLink) {
            targetLink = document.querySelector('.post-footer a[href*="/search/label/"], .post-info a[href*="/search/label/"]');
        }

        if (targetLink) {
            let href = targetLink.getAttribute('href');
            labelName = decodeURIComponent(href.split('/search/label/')[1].split('?')[0]);
        } else {
            return;
        }

        try {
            const endpoint = `/feeds/posts/summary/-/${encodeURIComponent(labelName)}?alt=json&max-results=15`;
            const req = await fetch(endpoint);
            const res = await req.json();

            if (!res.feed || !res.feed.entry) return;

            const currentUrl = window.location.href.split('?')[0];
            let validPosts = res.feed.entry.filter(entry => {
                const link = entry.link.find(l => l.rel === 'alternate');
                return link && link.href.split('?')[0] !== currentUrl;
            });

            if (validPosts.length === 0) return;

            validPosts = shuffleArray(validPosts);
            const postsToInsert = validPosts.slice(0, config.linksToDisplay);
            
            let targets = postBody.querySelectorAll('p');
            if (targets.length < 3) targets = postBody.querySelectorAll('br, div'); 
            
            const totalItems = targets.length;
            let interval = Math.floor(totalItems / (postsToInsert.length + 1));
            if (interval < 1) interval = 1;

            postsToInsert.forEach((post, index) => {
                const postTitle = post.title.$t;
                const postUrl = post.link.find(l => l.rel === 'alternate');
                if(!postUrl) return;

                let thumbUrl = config.noImage;
                if (post.media$thumbnail) {
                    // Trik resize gambar jadi landscape tajam
                    thumbUrl = post.media$thumbnail.url.replace(/\/s[0-9]+.*?\//, "/w180-h140-c/");  
                }

                const linkEl = document.createElement('a');
                linkEl.className = 'auto-inline-link';
                linkEl.href = postUrl.href;
                linkEl.innerHTML = `
                    <img src="${thumbUrl}" alt="${postTitle}" loading="lazy" width="90" height="70">
                    <div class="auto-link-info">
                        <span>${config.textPrefix}</span>
                        <strong>${postTitle}</strong>
                    </div>
                `;

                let targetIndex = (index + 1) * interval;
                if (targetIndex < totalItems) {
                    let targetNode = targets[targetIndex - 1]; 
                    if (targetNode && targetNode.parentNode) {
                        targetNode.parentNode.insertBefore(linkEl, targetNode.nextSibling);
                    }
                } else {
                    postBody.appendChild(linkEl);
                }
            });

        } catch (err) {
            console.error("Error AutoLink:", err);
        }
    }

    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', startEngine);
    } else {
        startEngine();
    }
})();
</script>

Tips Tambahan Biar Makin Jos

Setelah kode di atas dipasang, jangan lupa klik Simpan tema. Coba buka salah satu artikel di blog sobat. Script ini akan otomatis membagi rata posisi link. Misalnya artikel sobat panjang, linknya akan muncul menyebar dari atas sampai bawah secara proporsional.

Beberapa hal yang perlu diperhatikan:

1. Gambar Default: Jangan lupa ganti URL config.noImage di dalam script dengan URL logo blog sobat. Jadi kalau ada artikel lawas yang nggak ada gambarnya, tetap tampil ganteng.
2. Jumlah Link: Kalau artikel sobat pendek-pendek (di bawah 300 kata), saran saya ubah linksToDisplay: 4 menjadi 2 saja biar nggak terlalu penuh.

Gimana? Gampang kan cara pasang Artikel Terkait Otomatis Blogspot ini? Nggak perlu paham coding yang njelimet, tinggal copas (copy-paste) dan sesuaikan sedikit, blog sobat sudah punya fitur canggih kayak portal berita nasional.

Semoga tutorial ini bermanfaat buat kemajuan blog kita semua. Tetap semangat memanen sawit dan memanen trafik blog! Salam sukses dari kebun.