Membuat Widget Ala Detik FOOD seperti Tayang di Toko Bedoeit Online Pangkalpinang

Widget ini khusus untuk Di terapkan di Tata Letak Template Blogger. Menurut saya keren, lebih cocok apabila thumbnail gambar widget merupakan Tema Seperti Bahan Resep Makanan, Ilustrasi Produk dan Portofolio terbaik dari blogger sobat semua. Ini terinspari dari website Detik Food, keren Langsung tanya Mbah Mode Ai, cukup lama ada yang eror saat code panah kiri kanan gak jalan, blok widget gak pas, thumb tida ada animasi, dll.. hampir ngulik dan otak atik nya 1 jaman lah biar pas..hohoho..

Hari ini sebenarnya sangat malas untuk membuka blog, dikarenakan koneksi Internet yang lemot abis. Banyak R.T.O nya dari jalannya...ckk, maklum via Tathering wifi kiri kanan..wkkkk!! Pembaruan Gagal dahh di artikel blognya. Tapi setidaknya satu artikel untuk dibagikan ke sobat Ngerapik blog lumayanlah..wkkk!

Nah,, untuk teman teman Blog Ngerapik gak pakai lama langsung saja comot code dibawah ini terapkan nya jangan lupa di TATA LETAK bukan dari Edit HTML tamplate. Cekidot Wae..!

Kode Terapkan di TATA LETAK:

</> Code HTML

<div class="foodflash-container">
  
  <div class="foodflash-header">
    <span class="brand-title">Food<span class="brand-bold">Flash</span></span>
    <span class="brand-icon">Detik⚡</span>
  </div>

<div class="slider-wrapper">
    
    <button class="nav-btn prev-btn" onclick="scrollSlider(-1)">❮</button>
    
    
    <div class="foodflash-slider" id="foodSlider">
      
      
      <div class="flash-card">
        <img src="https://cdnv.detik.com/videoservice/AdminTV/2026/06/15/3829bf67ce7e44649bafe35cd1ec104d-20260615170557-0s.jpg?w=300&q=90" alt="Pho Vietnam" />
        <span class="video-duration">00:56</span>
        <div class="card-overlay">
          <h3>Pho Vietnam Utara</h3>
        </div>
      </div>

<div class="flash-card">
        <img src="https://akcdn.detik.net.id/community/media/visual/2026/04/08/allo-paylater-1775611251633_916.jpeg?w=300&q=90" alt="Belanja Hemat" />
        <span class="video-duration">00:30</span>
        <div class="card-overlay promo-pink">
          <h3>BELANJA HEMAT DISKON BERLIMPAH</h3>
        </div>
      </div>

<div class="flash-card">
        <img src="https://akcdn.detik.net.id/community/media/visual/2026/06/14/aldi-taher-1781413149792_916.jpeg?w=300&q=90" alt="Ayam Goreng" />
        <span class="video-duration">00:48</span>
        <div class="card-overlay">
          <h3>Ayam Goreng Basah</h3>
        </div>
      </div>

<div class="flash-card">
        <img src="https://akcdn.detik.net.id/community/media/visual/2026/06/12/pengalaman-bersantap-kelas-dunia-hadir-di-bali-1781234162269_916.jpeg?w=300&q=90" alt="Chef" />
        <span class="video-duration">00:15</span>
        <div class="card-overlay dark-bg">
          <h3>Chef Giorgio</h3>
        </div>
      </div>

<div class="flash-card">
        <img src="https://akcdn.detik.net.id/community/media/visual/2026/06/11/thumbnail-1781160002638_916.jpeg?w=300&q=90" alt="Burger" />
        <span class="video-duration">00:51</span>
        <div class="card-overlay">
          <h3>BURGER RP 150.000</h3>
        </div>
      </div>

