Membuat Widget HTML Blogger untuk BERITA TERBARU UPDATE mode Berjalan atau pilihan Button Panah

Artikel ini saya share menggantikan widget Piala Dunia untuk blog Ngerapik saya ini. Awal widget ini menampilkan link menuju Detik Sport. Dikarenakan sebentar lagi Piala Dunia berakhir dan gak capek lagi mikiran widget apa yang harus di tampilkan, jadi saya merubah kode nya menjadi lebih sederhana untuk menampilkan BERITA TERBARU UPDATE dari artikel blogger sesuai Label Blog yang saya inginkan.

Untuk teman teman blogger Ngerapik Blog saya disini menampilan dua pilihan:

A. Widget Dengan Tombol Panah Seperti yang saya terapkan dan aplikasikan di Blog Ngerapik ini, serta

B. Widget Dengan Marquee Thumbnail serta Berita Berjalan seperti Blogsite GoSMK Bakti Pangkalpinang

Pilihan ada pada teman teman blogger semua, yang mana menarik untuk teman teman semua diaplikasikan di Blogger nya. Langsung saja cara pengaplikasiannya. Cekidot Wae..

PILIHAN A

Untuk pilhan A, copas kode HTML dibawah ini di Struktur TATA LETAK Dashboard, Pilih Kotak EDIT HTML masukan kode yang telah saya bagi menjadi tiga bagian kotak dibawah ini:

Kode kotak bagian A Pertama:

</> Bagian A kotak 1

/* 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 SLIDER (Scroll Window) */
.news-marquee-window {
    width: 100%;
    overflow-x: auto; /* Mengaktifkan scroll manual */
    display: flex;
    scroll-behavior: smooth; /* Membuat efek geser tombol jadi halus */
    -webkit-overflow-scrolling: touch;
}

/* Menyembunyikan scrollbar bawaan browser agar tetap rapi */
.news-marquee-window::-webkit-scrollbar {
    display: none;
}

.news-row-container {
    display: flex;
    gap: 20px;
    padding: 10px 0;
}

/* 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;
}

/* TOMBOL NAVIGASI PANAH (KIRI & KANAN) */
.news-nav-btn {
    position: absolute;
    top: 55%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    background-color: rgba(255, 204, 0, 0.9); /* Latar kuning emas */
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    z-index: 10;
    transition: background-color 0.2s, transform 0.2s;
}

.news-nav-btn:hover {
    background-color: #ffffff;
    transform: translateY(-50%) scale(1.1);
}

.news-nav-btn svg {
    width: 20px;
    height: 20px;
    fill: #121212; /* Panah warna gelap */
}

.news-nav-prev { left: -15px; } /* Posisi sedikit keluar kontainer kiri */
.news-nav-next { right: -15px; } /* Posisi sedikit keluar kontainer kanan */

/* 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-nav-btn { width: 32px; height: 32px; } /* Tombol lebih kecil di HP */
    .news-nav-btn svg { width: 16px; height: 16px; }
    .news-nav-prev { left: 5px; } /* Geser ke dalam agar tidak terpotong layar HP */
    .news-nav-next { right: 5px; }
}
</style>

Kode kotak bagian A Kedua:

</> Bagian A kotak 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 UPDATE
  </div>

<button class='news-nav-btn news-nav-prev' id='newsPrevBtn' aria-label='Sebelumnya'>
    <svg viewbox='0 0 24 24'><path d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/></svg>
  </button>

<div class='news-marquee-window' id='newsSliderWindow'>
    
    <div class='news-row-container' id='newsMarqueeContainer'>
       <span style="color:#eee; padding:10px;">Memuat berita update...</span>
    </div>
  </div>

<button class='news-nav-btn news-nav-next' id='newsNextBtn' aria-label='Selanjutnya'>
    <svg viewbox='0 0 24 24'><path d='M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z'/></svg>
  </button>
</div>

Kode kotak bagian A Ketiga:

</> Bagian A kotak 3

// Fungsi utama pemroses data JSON dari Blogger
    window.loadSliderNews = function(json) {
        var htmlContent = "";
        
        if (json.feed.entry && json.feed.entry.length > 0) {
            var entries = json.feed.entry;
            
            for (var i = 0; i < entries.length; i++) {
                htmlContent += buildCardHtml(entries[i]);
            }
            container.innerHTML = htmlContent;
        } else {
            container.innerHTML = "<span style='color:#eee; padding:10px;'>Tidak ada artikel dengan label '" + labelName + "'.</span>";
        }
    };

// Fungsi pembentuk kerangka HTML kartu berita
    function buildCardHtml(entry) {
        var title = entry.title.$t;
        var postUrl = "";
        
        // Cari url link alternate artikel asli
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
                postUrl = entry.link[k].href;
                break;
            }
        }
        
        // Seleksi dan penajaman gambar thumbnail
        var thumbUrl = fallbackImg;
        if (entry.media$thumbnail) {
            thumbUrl = entry.media$thumbnail.url.replace('/s72-c/', '/w480-rw/');
        } else if (entry.content && entry.content.$t) {
            var imgTag = entry.content.$t.match(/<img[^>]+src="([^">]+)"/);
            if (imgTag) thumbUrl = imgTag[1];
        }

