Membuat Widget Ganteng Berita PIALA DUNIA 2026 Ala Ai dan Saya Responsive Juga untuk HP

Demam Piala Dunia 2026 nih Sobat Blogger.. Ayoo anda dukung negara mana. Saya mah.. 📌Argentina dan Inggris. Saat berkunjung ke portal website detik.com langsung menginspirasi saya untuk membuat Widget Ganteng ini. Mode Ai pun ditanyakan...wkkk. alhasil jadilah widget ganteng ini. Kotak dan Katik bersama Ai hampir 1 jaman loh ada aja yang gak pasnya. Alhasil menurut saya sempurna lah untuk dibagikan ke teman teman blogger Ngerapik Blog.

Langsung saja terapkan di blogger sobat Ingat ini di mode TATA LETAK bukan di EDIT HTML Tamplate ya, dan cara penulisannya menggunakan mode HTML ya bukan Compose (mode tulisan) di kotak tata letaknya, Cekidot Wae..!!

Berikut code yang akan di copas di TAta Letak, saya bagi menjadi 3 Kotak ya.. Cara penempatan Kotak LIHAT DISINI.

Kode Pelatakan Kotak 1 :

</> Code Kotak 1

<div class="ds-main-container">
  
  
  <div class="ds-top-bar">
    <div class="ds-brand-section">
<img src="https://akcdn.detik.net.id/community/media/visual/2026/06/19/rev-doodle-desktop-piala-dunia-2026-1781844849452_169.gif?d=1" alt="Match & Live Score" style="width: 100%; max-width: 220px; height: auto; display: block; object-fit: contain;" />
  
      <a href="https://sport.detik.com/juara-bola-dunia-2026/jadwal-pertandingan" target="_blank" class="ds-btn-more">Selengkapnya ></a>
    </div>

<div class="ds-slider-container">
      <button class="ds-arrow-btn" id="panah-jadwal-kiri">❮</button>
      
      <div class="ds-carousel-view">
        <div class="ds-track-container" id="ds-track">
          
          
          <div class="ds-match-card">
            <div class="ds-round-lbl">Babak 32 Besar</div>
            <div class="ds-vs-row">
              <div class="ds-team-info"><span class="ds-mini-flag">🇿🇦</span> <span class="ds-team-name-text">RSA</span></div>
<div style="background: #112a52; padding: 3px 8px; border-radius: 4px; font-weight: 900; color: #ffcc00; letter-spacing: 2px; font-size: 12px;">0 - 0</div>
    
              <div class="ds-team-info"><span class="ds-mini-flag"> 🇨🇦</span> <span class="ds-team-name-text">CAN</span></div>
            </div>
            <div class="ds-card-time-footer">29 JUN - 02:00 WIB</div>
          </div>

<div class="ds-match-card">
            <div class="ds-round-lbl">Babak 32 Besar</div>
            <div class="ds-vs-row">
              <div class="ds-team-info"><span class="ds-mini-flag">🇧🇷</span> <span class="ds-team-name-text">BRA</span></div>
              <div style="background: #112a52; padding: 3px 8px; border-radius: 4px; font-weight: 900; color: #ffcc00; letter-spacing: 2px; font-size: 12px;">0 - 0</div>
    
              <div class="ds-team-info"><span class="ds-mini-flag">🇯🇵</span> <span class="ds-team-name-text">JPN</span></div>
            </div>
            <div class="ds-card-time-footer">30 JUN - 00:00 WIB</div>
          </div>

<div class="ds-match-card">
            <div class="ds-round-lbl">Babak 32 Besar</div>
            <div class="ds-vs-row">
              <div class="ds-team-info"><span class="ds-mini-flag">🇩🇪</span> <span class="ds-team-name-text">GER</span></div>
              <div style="background: #112a52; padding: 3px 8px; border-radius: 4px; font-weight: 900; color: #ffcc00; letter-spacing: 2px; font-size: 12px;">0 - 0</div>
    
              <div class="ds-team-info"><span class="ds-mini-flag">🇵🇾</span> <span class="ds-team-name-text">PAR</span></div>
            </div>
            <div class="ds-card-time-footer">30 JUN - 03:30 WIB</div>
          </div>

