Cara Membuat Widget Berita Terbaru Berjalan Seperti Website GoSMK Bakti Pangkalpinang

Selamat malam teman teman blogger, kali saya akan membagikan artikel bagaimana membuat Widget untuk blogger khusus Berita Terbaru dengan konsep Marquee berjalan dan saat diarahkan mouse maka artikel yang di pilih akan berhenti dan memiliki Animasi gambar mengembang dan berpendar emas. Untuk Demo dari widget ini langsung saja menuju URL GoSMK Bakti Pangkalpinang. Dan penampakan dari widget ini seperti gambar dibawah ini:

Menarik bukan untuk diaplikasikan di Blogger teman teman semua. Kalau tertarik, langsung gaskenn cara membuatnya. Cekidot wae..

CARA PENERAPAN:

1. Buat dan Buka Kotak baru Edit HTML pada Teta Letak dashboard blogger teman teman semua, lalu masukkan kode yang saya bagi dalam 3 Kotak kode, agar tidak berantakan saat di aplikasikan di blog sobat semua.,

Kode Kotak Pertama:

</> Bagian 1 CSS

<style>

/* CSS Utama Kontainer Berita */
.news-slider-wrapper {
    max-width: 1200px;
    margin: 20px auto;
    padding: 15px;
    font-family: 'Segoe UI', Roboto, sans-serif;
    background-color: #121212; /* Latar belakang gelap premium */
    border-radius: 8px;
    box-sizing: border-box;
    overflow: hidden; /* Menyembunyikan konten meluap keluar */
}

/* Judul Utama dengan Aksen Garis Kuning & Ikon SVG */
.news-section-title {
    font-size: 22px;
    font-weight: bold;
    color: #ffffff;
    margin-bottom: 20px;
    border-left: 5px solid #ffcc00;
    padding-left: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.news-title-svg {
    width: 24px;
    height: 24px;
    fill: #ffcc00; /* Warna kuning emas */
}

/* JALUR UTAMA ANIMASI BERJALAN (Infinite Loop Track) */
.news-marquee-window {
    width: 100%;
    overflow: hidden;
    display: flex;
}

.news-row-container {
    display: flex;
    gap: 20px;
    animation: autoScrollNews 35s linear infinite; /* Mengatur kecepatan jalan berita */
}

/* Duplikasi jalur agar menyambung tanpa jeda saat berputar */
@keyframes autoScrollNews {
    0% { transform: translate3d(0, 0, 0); }
    100% { transform: translate3d(-50%, 0, 0); } /* Bergeser setengah panjang kontainer */
}

/* OTOMATIS BERHENTI SAAT DISENTUH/HOVER JARI */
.news-marquee-window:hover .news-row-container {
    animation-play-state: paused !important;
	-webkit-animation-play-state: paused !important;
}

/* Pengaturan Ukuran Per Kotak Berita */
.news-card-item {
    flex: 0 0 240px; /* Lebar tetap kotak berita */
    display: flex;
    flex-direction: column;
    gap: 10px;
    text-decoration: none !important;
    background-color: #1e1e1e;
    padding: 12px;
    border-radius: 10px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-sizing: border-box;
}

/* Efek Angkat & Bayangan Emas Saat Berita Disentuh */
.news-card-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(255, 204, 0, 0.25);
    cursor: pointer;
}
/* Bingkai Foto Berita (Rasio 16:9) */
.news-img-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    background-color: #2a2a2a;
    border-radius: 6px;
    overflow: hidden;
}

.news-img-frame img {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
}

/* Bungkus Judul Artikel + Ikon SVG Baru */
.news-title-box {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-top: 4px;
}

.news-card-svg {
    width: 14px;
    height: 14px;
    fill: #ffcc00; /* Ikon berita kecil berwarna emas */
    flex-shrink: 0;
    margin-top: 3px;
}

