Script Featured Post Slider - XWAPPER

Script Featured Posts Slider

Featured Post auto ganti gambar. Silakan disalin kodenya, letakkan di atas BlogPost di area tata letak.

<div id="slider-xwapper" style="position:relative; width:100%; height:300px; background:#222; overflow:hidden; border-radius:10px;">
    <div id="pemuat-data" style="color:#fff; text-align:center; padding-top:130px;">Sedang memproses...</div>
    <div id="konten-slider"></div>
</div>

<script>
// Fungsi global agar mudah terpanggil oleh sistem Blogspot
function xwapperCallback(json) {
    var container = document.getElementById('konten-slider');
    var pemuat = document.getElementById('pemuat-data');
    var entries = json.feed.entry;
    var html = '';

    if (entries) {
        for (var i = 0; i < entries.length; i++) {
            var judul = entries[i].title.$t;
            var link = "";
            for (var j = 0; j < entries[i].link.length; j++) {
                if (entries[i].link[j].rel == 'alternate') {
                    link = entries[i].link[j].href;
                    break;
                }
            }
            
            // Ambil gambar (thumbnail)
            var imgUrl = entries[i].media$thumbnail ? entries[i].media$thumbnail.url.replace('/s72-c/', '/s1600/') : 'https://via.placeholder.com/600x300?text=No+Image';

            html += '<div class="slide-item" style="display:' + (i == 0 ? 'block' : 'none') + '; position:relative;">' +
                    '<a href="' + link + '">' +
                    '<img src="' + imgUrl + '" style="width:100%; height:300px; object-fit:cover;">' +
                    '<div style="position:absolute; bottom:0; background:rgba(0,0,0,0.7); color:#fff; width:100%; padding:15px; box-sizing:border-box;">' +
                    '<b style="font-size:16px;">' + judul + '</b>' +
                    '</div></a></div>';
        }
        
        pemuat.style.display = 'none';
        container.innerHTML = html;
        
        // Jalankan rotasi otomatis
        var currentIndex = 0;
        var slides = document.getElementsByClassName('slide-item');
        if (slides.length > 1) {
            setInterval(function() {
                slides[currentIndex].style.display = 'none';
                currentIndex = (currentIndex + 1) % slides.length;
                slides[currentIndex].style.display = 'block';
            }, 4000);
        }
    } else {
        pemuat.innerHTML = "Postingan tidak ditemukan.";
    }
}

// Memanggil feed Blogspot dengan cara paling aman (JSONP)
var script = document.createElement('script');
script.src = '/feeds/posts/default?alt=json-in-script&callback=xwapperCallback&max-results=5';
document.body.appendChild(script);
</script>