Widget Berita Black Ala BABELPROV Eksekusi AI dan Saya

Salam Ngerapik Blog, bagaimana kabar hari ini blog teman teman blogger semuanya, apakah masih full index google apa sudah merosot anjlok 😅? Kalau saya ya pasti anjlok..hehehe😂. Kali ini saya akam mencoba mengulas widget Berita Black Ala BABELPROV Eksekusi AI dan Saya, seperti nampak pada gambar dibawah. Cantik dan ganteng bukan untuk ditampilkan di Blog teman-teman semua. Langsung saja gak pake lama 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

<!-- ========================================== --> <!-- 2. KODE HTML (MENGGUNAKAN ATRIBUT ONCLICK) --> <!-- ========================================== --> <div class="custom-grid-block"> <!-- KOLOM KIRI: SIARAN PERS --> <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"> <!-- Berita Utama --> <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> <!-- Daftar Berita Kecil --> <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

<!-- KOLOM KANAN: BACAYUK.ID --> <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> <!-- ========================================== --> <!-- 3. KODE JAVASCRIPT (SISTEM ANIMASI MEMBAL) --> <!-- ========================================== --> <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! 

 

Demikianlah artikel singkat saya kali ini tentang "Widget Berita Black Ala BABELPROV Eksekusi AI dan Saya" semoga dapat bermanfaat serta dapat diaplikasikan pada blog toko online sobat blogger juga semuanya. Selamat mencoba untuk mempercantik dan memperganteng blog teman teman semua. Salam Ngerapik Blog.