/* Gaya Teks Judul Berita */
.news-card-title {
    font-size: 13px;
    font-weight: bold;
    line-height: 1.4;
    color: #e0e0e0;
    display: -webkit-box;
    -webkit-line-clamp: 3; /* Maksimal 3 baris teks */
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: color 0.2s ease;
}

.news-card-item:hover .news-card-title {
    color: #ffcc00;
}

/* OPTIMASI RESOLUSI SMARTPHONE HP */
@media (max-width: 768px) {
    .news-section-title { font-size: 18px; margin-bottom: 15px; }
    .news-title-svg { width: 20px; height: 20px; }
    .news-card-item { flex: 0 0 170px; padding: 8px; gap: 8px; }
    .news-card-title { font-size: 10.5px; }
    .news-card-svg { width: 11px; height: 11px; margin-top: 2px; }
    .news-row-container { animation-duration: 22s; } /* Sedikit dipercepat di HP karena layar sempit */
}
</style>

Kode Kotak Kedua:

</> Bagian 2

<div class='news-slider-wrapper'>
  
  <div class='news-section-title'>
    <svg class='news-title-svg' viewbox='0 0 24 24'>
      <path d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/>
    </svg>
    BERITA TERBARU
  </div>

<div class='news-marquee-window'>
    
    
    <div class='news-row-container'>
      
      
      <a class='news-card-item' href='https://gosmkbakti.blogspot.com/2026/05/spmb-bbabelprovgoid.html'>
        <div class='news-img-frame'>
          
          <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtkpW5McAX4zSp-5JmU1VY9YhBoMp1joXuEpxpfmNWpjJ4HWJ8b1MarWVd1sRkeKxCPB3p5AInmyGzXE8C79FT_JgNhuy25ebFFUclXi08VPJRtPEOMiPmrBE3mKlYhwS2PwPMzfRlnli1hy61GRmkPcWQDhWDHruAnIwsDFI0M5R5uhfp4Tpi45w8oAYl/w480-rw/spmb1.jpg' alt='Thumbnail'>
        </div>
        <div class='news-title-box'>
          <svg class='news-card-svg' viewbox='0 0 24 24'><path d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/></svg>
          <div class='news-card-title'>SPMB Babelprov.go.id...</div>
        </div>
      </a>

<a class='news-card-item' href='https://gosmkbakti.blogspot.com/2024/03/smk-bakti-pangkalpinang-gelar-lomba.html'>
        <div class='news-img-frame'>
          <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHSb7C2rfKe-2uEAI5r6JXOpXN-wiNeHnGHmsRNNwXw9LLj2sL1hfQ6R6fs9Y9g2ngtTtjnK1hydrsPpC6QcniP-hXubbyyyzZfCTrJSETGQMq1dp5vqs1ieVJh9CvcAh4dGkViHTB1XVSDxpmrIoyLVGv2zubRb5PH1SebNZFE06OJd-q5_9NozRX41KG/w480-rw/cerdas.jpg' alt='Thumbnail'>
        </div>
        <div class='news-title-box'>
          <svg class='news-card-svg' viewbox='0 0 24 24'><path d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/></svg>
          <div class='news-card-title'>SMK Bakti Pangkalpinang Gelar Lomba Cerdas Cermat SLTP...</div>
        </div>
      </a>

<a class='news-card-item' href='https://gosmkbakti.blogspot.com/2013/06/belitong-beach-festival-2013.html'>
        <div class='news-img-frame'>
          <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgliZhUdc1WjsupRRPwYhaXM9BEO-tdsuGRm3mCQgJox-UNVTWJrkDiHVXr9uHbydXBRaIFt6iHdIyxl2BsFajHF_-lrtuLEx0173zBQvcGDO0YCWs89XCpo8iKuQxQdoJiYdLXnDURUmAc/w480-rw/belitung-beach-festival.jpg' alt='Thumbnail'>
        </div>
        <div class='news-title-box'>
          <svg class='news-card-svg' viewbox='0 0 24 24'><path d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/></svg>
          <div class='news-card-title'>Belitong Beach Festival 2026...</div>
        </div>
      </a>

