Widget Berita Black Ala BABELPROV Eksekusi AI dan Saya

Langsung sajalah Lihat gambar dibawah ini cantik dan ganteng bukan untuk ditampilkan di Blog Teman-teman. Langsung saja kode script htmlnya. Saya bagi Tiga Kotak Ea..

Kode bagian Pertama:

</> Bagian 1

<style>
  .custom-grid-block * {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
  }
  
  .custom-grid-block {
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 20px !important;
    background-color: #0b111e !important;
    padding: 20px !important;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
    width: 100% !important;
    max-width: 1200px !important;
    margin: 0 auto !important;
    border-radius: 8px !important;
  }

.section-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 15px !important;
    font-weight: bold !important;
    font-size: 14px !important;
    color: #ffffff !important;
    margin-bottom: 15px !important;
  }
  .red-bg { background-color: #e52d27 !important; }
  .dark-bg { background-color: #1a253f !important; border-radius: 4px 4px 0 0; }
  .section-header a { color: #ffffff !important; text-decoration: none !important; font-size: 12px !important; font-weight: normal !important; }
  .section-title-wrapper { display: flex !important; align-items: center !important; gap: 8px !important; }
  
  /* EFEK TRANSISI & HOVER UMUM */
  .animated-card {
    cursor: pointer !important;
    transition: transform 0.1s ease-out, opacity 0.1s ease-out !important;
  }
  .animated-card:hover .news-link {
    color: #F8FA34 !important;
    text-decoration: underline !important;
  }
  .card-clicked {
    transform: scale(0.95) !important;
    opacity: 0.8 !important;
  }
  .news-link { 
    text-decoration: none !important; 
    transition: color 0.2s ease !important;
  }

/* TATA LETAK KOLOM KIRI (Siaran Pers) */
  .left-column { display: flex !important; flex-direction: column !important; }
  .content-wrapper { display: grid !important; grid-template-columns: 1.2fr 1fr !important; gap: 15px !important; }
  
  /* Berita Utama Kiri (Gambar di atas, teks di bawah) */
  .main-news {
    display: flex !important;
    flex-direction: column !important;
  }
  .main-news h3 { font-size: 15px !important; margin: 12px 0 6px 0 !important; line-height: 1.4 !important; font-weight: 600 !important; }
  .main-news .news-link { color: #ffffff !important; }
  .main-news img { width: 100% !important; height: 210px !important; object-fit: cover !important; border-radius: 4px !important; }

/* Daftar Berita Kecil Kiri (Gambar Kiri, Teks Kanan) */
  .sub-news-list { display: flex !important; flex-direction: column !important; gap: 15px !important; }
  
  /* KUNCI: Memaksa susunan mendatar ke samping */
  .sub-news-item { 
    display: flex !important; 
    flex-direction: row !important; 
    gap: 12px !important; 
    align-items: flex-start !important; 
  }
  .sub-news-item img { 
    width: 90px !important; 
    height: 65px !important; 
    object-fit: cover !important; 
    border-radius: 4px !important; 
    flex-shrink: 0 !important; 
  }
  .sub-news-text-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    flex: 1 !important;
  }
  .sub-news-item h4 { 
    font-size: 12px !important; 
    line-height: 1.3 !important; 
    font-weight: normal !important; 
    margin-bottom: 4px !important;
    color: #ffffff !important;
  }

/* TATA LETAK KOLOM KANAN (Bacayuk.id - Gambar Kiri, Teks Kanan) */
  .right-column { background-color: #ffffff !important; border-radius: 6px !important; padding: 0 0 15px 0 !important; display: flex !important; flex-direction: column !important; }
  .side-news-list { display: flex !important; flex-direction: column !important; gap: 15px !important; padding: 0 15px !important; }
  
  .side-news-item { 
    display: flex !important; 
    flex-direction: row !important;
    gap: 12px !important; 
    align-items: flex-start !important; 
    border-bottom: 1px solid #f0f0f0 !important; 
    padding-bottom: 12px !important; 
  }
  .side-news-item:last-child { border-bottom: none !important; }
  .side-news-item img { width: 85px !important; height: 55px !important; object-fit: cover !important; border-radius: 4px !important; flex-shrink: 0 !important; }
  
  .side-news-text-wrapper {
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-start !important;
    align-items: flex-start !important;
    flex: 1 !important;
  }
  .side-news-item h4 { font-size: 12px !important; line-height: 1.3 !important; font-weight: bold !important; margin-bottom: 4px !important; }
  .side-news-item .news-link { color: #2c3e50 !important; }

.meta-date { font-size: 10px !important; color: #8899a6 !important; margin: 0 !important; }
  .right-column .meta-date { color: #7f8c8d !important; }

@media (max-width: 800px) {
    .custom-grid-block { grid-template-columns: 1fr !important; padding: 10px !important; }
    .content-wrapper { grid-template-columns: 1fr !important; }
    .sub-news-item, .side-news-item { flex-direction: row !important; } /* Tetap ke samping di HP */
    .main-news img { height: 180px !important; }
  }
</style>

Kode bagian Kedua:

</> Bagian 2

<div class="custom-grid-block">
  
  
  <div class="left-column">
    <div class="section-header red-bg">
      <div class="section-title-wrapper">
        <svg width="18" height="18" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 22h16a2 2 0 0 0 2-2V4a2 2 0 0 0-2-2H8a2 2 0 0 0-2 2v16a2 2 0 0 1-2 2Zm0 0a2 2 0 0 1-2-2v-9c0-1.1.9-2 2-2h2"></path><path d="M18 14h-8M15 18h-5M10 6h8v4h-8V6Z"></path></svg>
        <span>Siaran Pers</span>
      </div>
      <a href="#" target="_blank">+ Siaran Pers Lainnya</a>
    </div>
    
    <div class="content-wrapper">
      
      <div class="main-news animated-card" onclick="bukaArtikel(this, 'https://babel.antaranews.com/berita/563301/gubernur-larang-robohkan-bangunan-cagar-budaya-smkn-1-pangkalpinang')">
        <img src="https://img.antaranews.com/cache/1200x800/2026/05/20/pentas.jpg.webp" alt="Berita Utama" />
        <h3>
          <span class="news-link">Gubernur larang robohkan bangunan cagar budaya SMKN 1 Pangkalpinang</span>
        </h3>
        <p class="meta-date">22/05/2026 | Admin Website SMK</p>
      </div>
      
      
      <div class="sub-news-list">
        <div class="sub-news-item animated-card" onclick="bukaArtikel(this, 'https://btikp.babelprov.go.id/content/nindi-friska-guru-smkn-4-pangkalpinang-dinobatkan-sebagai-duta-teknologi-2024')">
          <img src="https://btikp.babelprov.go.id/sites/default/files/styles/galleryformatter_slide/public/images/berita/rrrr.png?itok=p3mtItrO" alt="Thumb" />
          <div>
            <h4>
              <span class="news-link">Nindi Friska, Guru SMKN 4 Pangkalpinang Dinobatkan Sebagai Duta Teknologi Tahun 2024..</span>
            </h4>
            <p class="meta-date">22/05/2026</p>
          </div>
        </div>
        <div class="sub-news-item animated-card" onclick="bukaArtikel(this, 'https://ytknews.id/2026/05/guncang-panggung-fls2n-2026-pasukan-seniman-cilik-sd-santo-paulus-1-unjuk-gigi-di-tingkat-kota-pangkalpinang')">
          <img src="https://ytknews.id/wp-content/uploads/2026/05/WhatsApp-Image-2026-05-18-at-21.12.54-1-e1779325693367.jpeg" alt="Thumb" />
          <div>
            <h4>
              <span class="news-link">Pasukan Seniman Cilik SD Santo Paulus 1 Unjuk Gigi di FLS2N 2026!...</span>
            </h4>
            <p class="meta-date">22/05/2026</p>
          </div>
        </div>
		
		<div class="sub-news-item animated-card" onclick="bukaArtikel(this, 'https://cabdindikwilayah1.babelprov.go.id/2021/05/28/serah-terima-jabatan-kepala-sekolah-smkn-3-pangkalpinang')">
          <img src="https://cabdindikwilayah1.babelprov.go.id/wp-content/uploads/2021/05/WhatsApp-Image-2021-05-28-at-15.24.35-660x330.jpeg" alt="Thumb" />
          <div>
            <h4>
              <span class="news-link">SERAH TERIMA JABATAN KEPALA SEKOLAH SMKN 3 PANGKALPINANG...</span>
            </h4>
            <p class="meta-date">22/05/2026</p>
          </div>
        </div>
      </div>
    </div>
  </div>

Kode bagian Ketiga:

</> Bagian 3 Finish

<div class="right-column">
    <div class="section-header dark-bg">
      <span><img src="https://bacayuk.babelprov.go.id/frontend/assets/img/Bacayukidpanjang.png" alt="Side Thumb" /></span>
      <a href="#" target="_blank">+ Yuk, Baca Lainnya</a>
    </div>
    
    <div class="side-news-list">
      <div class="side-news-item animated-card" onclick="bukaArtikel(this, '#')">
        <img src="https://rakyatempatlawang.disway.id/upload/b6b22443285052298b876e0743b14c8f.jpg" alt="Side Thumb" />
        <div>
          <h4>
            <span class="news-link">Meskipun Sederhana Pelepasan dan Perpisahan Siswa SMK Assalwa Limbangan,Jadikan Kenangan Tak Terlupakan..</span>
          </h4>
          <p class="meta-date">31/03/2026 | Team SMK</p>
        </div>
      </div>
      <div class="side-news-item animated-card" onclick="bukaArtikel(this, 'https://dev-web.babelprov.go.id/berita/rencana-besar-gubernur-smkn-3-pangkalpinang-harus-siap-hadapi-dudi')">
        <img src="https://serumpun.babelprov.go.id/sites/default/files/styles/mbl_dtl_berita/public/images/berita/IMG-20211124-WA0021.jpg?itok=6cuLbBJ4" alt="Side Thumb" />
        <div>
          <h4>
            <span class="news-link">Kata Gubernur, SMKN 3 Pangkalpinang Harus Siap Hadapi DUDI</span>
          </h4>
          <p class="meta-date">15/03/2026 | Team SMK</p>
        </div>
      </div>
    </div>
  </div>

</div>

<script>
  function bukaArtikel(element, url) {
    // Tambahkan kelas animasi mengecil
    element.classList.add('card-clicked');
    
    // Tunggu 120 milidetik (efek membal selesai), lalu buka link di tab baru
    setTimeout(function() {
      element.classList.remove('card-clicked');
      window.open(url, '_blank');
    }, 120);
  }
</script>

NB:

Ganti Seluruh URL Artikel dan URL Gambar pada Kotak 2 sesuai yang teman teman inginkan (terserah apage jadi)
Apabila di kode/script muncul kode (textarea) hapus saja!

Selamat mencoba dan berkreasi unutk kecantikan dan kegantengan blogger sobat, Salam Ngerapik Blogger!

Widget Berita Black Ala BABELPROV Eksekusi AI dan Saya

Posting Komentar

Formulir Kontak