Script canggih (JavaScript) Otomatis Mendeteksi Postingan yang tidak memiliki Gambar

<script>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
    // 1. Definisikan kumpulan gambar cadangan berdasarkan kategori/keyword topik
    // Anda bisa mengganti URL gambar di bawah dengan gambar pilihan Anda sendiri
    const defaultImages = {
        'tutorial': 'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?w=600&auto=format&fit=crop&q=60',
        'teknologi': 'https://images.unsplash.com/photo-1518770660439-4636190af475?w=600&auto=format&fit=crop&q=60',
        'kuliner': 'https://images.unsplash.com/photo-1504674900247-0877df9cc836?w=600&auto=format&fit=crop&q=60',
        'bisnis': 'https://images.unsplash.com/photo-1460925895917-afdab827c52f?w=600&auto=format&fit=crop&q=60',
        'default': 'https://images.unsplash.com/photo-1499750310107-5fef28a66643?w=600&auto=format&fit=crop&q=60' // Gambar umum jika tidak ada yang cocok
    };

    // 2. Selektor elemen postingan pada halaman utama (homepage/arsip)
    // Sesuaikan kelas CSS (.post, .post-outer, dsb.) dengan template Blogger yang Anda gunakan
    const postElements = document.querySelectorAll('.post, .blog-post, .post-outer');

    postElements.forEach(post => {
        // Cek apakah postingan sudah memiliki tag gambar (<img>) di dalam kontennya
        const existingImage = post.querySelector('img');
        
        // Cari elemen thumbnail atau tempat gambar biasanya berada di template
        let thumbnailContainer = post.querySelector('.post-image, .thumbnail, .post-thumb');

        if (!existingImage) {
            // Ambil judul postingan untuk dianalisis kata kuncinya
            const postTitleElement = post.querySelector('.post-title a, h2 a, h3 a');
            const postTitle = postTitleElement ? postTitleElement.innerText.toLowerCase() : '';

            // Tentukan gambar berdasarkan kata kunci pada judul
            let selectedImage = defaultImages['default'];
            for (let keyword in defaultImages) {
                if (keyword !== 'default' && postTitle.includes(keyword)) {
                    selectedImage = defaultImages[keyword];
                    break;
                }
            }

            // Jika kontainer thumbnail belum ada di template untuk post tersebut, buat secara otomatis
            if (!thumbnailContainer) {
                thumbnailContainer = document.createElement('div');
                thumbnailContainer.className = 'auto-injected-thumb';
                // Sisipkan gambar di atas judul atau di awal postingan
                const headerTarget = post.querySelector('.post-title, h2, h3');
                if (headerTarget) {
                    headerTarget.parentNode.insertBefore(thumbnailContainer, headerTarget);
                } else {
                    post.prepend(thumbnailContainer);
                }
            }

            // Masukkan elemen gambar ke dalam kontainer
            thumbnailContainer.innerHTML = `<a href="${postTitleElement ? postTitleElement.href : '#'}" class="auto-thumb-link">
                <img src="${selectedImage}" alt="${postTitleElement ? postTitleElement.innerText : 'Auto Image'}" class="auto-generated-img" loading="lazy" />
            </a>`;
        }
    });
});
//]]>
</script>

<style>
/* CSS Tambahan agar gambar otomatis tampil rapi dan responsif */
.auto-injected-thumb {
    width: 100%;
    max-height: 220px;
    overflow: hidden;
    margin-bottom: 15px;
    border-radius: 8px;
}
.auto-generated-img {
    width: 100%;
    height: auto;
    object-fit: cover;
    transition: transform 0.3s ease;
}
.auto-generated-img:hover {
    transform: scale(1.03);
}
</style>