<div class="ds-match-card">
            <div class="ds-round-lbl">Babak 32 Besar</div>
            <div class="ds-vs-row">
              <div class="ds-team-info"><span class="ds-mini-flag">🇳🇱</span> <span class="ds-team-name-text">NED</span></div>
             <div style="background: #112a52; padding: 3px 8px; border-radius: 4px; font-weight: 900; color: #ffcc00; letter-spacing: 2px; font-size: 12px;">0 - 0</div>
    
              <div class="ds-team-info"><span class="ds-mini-flag">🇲🇦</span> <span class="ds-team-name-text">MAR</span></div>
            </div>
            <div class="ds-card-time-footer">30 JUN - 08:00 WIB</div>
          </div>

</div>
      </div>

<div class="ds-news-section-header">
     <div style="display: flex; align-items: center; gap: 8px;">
       <svg viewBox="0 0 512 512" width="20" height="20" fill="#ffcc00" style="display: inline-block; vertical-align: middle;">
        <path d="M256 32a224 224 0 1 0 0 448 224 224 0 1 0 0-448zm0 48c26.1 0 51.1 5 74.1 13.9l-19.4 59.8c-17-4.9-35.1-4.9-52.1 0l-19.4-59.8C206.1 85 231.1 80 256 80zM114 163.6c17-19.8 38.3-35.6 62.6-45.7l19.4 59.8c-10.4 6.7-19.2 15.5-25.9 25.9L114 163.6zm314.1 0l-56.1 40c-6.7-10.4-15.5-19.2-25.9-25.9l19.4-59.8c24.3 10.1 45.6 25.9 62.6 45.7zM111.4 300.9l56.1-40c0 12.3 3.8 24.3 10.9 34.3l-47.7 47.7c-12-12.7-21.2-27.4-27.1-43.5zm47.7 47.7l47.7-47.7c10 7.1 22 10.9 34.3 10.9v67.4c-32.3 0-61.6-11.7-84.3-31.1zm210.2 0c-22.7 19.4-52 31.1-84.3 31.1v-67.4c12.3 0 24.3-3.8 34.3-10.9l47.7 47.7zm27.1-43.5c-5.9 16.1-15.1 30.8-27.1 43.5l-47.7-47.7c7.1-10 10.9-22 10.9-34.3l56.1 40zM256 192a64 64 0 1 1 0 128 64 64 0 1 1 0-128z"/>
      </svg>
      <span>Piala Dunia 2026 Terbaru</span>
    </div>
    <div class="ds-news-nav">
      <button class="ds-arrow-btn" id="panah-berita-kiri">❮</button>
      <button class="ds-arrow-btn" id="panah-berita-kanan">❯</button>
    </div>
  </div>
  
  <div class="ds-news-grid" id="ds-blogger-news">Memuat berita piala dunia...</div>

</div>

Kode Pelatakan Kotak 2 :

</> CSS Kotak 2

.ds-main-container {
    background-color: var(--bg-dark);
    font-family: 'Segoe UI', Arial, sans-serif;
    padding: 15px;
    color: var(--text-light);
    max-width: 100%;
    box-sizing: border-box;
    border-radius: 4px;
    overflow: hidden;
  }

/* --- BARIS ATAS: JUDUL + AREA JADWAL LUAS (1 BARIS) --- */
  .ds-top-bar {
    display: flex;
    align-items: center;
    gap: 15px;
    width: 100%;
    margin-bottom: 25px;
  }