<a class='news-card-item' href='https://gosmkbakti.blogspot.com/2013/06/manisnya-kebun-strawberry-ciwidey.html'>
        <div class='news-img-frame'>
          <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgbLIuvo1fLUP6Nzzz3LEU2SVNGm5An9bfGcFhfXW0tWkI7aro8Y4dDblXkOyLwV3rw1RJwINcpvI-DOGYmHkFjykcnqbF0Ai1_TXuOzRWTIjo9lkAVGI4Kd-2BeX4472aRsF5wlVkIX3gF/w480-rw/strawberry.png' alt='Thumbnail'>
        </div>
        <div class='news-title-box'>
          <svg class='news-card-svg' viewbox='0 0 24 24'><path d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/></svg>
          <div class='news-card-title'>Manisnya, Kebun Strawberry Ciwidey Bandung!</div>
        </div>
      </a>

<a class='news-card-item' href='https://gosmkbakti.blogspot.com/2012/06/keindahan-pantai-bangka-belitung.html'>
        <div class='news-img-frame'>
          <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUT7FwRPaN8Ltn9wbwwrT0hyre3ItT9EelmBvfFzP7paFxGwQXrGIlVhliqovYI9qdHXbK3fpei3G0genl5iJpLAJGw0dO3GjIMBPF9KpXmmwnpugP3kwZ30F3dcfPxdADTmEngraF9hLr/w480-rw/Bangka-Matras-Beach.jpg' alt='Thumbnail'>
        </div>
        <div class='news-title-box'>
          <svg class='news-card-svg' viewbox='0 0 24 24'><path d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/></svg>
          <div class='news-card-title'>Keindahan Pantai Bangka Belitung...</div>
        </div>
      </a>
	  
	  <a class='news-card-item' href='https://gosmkbakti.blogspot.com/2012/06/meseum-sejarah-kota-timah.html'>
        <div class='news-img-frame'>
          <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgI-cLpZupbb097J9dcuUlaGyYOLaAlzleJMCn5xITY5E8ACjg84eFSMPl1NnqKpUQccr9bfqvfvXkB62zp5cGZi7423goBNRIPpHRJXIsPe573hJnef8wiPFCB-tuooiNPmAKYdOLUFJPv/w480-rw/Museum-Timah-Bangka-Indonesia.jpg' alt='Thumbnail'>
        </div>
        <div class='news-title-box'>
          <svg class='news-card-svg' viewbox='0 0 24 24'><path d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/></svg>
          <div class='news-card-title'>Meseum Sejarah Kota Timah Bangka...</div>
        </div>
      </a>

<a class='news-card-item' href='https://gosmkbakti.blogspot.com/2012/06/ayo-lestarikan-terumbu-karang-laut.html'>
        <div class='news-img-frame'>
          <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhueLX2pb6jPWraaQxtxNCfRHb_571Row5ryVtwKcAJDQ_1_UnCqGSKuwX38uAv38UqVB6iMDIZB5l2FVKuDYqXm_VzCnDUfkXOWmI9SkFIN0s9JeNKTtphfGRAofUIg8N01J0yBKqBKF4j/w480-rw/warawiriwisata+terumbu+karang+di+bangka.JPG' alt='Thumbnail'>
        </div>
        <div class='news-title-box'>
          <svg class='news-card-svg' viewbox='0 0 24 24'><path d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/></svg>
          <div class='news-card-title'>Ayo Lestarikan Terumbu Karang Laut Bangka!</div>
        </div>
      </a>