<div class="flash-card">
        <img src="https://akcdn.detik.net.id/community/media/visual/2026/06/09/cicip-soto-mie-sultan-rp-100-ribuan-worth-it-nggak-ya-1780988977793_916.jpeg?w=300&q=90" alt="Soto Mie" />
        <span class="video-duration">00:50</span>
        <div class="card-overlay">
          <h3>SOTO MIE RP 100.000</h3>
        </div>
      </div>
	  
	  
      <div class="flash-card">
        <img src="https://cdnv.detik.com/videoservice/AdminTV/2026/06/09/47903d742b884b899f6a4d0fdae0b5cb-20260609111831-0s.jpg?w=300&q=90" alt="Delivery" />
        <span class="video-duration">00:50</span>
        <div class="card-overlay">
          <h3>SIAP ANTAR JEMPUT</h3>
        </div>
      </div>
	  
	  
      <div class="flash-card">
        <img src="https://akcdn.detik.net.id/community/media/visual/2026/05/07/thumbnail-1778126396391_916.jpeg" alt="NASI PADANG" />
        <span class="video-duration">00:50</span>
        <div class="card-overlay">
          <h3>NASI PADANG SELALU NYUMMY</h3>
        </div>
      </div>
	  
	  
      <div class="flash-card">
        <img src="https://akcdn.detik.net.id/community/media/visual/2026/05/22/thumbnail-1779414499294_916.jpeg" alt="BEBEK KELUNGKUNG" />
        <span class="video-duration">00:50</span>
        <div class="card-overlay">
          <h3>CITRA SEDAP BEBEK KELUNGKUNG</h3>
        </div>
      </div>
	  
	  
	  <a href="https://20.detik.com/flash?kategori=kuliner" target="_blank" class="card-link">
      <div class="flash-card">
        <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguZYGKVzVpSzu3RTFHnwItsANp6WvKeKxJfPbWBxykhvLIS-OTgHWy7w89aT7g34gv6PBfCF9MQUQhQuFiPTqSocD8zDHPmSU0IAGJSlJhaZ8Rp7sNIrPbKjXf4mcXSLRMKaNKRgcNayi9fl_AXmFbNMGGZ7oZIu8gU5CN8URU1nGrQJojSXKST2fbzF2U/s1600/all.png" alt="LIHAT SEMUA" />
        <span class="video-duration">00:50</span>
        <div class="card-overlay">
          <h3>LIHAT DI DETIK FOOD</h3>
        </div>
      </div>

</div>

<button class="nav-btn next-btn" onclick="scrollSlider(1)">❯</button>
  </div>
</div>

.foodflash-header {
  font-size: 24px;
  margin-bottom: 15px;
  display: flex;
  align-items: center;
}

.brand-title {
  color: #ff9900;
  font-weight: 500;
}

.brand-bold {
  font-weight: 800;
}

.brand-icon {
  color: #ff3300;
  margin-left: 5px;
}

/* --- Gaya Kapsul Slider --- */
.slider-wrapper {
  position: relative;
  display: flex;
  align-items: center;
}

.foodflash-slider {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  scroll-behavior: smooth;
  scrollbar-width: none; /* Sembunyikan scrollbar di Firefox */
  padding: 5px 0;
}

.foodflash-slider::-webkit-scrollbar {
  display: none; /* Sembunyikan scrollbar di Chrome/Safari */
}

/* --- Modifikasi Gaya Kartu (Tambahkan properti transisi) --- */
.flash-card {
  min-width: 140px;
  max-width: 140px;
  height: 240px;
  border-radius: 12px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  flex-shrink: 0;
  cursor: pointer;
  
  /* Efek halus saat kartu diangkat */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* --- Modifikasi Gaya Gambar (Tambahkan properti transisi) --- */
.flash-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  
  /* Efek halus saat gambar membesar */
  transition: transform 0.3s ease;
}

/* --- EFEK ANIMASI SAAT DIARAHKAN (HOVER) --- */

/* 1. Kartu sedikit terangkat ke atas dan bayangan menajam */
.flash-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* 2. Gambar di dalam kartu otomatis membesar sedikit (Zoom-In) */
.flash-card:hover img {
  transform: scale(1.1);
}

/* 3. Teks overlay menjadi sedikit lebih terang/naik */
.flash-card:hover .card-overlay {
  background: linear-gradient(transparent, rgba(0,0,0,0.9));
}

/* Informasi Durasi di Pojok Atas */
.video-duration {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  padding: 2px 6px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: bold;
}

/* Teks Lapisan Atas Kartu */
.card-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.8));
  padding: 10px;
  color: #fff;
  text-align: center;
}

.card-overlay h3 {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
}

/* Variasi Warna khusus */
.promo-pink {
  background: linear-gradient(transparent, #ff007f);
}
.dark-bg {
  background: rgba(0, 0, 0, 0.7);
}

/* --- Gaya Tombol Geser --- */
.nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: #fff;
  border: 1px solid #ccc;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

.prev-btn { left: -15px; }
.next-btn { right: -15px; }
.nav-btn:hover { background: #f0f0f0; }
</style>

NB :

Ganti <img src="URL GAMBAR" alt="KETERANGAN GAMBAR" />
<h3>TEKS UTAMA GAMBAR</h3> dengan basing kenek ikak lah (Terserah mau diganti apa sama sobat blogger)
const scrollAmount = 300; // Jarak geser piksel

Membuat Widget Ala Detik FOOD seperti Tayang di Toko Bedoeit Online Pangkalpinang

Posting Komentar

Formulir Kontak