return `
          <a class='news-card-item' href='${postUrl}'>
            <div class='news-img-frame'>
              <img src='${thumbUrl}' alt='${title}'>
            </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'>${title}</div>
            </div>
          </a>
        `;
    }

// === LOGIKA NAVIGASI TOMBOL PANAH ===
    var scrollAmount = 260; // Jarak geser default PC (lebar kartu + gap)

if (window.innerWidth <= 768) {
        scrollAmount = 190; // Jarak geser disesuaikan untuk layar HP
    }

nextBtn.addEventListener('click', function() {
        sliderWindow.scrollLeft += scrollAmount;
    });

prevBtn.addEventListener('click', function() {
        sliderWindow.scrollLeft -= scrollAmount;
    });
});
</script>

KETERANGAN KODE:

Ganti dan rubah kode dibawah ini:

var blogUrl = "https://ngerapik.blogspot.com"; // URL blog Sobat
var labelName = "My Histori"; // dengan Nama Label Blogger (Case-Sensitive)
var maxResults = 10; // Jumlah total artikel yang ingin ditarik

Simpan Widget Tata Letak

PILIHAN B

Untuk pilhan B, copas kode HTML dibawah ini di Struktur TATA LETAK Dashboard, Pilih Kotak EDIT HTML masukan kode yang telah saya bagi menjadi tiga bagian kotak dibawah ini:

Kode kotak bagian B Pertama:

</> Bagian B kotak 1

.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;
}

/* 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;
}

.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 bagian B Kedua:

</> Bagian B kotak 2

Kode kotak bagian B Ketiga:

</> Bagian B kotak 3

// Fungsi pemroses data JSON dari Blogger
    window.loadMarqueeNews = function(json) {
        var htmlContent = "";
        
        if (json.feed.entry) {
            var entries = json.feed.entry;
            
            // Loop pertama untuk membuat baris artikel utama
            for (var i = 0; i < entries.length; i++) {
                htmlContent += buildCardHtml(entries[i]);
            }
            
            // Loop kedua (Duplikasi) agar efek efek Marquee menyambung tanpa jeda (Infinite Loop Track)
            for (var j = 0; j < entries.length; j++) {
                htmlContent += buildCardHtml(entries[j]);
            }
            
            container.innerHTML = htmlContent;
        } else {
            container.innerHTML = "<span style='color:#eee; padding:10px;'>Tidak ada artikel dengan label ini.</span>";
        }
    };

// Fungsi pembentuk struktur HTML per kotak artikel
    function buildCardHtml(entry) {
        var title = entry.title.$t;
        var postUrl = "";
        
        // Mengambil tautan postingan asli
        for (var k = 0; k < entry.link.length; k++) {
            if (entry.link[k].rel == 'alternate') {
                postUrl = entry.link[k].href;
                break;
            }
        }
        
        // Mengambil gambar miniatur utama
        var thumbUrl = fallbackImg;
        if (entry.media$thumbnail) {
            // Mengubah resolusi thumbnail default agar lebih tajam
            thumbUrl = entry.media$thumbnail.url.replace('/s72-c/', '/w480-rw/');
        } else if (entry.content && entry.content.$t) {
            // Mencari gambar pertama di dalam teks jika thumbnail bawaan absen
            var imgTag = entry.content.$t.match(/<img[^>]+src="([^">]+)"/);
            if (imgTag) thumbUrl = imgTag[1];
        }

// === Sistem Pause saat Touchscreen Sentuh Layar HP ===
    const marqueeWindow = document.querySelector('.news-marquee-window');
    if (marqueeWindow && container) {
        marqueeWindow.addEventListener('touchstart', function() {
            container.style.animationPlayState = 'paused';
        }, { passive: true });

marqueeWindow.addEventListener('touchend', function() {
            container.style.animationPlayState = 'running';
        }, { passive: true });
        
        marqueeWindow.addEventListener('touchcancel', function() {
            container.style.animationPlayState = 'running';
        }, { passive: true });
    }
});
</script>

KETERANGAN KODE:

Ganti dan rubah kode dibawah ini:

var blogUrl = "https://gosmkbakti.blogspot.com"; // URL blog Sobat
var labelName = "Berita"; // dengan Nama Label Blogger (Case-Sensitive)
var maxResults = 8; // Jumlah total artikel yang ingin ditarik

Simpan Widget Tata Letak

Selesai. Demikianlah artikel saya tentang "Membuat Widget HTML Blogger untuk BERITA TERBARU UPDATE mode Berjalan atau pilihan Button Panah" Semoga dapat memperindah, mempercantik dan memperganteng blog teman teman semua. Salam Ngerapik Blog..!

Membuat Widget HTML Blogger untuk BERITA TERBARU UPDATE mode Berjalan atau pilihan Button Panah

Posting Komentar

Formulir Kontak