<a class='news-card-item' href='https://gosmkbakti.blogspot.com/2013/02/tari-campak-budaya-keceriaan-bujang-dan.html'>
        <div class='news-img-frame'>
          <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjF_Xv9nYs3sZqSqQd-6P2ckCGZ8WSx8guAJ_rSVwo5RFR9MTTsgCQ0jtEG9hdveBYuf9o85HLS8PVDOXGHda-g0SIcxDxDnez3M6wy7tzp3rfxld4-ZSASwXnykpOBA9oGN8mOgHCyuZqg/s320/taricampak.jpg' alt='Thumbnail'>
        </div>
        <div class='news-title-box'>
          <svg class='news-card-svg' viewbox='0 0 24 24'><path d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/></svg>
          <div class='news-card-title'>Tari Campak Budaya Keceriaan Bujang dan Dayang Kepulauan Bangka Belitung...</div>
        </div>
      </a>

<a class='news-card-item' href='https://gosmkbakti.blogspot.com/2026/05/spmb-bbabelprovgoid.html'>
        <div class='news-img-frame'>
          
          <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjtkpW5McAX4zSp-5JmU1VY9YhBoMp1joXuEpxpfmNWpjJ4HWJ8b1MarWVd1sRkeKxCPB3p5AInmyGzXE8C79FT_JgNhuy25ebFFUclXi08VPJRtPEOMiPmrBE3mKlYhwS2PwPMzfRlnli1hy61GRmkPcWQDhWDHruAnIwsDFI0M5R5uhfp4Tpi45w8oAYl/w480-rw/spmb1.jpg' alt='Thumbnail'>
        </div>
        <div class='news-title-box'>
          <svg class='news-card-svg' viewbox='0 0 24 24'><path d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/></svg>
          <div class='news-card-title'>SPMB Babelprov.go.id...</div>
        </div>
      </a>

</div>
  </div>
</div>

Kode Kotak Ketiga:

</> Bagian 3 Script

<script>
document.addEventListener("DOMContentLoaded", function() {
    const marqueeWindow = document.querySelector('.news-marquee-window');
    const rowContainer = document.querySelector('.news-row-container');

if (marqueeWindow && rowContainer) {
        // Saat jari menyentuh layar HP, animasi langsung berhenti
        marqueeWindow.addEventListener('touchstart', function() {
            rowContainer.classList.add('paused-state');
        }, { passive: true });

// Saat jari diangkat dari layar HP, animasi berjalan kembali
        marqueeWindow.addEventListener('touchend', function() {
            rowContainer.classList.remove('paused-state');
        }, { passive: true });
        
        // Antisipasi jika jari bergeser keluar jendela penelusuran
        marqueeWindow.addEventListener('touchcancel', function() {
            rowContainer.classList.remove('paused-state');
        }, { passive: true });
    }
});
</script>

2. Gabungkan kode script diatas diawali dari Kode Kotak Pertama, lalu tepat dibawahnya Kode Kotak Kedua, dan terakhir tempatkan Kode Kotak Ketiga tepat dibawah Kode Kotak Kedua.,

3. Simpan Widget Tata Letak.,

KETERANGAN KODE:

a. Ganti dan rubah kode:

<a class='news-card-item' href='https://gosmkbakti.blogspot.com/2026/05/spmb-bbabelprovgoid.html'> dengan Url Link yang sobat inginkan.

b. Ganti dan rubah kode:

c. Ganti dan rubah kode:

background-color: #1e1e1e; // dengan warna latar sesuai yang sobat inginkan.

Sekian dulu teman teman ya artikel singkat saya tentang "Cara Membuat Widget Berita Terbaru Berjalan Seperti Webiste GoSMK Bakti Pangkalpinang" semoga dapat menjadi referensi memepercantik dan memperganteng blogger teman teman semua. Apabila ada yang ingin ditanyakan, silahkan komen di kotak Disqus dibawah ini. Salam Ngerapik Blog.

Jelajahi

Menu Atas

Iklan

Blogroll

Cara Membuat Widget Berita Terbaru Berjalan Seperti Website GoSMK Bakti Pangkalpinang

Terkini

Iklan

Terpopuler

Template

Iklan