Kode Slider Gambar Postingan Unggulan

Ilustrasi pengunjung blogger

Di dalam sebuah template blogger ada yang memiliki fitur seperti di atas dan juga ada yang tidak memiliki fitur tersebut.

Biasanya yang mempunyai fitur tersebut yaitu template premium atau yang berbayar, nah bagaimana dengan template yang gratis, ada yang memiliki fitur tersebut dengan berbagai macam variasi dan ada juga yang tidak memiliki fitur tersebut. 

Jika template blogger memiliki fitur tersebut, tentu nya tidak terlalu repot untuk menambahkan cuplikan-cuplikan gambar postingan unggulan yang kita inginkan dari sebuah halaman blog kita.

Fungsi Dan Tujuan Slider gambar bergerak

Jika kita mengunjungi sebuah blog/web atau mengklik halaman beranda pada situs blog/web kita akan melihat beberapa urutan postingan dari blog/web yang kita kunjungi.

Dari yang Postingan terbaru posisi paling atas hingga berurutan ke bawah sebelum yang terbaru. Atau di awali dengan gambar fitur postingan unggulan.

Fungsi dan tujuan dari Slider gambar yang saya bagikan ini adalah apabila kita ingin menampilkan beberapa postingan yang kita unggulkan atau postingan yang paling sedikit atau belum di lihat pengunjung.

Singkatnya agar pengunjung melihat cuplikan gambar postingan dan timbul rasa ingin tahu atau penasaran dan bukan hal yang tidak mungkin pengunjung akan mengklik gambar tersebut dan mengarahkan ke url alamat postingan dari gambar tersebut.

Anggap saja kita sedang mempromosikan postingan kita dari pada postingan orang.

kerena pengunjung tidak tahu tentang postingan yang kita unggulkan itu.

Disebabkan tidak tampil di halaman beranda karena urutan postingan sudah jauh atau termasuk salah satu postingan lama.

Otomatis Dan Manual

Di dalam fitur yang saya bagikan ini, setelah semua sudah diterapkan, hasilnya gambar akan bergerak sendiri kurang lebih 5 detik secara bergantian.

Dan sebelah kiri dan kanan gambar ada sebuah icon yang mengarah ke kiri dan ke kanan, fungsi nya jika pengunjung ingin melihat kembali gambar dari postingan yang telah lewat, kemudian pengunjung dapat mengklik icon tersebut.

Tepat di bawah gambar postingan ada teks dari judul postingan pada gambar tersebut dan di bawah nya lagi ada potongan teks dari postingan.

Dan untuk teks pada postingan kita bebas memilih asalkan jangan terlalu panjang.

Penerapan Kode Slider Gambar Postingan

Penerapan kode nya melalui widget html/javascript yang berada di setelan tata letak Blogger bersamaan dengan kode style nya.

untuk memilih widget pastikan widget yang posisinya paling atas atau sebelum postingan atau dengan menambahkan widget html/javascript.

Kodenya yang di tempatkan di widget tersebut di bawah ini :

<style>
.slider-wrapper { max-width: 800px; margin: 0 auto 15px; position: relative; }
.slider-container { width: 100%; position: relative; overflow: hidden; border-radius: 8px; background: #fff; border: 1px solid #ddd; }
.slider { height: 400px; position: relative; }
@media (max-width: 768px) { .slider { height: 300px; } }
@media (max-width: 480px) { .slider { height: 200px; } }
.slide { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.5s ease; z-index: 1; }
.slide.active { opacity: 1; z-index: 2; }
.slide-image { width: 100%; height: 100%; object-fit: cover; display: block; }
.slide-content { position: absolute; bottom: 0; left: 0; width: 100%; padding: 15px 20px; background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 60%, transparent 100%); color: white; z-index: 10; pointer-events: none; }
.slide-title { font-size: 1.5rem; margin: 0 0 5px 0; font-weight: bold; color: white; text-shadow: 2px 2px 4px rgba(0,0,0,0.8); }
.slide-description { font-size: 0.9rem; margin: 0 0 5px 0; color: rgba(255,255,255,0.95); text-shadow: 1px 1px 3px rgba(0,0,0,0.7); }
.nav-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.9); border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; font-size: 1.5rem; z-index: 20; display: flex; align-items: center; justify-content: center; }
.nav-btn.prev { left: 15px; }
.nav-btn.next { right: 15px; }
.dots-container { position: absolute; bottom: 15px; width: 100%; display: flex; justify-content: center; gap: 8px; z-index: 20; }
.dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255,255,255,0.6); cursor: pointer; }
.dot.active { background: white; }
.slide-link { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; z-index: 5; }
</style>