/* Sisi Kiri: Hanya Judul & Tombol More */
  .ds-brand-section {
    flex: 0 0 110px; /* Lebar pas untuk teks judul saja */
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

.ds-title-match {
    font-size: 14px;
    font-weight: 900;
    line-height: 1.2;
    text-transform: uppercase;
    letter-spacing: 0.5px;
  }

.ds-btn-more {
    background: #112a52;
    color: #fff;
    border: none;
    padding: 4px 10px;
    font-size: 10px;
    font-weight: bold;
    border-radius: 20px;
    cursor: pointer;
    text-align: center;
    text-decoration: none;
    width: fit-content;
  }

/* AREA JADWAL JADI SANGAT LUAS KARENA SPONSOR DIHAPUS */
  .ds-slider-container {
    flex: 1; /* Otomatis mengambil seluruh sisa layar yang kosong */
    display: flex;
    align-items: center;
    gap: 8px;
    overflow: hidden;
    position: relative;
  }

/* Tombol Panah */
  .ds-arrow-btn {
    background: #112a52;
    color: #fff;
    border: 1px solid #1c355e;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    user-select: none;
    flex: 0 0 28px;
  }
  .ds-arrow-btn:hover {
    background: var(--accent-red);
    border-color: var(--accent-red);
  }

/* Jalur Geser */
  .ds-carousel-view {
    flex: 1;
    overflow: hidden;
  }

.ds-track-container {
    display: flex;
    transition: transform 0.3s ease-in-out;
    width: 100%;
  }

/* KARTU JADWAL SEKARANG MEMILIKI RUANG LEBIH BESAR */
  .ds-match-card {
    background: #001a44;
    border: 1px solid #102d5a;
    border-radius: 6px;
    padding: 12px 10px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    flex: 0 0 100%; /* Default 1 kotak penuh di HP agar lega */
    margin-right: 12px;
  }

.ds-round-lbl {
    font-size: 10px;
    color: var(--text-muted);
    text-transform: uppercase;
    font-weight: bold;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
  }

.ds-vs-row {
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    margin-bottom: 22px;
  }

.ds-team-info {
    display: flex;
    align-items: center;
    gap: 6px;
  }

.ds-mini-flag {
    font-size: 18px;
  }

.ds-team-name-text {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
  }

.ds-vs-text {
    font-size: 11px;
    font-weight: bold;
    color: var(--accent-red);
  }

.ds-card-time-footer {
    background-color: var(--accent-red);
    color: #fff;
    width: 100%;
    text-align: center;
    padding: 5px 0;
    font-size: 10px;
    font-weight: bold;
    border-radius: 3px;
    position: absolute;
    bottom: 0;
    left: 0;
  }

/* --- BARIS BAWAH: BERITA --- */
  .ds-news-section-header {
    border-bottom: 1px solid #102d5a;
    padding-bottom: 8px;
    margin-bottom: 15px;
    font-size: 13px;
    font-weight: bold;
    text-transform: uppercase;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

.ds-news-nav {
    display: flex;
    gap: 6px;
  }

.ds-news-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px;
  }

.ds-news-card {
    text-decoration: none;
    color: var(--text-light);
    display: flex;
    flex-direction: column;
  }

.ds-news-thumb-wrapper {
    width: 100%;
    height: 110px;
    border-radius: 6px;
    overflow: hidden;
    background: #001a44;
    margin-bottom: 10px;
  }

.ds-news-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

.ds-news-cat {
    color: #ffcc00;
    font-size: 10px;
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 4px;
  }

.ds-news-title-text {
    font-size: 12px;
    font-weight: bold;
    line-height: 1.4;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }

/* LAYOUT KHUSUS LAPTOP / DESKTOP */
  @media screen and (min-width: 768px) {
    .ds-brand-section { flex: 0 0 150px; }
    .ds-title-match { font-size: 16px; }
    .ds-match-card { flex: 0 0 calc(50% - 6px); } /* Tampil 2 kotak sejajar di layar besar */
    .ds-news-thumb-wrapper { height: 135px; }
    .ds-news-title-text { font-size: 13px; }
  }

/* LAYOUT KHUSUS MOBILE HP */
  @media screen and (max-width: 767px) {
    .ds-news-grid {
      grid-template-columns: repeat(2, 1fr); /* Tetap 2 berita berdampingan di HP agar rapi */
    }
  }
</style>

Kode Pelatakan Kotak 3 :

</> Script Kotak 3

function gerakSlider(arah) {
    const cards = document.querySelectorAll('.ds-match-card');
    const totalCards = cards.length;
    const isDesktop = window.innerWidth >= 768;
    
    const maxIdx = isDesktop ? totalCards - 2 : totalCards - 1;
    const widthPerCard = cards[0].getBoundingClientRect().width + 12;

if (arah === 'kanan') {
      currentIdx = (currentIdx < maxIdx) ? currentIdx + 1 : 0;
    } else {
      currentIdx = (currentIdx > 0) ? currentIdx - 1 : maxIdx;
    }
    track.style.transform = `translateX(-${currentIdx * widthPerCard}px)`;
  }

document.getElementById('panah-jadwal-kanan').addEventListener('click', () => gerakSlider('kanan'));
  document.getElementById('panah-jadwal-kiri').addEventListener('click', () => gerakSlider('kiri'));
  
  window.addEventListener('resize', () => {
    currentIdx = 0;
    track.style.transform = 'translateX(0px)';
  });

// ==========================================
  // 2. ENGINE BERITA SEJAJAR TERINTEGRASI API
  // ==========================================
  const blogUrl = window.location.hostname;
  const targetLabel = "My Histori"; // <- ATUR LABEL BLOGGER ANDA DI SINI
  let listBeritaLengkap = [];
  let halBerita = 0;

function tampilinHalamanBerita() {
    const container = document.getElementById('ds-blogger-news');
    const isDesktop = window.innerWidth >= 768;
    const limitTampil = isDesktop ? 4 : 2;

function renderBloggerNews(json) {
    const posts = json.feed.entry || [];
    if (posts.length === 0) {
      document.getElementById('ds-blogger-news').innerHTML = '<p style="font-size:12px;color:var(--text-muted);">Belum ada artikel.</p>';
      return;
    }

listBeritaLengkap = posts.map(post => {
      let linkUrl = '';
      for (let j = 0; j < post.link.length; j++) {
        if (post.link[j].rel === 'alternate') { linkUrl = post.link[j].href; break; }
      }
      let img = 'https://placeholder.co';
      if (post.media$thumbnail) img = post.media$thumbnail.url.replace('s72-c', 'w400-h250-c');
      return { title: post.title.$t, linkUrl: linkUrl, img: img };
    });

tampilinHalamanBerita();
  }

document.getElementById('panah-berita-kanan').addEventListener('click', () => {
    const isDesktop = window.innerWidth >= 768;
    const langkah = isDesktop ? 4 : 2;
    halBerita = (halBerita + langkah < listBeritaLengkap.length) ? halBerita + langkah : 0;
    tampilinHalamanBerita();
  });

document.getElementById('panah-berita-kiri').addEventListener('click', () => {
    const isDesktop = window.innerWidth >= 768;
    const langkah = isDesktop ? 4 : 2;
    halBerita = (halBerita - langkah >= 0) ? halBerita - langkah : Math.floor((listBeritaLengkap.length - 1) / langkah) * langkah;
    tampilinHalamanBerita();
  });

const feedScript = document.createElement('script');
  feedScript.src = `//${blogUrl}/feeds/posts/default/-/${encodeURIComponent(targetLabel)}?alt=json-in-script&callback=renderBloggerNews&max-results=16`;
  document.body.appendChild(feedScript);
</script>

NB:

Ganti const targetLabel = "My Histori"; // <- ATUR LABEL BLOGGER ANDA DI SINI
Untuk mengganti hasil pertandingan <div style="background: #112a52; padding: 3px 8px; border-radius: 4px; font-weight: 900; color: #ffcc00; letter-spacing: 2px; font-size: 12px;">0 - 0</div>
let img = 'https://placeholder.co'; // ganti dengan Logo Blog Sobat
Selamat mencoba kreasinya untuk mempercantik dan memperganteng blogger teman teman. Salam Ngerapik Blog..@

Membuat Widget Ganteng Berita PIALA DUNIA 2026 Ala Ai dan Saya Responsive Juga untuk HP

Posting Komentar

Formulir Kontak