<div class="slider-wrapper">
    <div class="slider-container">
        <div class="slider">
            <div class="slide active">
                <a href="URL_TUJUAN" target="_blank" class="slide-link"></a>
                <img src="URL_GAMBAR" alt="Deskripsi" class="slide-image" />
                <div class="slide-content">
                    <h2 class="slide-title">JUDUL</h2>
                    <p class="slide-description">Deskripsi singkat.</p>
                </div>
            </div>
        </div>
        <button class="nav-btn prev">‹</button>
        <button class="nav-btn next">›</button>
        <div class="dots-container"></div>
    </div>
</div>

Dan setelah itu tempelkan kode javascript dibawah ini pada halaman edit html template blogger sebelum kode penutup </body>.

Jika selesai, coba lihat hasilnya.

<script type='text/javascript'>
//<![CDATA[
document.addEventListener('DOMContentLoaded', function() {
    const slider = document.querySelector('.slider');
    const slides = document.querySelectorAll('.slide');
    const prevBtn = document.querySelector('.prev');
    const nextBtn = document.querySelector('.next');
    const dotsContainer = document.querySelector('.dots-container');
    
    let currentIndex = 0;
    let autoSlideInterval;
    const autoSlideDelay = 5000;
    
    slides.forEach((_, index) => {
        const dot = document.createElement('div');
        dot.classList.add('dot');
        if (index === 0) dot.classList.add('active');
        dot.setAttribute('aria-label', 'Slide ' + (index + 1));
        dot.addEventListener('click', (e) => {
            e.preventDefault();
            goToSlide(index);
        });
        dotsContainer.appendChild(dot);
    });
    
    const dots = document.querySelectorAll('.dot');
    
    function showSlide(index) {
        slides.forEach(s => s.classList.remove('active'));
        dots.forEach(d => d.classList.remove('active'));
        slides[index].classList.add('active');
        dots[index].classList.add('active');
        currentIndex = index;
    }
    
    function goToSlide(index) {
        if (index < 0) index = slides.length - 1;
        if (index >= slides.length) index = 0;
        showSlide(index);
        resetAutoSlide();
    }
    
    function nextSlide() { goToSlide(currentIndex + 1); }
    function prevSlide() { goToSlide(currentIndex - 1); }
    function startAutoSlide() { autoSlideInterval = setInterval(nextSlide, autoSlideDelay); }
    function resetAutoSlide() { clearInterval(autoSlideInterval); startAutoSlide(); }
    
    prevBtn.addEventListener('click', (e) => { e.preventDefault(); prevSlide(); });
    nextBtn.addEventListener('click', (e) => { e.preventDefault(); nextSlide(); });
    
    let touchStartX = 0;
    if (slider) {
        slider.addEventListener('touchstart', e => { touchStartX = e.touches[0].clientX; clearInterval(autoSlideInterval); });
        slider.addEventListener('touchend', e => {
            const diffX = touchStartX - e.changedTouches[0].clientX;
            if (Math.abs(diffX) > 50) {
                if (diffX > 0) nextSlide();
                else prevSlide();
            }
            startAutoSlide();
        });
    }
    
    const sliderContainer = document.querySelector('.slider-container');
    if (sliderContainer) {
        sliderContainer.addEventListener('mouseenter', () => clearInterval(autoSlideInterval));
        sliderContainer.addEventListener('mouseleave', () => startAutoSlide());
    }
    
    startAutoSlide();
});
//]]>
</script>

Cobalah sendiri dengan keinginan anda, klik run pen atau result

See the Pen Slider Gambar Postingan Unggulan by Ahmad1 (@Ahmad-Syaidi) on CodePen.