Cara Membuat PopUp Box Blogger Modern Tanpa jQuery + 3 Desain Premium

---

PopUp box masih berguna untuk menyampaikan sambutan, promo, pengumuman, form newsletter, atau informasi penting di Blogger. Tetapi cara membuatnya sudah banyak berubah. Di 2026 kita tidak lagi perlu memasang jQuery hanya untuk membuka dan menutup sebuah kotak modal.

HTML modern sudah memiliki elemen <dialog> yang memang dibuat untuk dialog/modal. Dengan showModal(), browser menangani lapisan modal, backdrop, fokus, dan tombol Esc jauh lebih baik daripada popup berbasis <div> generasi lama.

Versi update CodeFlare ini membangun ulang Inside PopUp Box lama menjadi Smart PopUp Blogger 2026: native JavaScript, responsive, dark/light friendly, Font Awesome 7, frequency control dengan localStorage, trigger delay + scroll, dukungan reduced motion, dan tiga desain yang bisa dipreview langsung.

Informasi Singkat

---

<dialog> dan showModal() sudah didukung luas oleh browser modern. Saat modal dibuka menggunakan showModal(), konten di luar dialog menjadi inert sehingga fokus pengguna tetap berada pada dialog.

Google Search menyarankan agar popup promosi tidak menghalangi seluruh konten saat pengguna baru masuk. Untuk promosi biasa, banner atau dialog yang tidak mengganggu lebih aman bagi pengalaman pengguna dan Search.

Karena itu versi baru ini tidak lagi membuka shortlink/popunder ketika tombol Tutup ditekan. Tombol tutup harus benar-benar berarti menutup popup.

DAFTAR ISI

1. Apa Itu Inside PopUp Box?
2. Kenapa Kode Lama Perlu Dirombak?
3. Aturan PopUp yang Aman untuk SEO dan UX
4. Fitur Smart PopUp CodeFlare 2026
5. Preview 3 Desain PopUp
6. Cara Memasang di Blogger
7. Kode HTML PopUp
8. CSS PopUp
9. JavaScript + Frequency Control
10. Cara Mengubah Delay dan Waktu Tampil
11. Troubleshooting
12. FAQ

Apa Itu Inside PopUp Box?

Inside PopUp Box adalah dialog yang tampil di dalam halaman yang sedang dibuka. Berbeda dengan popup browser lama yang membuka window atau tab baru, modal modern tetap berada pada dokumen yang sama.

HALAMANPengunjung membaca konten

TRIGGERDelay, scroll, atau klik

DIALOGInfo tampil tanpa membuka tab

Contoh penggunaannya: sambutan singkat, pengumuman maintenance, promosi artikel baru, CTA layanan, newsletter, konfirmasi, atau informasi penting yang memang perlu memperoleh perhatian.

Kenapa Kode PopUp Lama Perlu Dirombak?

Versi lama CodeFlare dibuat ketika jQuery masih sangat umum dipakai di template Blogger. Kodenya masih membutuhkan jQuery 1.12, jQuery UI, dan animasi slideDown()/slideUp(). Sekarang tugas tersebut bisa dilakukan langsung oleh browser.

KODE LAMAjQuery + div overlay

Dependensi tambahan hanya untuk membuka/menutup popup.

Shortlink dapat terbuka setelah tombol tutup.

Class seperti .card-box terlalu global.

Focus dan keyboard handling perlu dibuat manual.

VERSI 2026Native <dialog>

Tidak membutuhkan jQuery.

Esc menutup modal secara native.

Class lokal .cfPop26.

Backdrop dan inert background ditangani browser.

Lebih sedikit script, lebih mudah dirawat.Kita juga membuang library tilt panjang dari kode lama. Efek visual dibuat dengan CSS ringan sehingga halaman tidak perlu memuat ratusan baris JavaScript hanya untuk sebuah popup.

Aturan PopUp yang Aman untuk SEO dan Pengunjung

Popup yang keren belum tentu popup yang baik. Google Search secara khusus memperingatkan tentang interstitial atau dialog promosi yang membuat konten utama sulit diakses, terutama jika muncul begitu pengguna masuk dari hasil pencarian.

Beri tombol Tutup yang jelas

Jangan menyembunyikan tombol X atau membuat tombol tutup menjalankan tindakan lain.

Jangan langsung menyerang pengguna

Untuk promo biasa, gunakan delay, scroll trigger, atau buka setelah interaksi.

Jangan menutup seluruh layar jika tidak perlu

Di mobile, dialog compact atau bottom notice sering lebih nyaman.

Hindari popunder paksa

Menekan Tutup seharusnya tidak membuka tab iklan atau shortlink baru.

Jaga keterbacaan

Teks, tombol dan kontras harus tetap jelas pada mode terang maupun gelap.

Hormati aksesibilitas

Gunakan elemen dialog, label yang jelas, keyboard dan reduced motion.

Untuk promo yang sifatnya ringan

Google lebih menyukai banner yang mengambil sedikit ruang layar dibanding interstitial layar penuh. Karena itu Type 3 pada tutorial ini dibuat sebagai bottom notice compact dan justru menjadi pilihan yang paling saya sarankan untuk promosi rutin.

Fitur Smart PopUp CodeFlare 2026

Native JavaScriptTanpa jQuery dan jQuery UI.

Native DialogMemakai <dialog> + showModal().

Frequency ControlAtur tampil ulang setelah beberapa hari.

Smart TriggerBisa terbuka karena delay atau persentase scroll.

Keyboard FriendlyEsc dapat menutup modal.

Dark / LightTampilan tetap terbaca pada dua mode.

ResponsiveLebar menggunakan viewport, bukan posisi 300px kaku.

Reduced MotionAnimasi dimatikan bila pengguna memintanya.

Preview 3 Desain Inside PopUp Box

Preview di bawah tidak menyimpan localStorage. Jadi bisa dibuka berkali-kali untuk membandingkan desain.

REKOMENDASIType 03 untuk promosi rutin

Type 01 dan Type 02 cocok untuk pesan yang memang penting atau dibuka setelah interaksi. Untuk promo artikel baru, Type 03 lebih ringan dan tidak terlalu mengganggu.

Cara Memasang Smart PopUp di Blogger

01

Backup template

Buka Tema Blogger dan download cadangan template sebelum mengedit HTML.

02

Buka Edit HTML

Masuk ke Tema → Edit HTML.

03

Cari </body>

Gunakan pencarian editor dan cari tag penutup body.

04

Tempel HTML popup

Letakkan markup dialog sebelum </body>.

05

Tempel CSS

Letakkan CSS popup bersama style lokal atau sebelum script popup.

06

Tempel engine JavaScript

Letakkan script paling bawah setelah HTML dialog.

07

Simpan dan uji

Coba desktop, mobile, tombol X, Esc, dan cek apakah popup muncul ulang sesuai frequency.

Kode HTML PopUp

Pilih salah satu desain. Ketiganya memakai engine dan CSS yang sama.

Type 01 — Neon Welcome

<!-- CodeFlare Smart Popup - Neon -->
<dialog class="cfPop26 cfPop26-neon" id="cfPopWelcome" aria-labelledby="cfPopWelcomeTitle">
<button class="cfPop26-x" type="button" data-cfpop-close aria-label="Tutup popup"><i class="fa-solid fa-xmark"></i></button>
<div class="cfPop26-icon"><i class="fa-solid fa-bolt"></i></div>
<span class="cfPop26-kicker">WELCOME SIGNAL</span>
<h2 id="cfPopWelcomeTitle">Selamat Datang di CodeFlare</h2>
<p>Temukan tutorial Blogger, optimasi template, SEO, dan eksperimen web yang bisa langsung dipraktikkan.</p>
<div class="cfPop26-actions">
<a href="/search/label/Blogspot">Mulai Jelajah <i class="fa-solid fa-arrow-right"></i></a>
<button type="button" data-cfpop-close>Nanti Saja</button>
</div>
</dialog>

Type 02 — Glass CTA

<!-- CodeFlare Smart Popup - Glass -->
<dialog class="cfPop26 cfPop26-glass" id="cfPopPromo" aria-labelledby="cfPopPromoTitle">
<button class="cfPop26-x" type="button" data-cfpop-close aria-label="Tutup popup"><i class="fa-solid fa-xmark"></i></button>
<div class="cfPop26-badge"><i class="fa-solid fa-star"></i> UPDATE</div>
<h2 id="cfPopPromoTitle">Ada yang baru di CodeFlare</h2>
<p>Lihat artikel, widget, dan eksperimen terbaru tanpa mengganggu aktivitas membaca.</p>
<div class="cfPop26-actions">
<a href="/">Lihat Update <i class="fa-solid fa-arrow-right"></i></a>
<button type="button" data-cfpop-close>Tutup</button>
</div>
</dialog>

Type 03 — Bottom Notice

<!-- CodeFlare Smart Notice - Bottom Sheet -->
<dialog class="cfPop26 cfPop26-sheet" id="cfPopNotice" aria-labelledby="cfPopNoticeTitle">
<div class="cfPop26-sheetIcon"><i class="fa-solid fa-bell"></i></div>
<div class="cfPop26-sheetText">
<b id="cfPopNoticeTitle">Info singkat</b>
<span>Ada tutorial Blogger baru yang mungkin kamu suka.</span>
</div>
<a href="/search/label/Blogspot">Buka</a>
<button class="cfPop26-sheetX" type="button" data-cfpop-close aria-label="Tutup"><i class="fa-solid fa-xmark"></i></button>
</dialog>

CSS Smart PopUp

CSS ini bersifat lokal menggunakan prefix cfPop26 supaya tidak bentrok dengan card, button, atau dialog lain di template.

<style>
/* CodeFlare Smart Popup 2026 */
.cfPop26{--p:#0083da;box-sizing:border-box;width:min(92vw,430px);max-height:min(84vh,620px);margin:auto;padding:24px;border:0;border-radius:14px;background:#fff;color:#17212b;box-shadow:0 24px 80px rgba(0,0,0,.32);overflow:auto}
.cfPop26::backdrop{background:rgba(3,13,24,.68);backdrop-filter:blur(4px)}
.cfPop26[open]{animation:cfPopIn .28s ease both}
.cfPop26-x{position:absolute;top:10px;right:10px;width:36px;height:36px;border:0;border-radius:8px;background:#eaf0f5;color:#17212b;cursor:pointer}
.cfPop26 h2{margin:8px 0;font-size:22px;line-height:1.25}
.cfPop26 p{margin:8px 0 17px;line-height:1.65}
.cfPop26-actions{display:flex;gap:8px;flex-wrap:wrap}
.cfPop26-actions a,.cfPop26-actions button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:40px;padding:0 14px;border:0;border-radius:7px;font-weight:700;text-decoration:none;cursor:pointer}
.cfPop26-actions a{background:var(--p);color:#fff!important}
.cfPop26-actions button{background:#eaf0f5;color:#17212b}
.cfPop26-neon{border:1px solid rgba(0,131,218,.35);background:linear-gradient(145deg,#07131f,#0b2032);color:#eaf7ff}
.cfPop26-neon:before{content:"";position:absolute;inset:0 0 auto;height:3px;background:linear-gradient(90deg,transparent,#00b7ff,#8cecff,transparent)}
.cfPop26-neon .cfPop26-x,.cfPop26-neon .cfPop26-actions button{background:rgba(255,255,255,.10);color:#eaf7ff}
.cfPop26-icon{display:grid;place-items:center;width:52px;height:52px;border:1px solid rgba(0,183,255,.5);border-radius:10px;background:rgba(0,131,218,.12);color:#69d8ff;font-size:22px}
.cfPop26-kicker{display:block;margin-top:14px;color:#69d8ff;font-size:10px;font-weight:800;letter-spacing:1.6px}
.cfPop26-glass{border:1px solid rgba(255,255,255,.25);background:linear-gradient(135deg,rgba(18,74,112,.96),rgba(8,27,44,.96));color:#fff}
.cfPop26-glass .cfPop26-x,.cfPop26-glass .cfPop26-actions button{background:rgba(255,255,255,.12);color:#fff}
.cfPop26-badge{display:inline-flex;gap:6px;align-items:center;padding:4px 8px;border-radius:20px;background:rgba(255,255,255,.12);font-size:10px;font-weight:800}
.cfPop26-sheet{width:min(94vw,720px);padding:13px 14px;display:none;align-items:center;gap:10px;border-radius:12px}
.cfPop26-sheet[open]{display:flex}
.cfPop26-sheetIcon{display:grid;place-items:center;flex:0 0 38px;height:38px;border-radius:9px;background:#eaf5fc;color:var(--p)}
.cfPop26-sheetText{flex:1;min-width:0}
.cfPop26-sheetText b,.cfPop26-sheetText span{display:block}
.cfPop26-sheetText span{margin-top:1px;font-size:12px}
.cfPop26-sheet>a{padding:7px 11px;border-radius:6px;background:var(--p);color:#fff!important;text-decoration:none;font-weight:700;white-space:nowrap}
.cfPop26-sheetX{width:34px;height:34px;border:0;border-radius:7px;background:#eaf0f5;color:#17212b;cursor:pointer}
@keyframes cfPopIn{from{opacity:0;transform:translateY(14px) scale(.97)}to{opacity:1;transform:none}}
@media(prefers-color-scheme:dark){
.cfPop26:not(.cfPop26-neon):not(.cfPop26-glass){background:#121a22;color:#edf6ff}
.cfPop26:not(.cfPop26-neon):not(.cfPop26-glass) .cfPop26-x,
.cfPop26:not(.cfPop26-neon):not(.cfPop26-glass) .cfPop26-actions button,
.cfPop26:not(.cfPop26-neon):not(.cfPop26-glass) .cfPop26-sheetX{background:#26323d;color:#edf6ff}
.cfPop26:not(.cfPop26-neon):not(.cfPop26-glass) .cfPop26-sheetIcon{background:#1b2c39}
}
@media(prefers-reduced-motion:reduce){.cfPop26[open]{animation:none}}
@media(max-width:520px){.cfPop26{padding:20px}.cfPop26 h2{font-size:20px}.cfPop26-actions>*{flex:1}.cfPop26-sheet{align-items:flex-start}.cfPop26-sheet>a{align-self:center}}
</style>

JavaScript + Frequency Control

Engine berikut akan membuka popup setelah 8 detik atau ketika pembaca sudah scroll 35%, mana yang terjadi lebih dulu. Setelah tampil, popup disimpan di localStorage dan baru boleh muncul kembali setelah 7 hari.

<!-- KONFIGURASI + ENGINE POPUP -->
<script>
(function(){
"use strict";
var cfg={
id:"cfPopWelcome", // ID popup yang ingin otomatis tampil
delay:8000, // jeda 8 detik
scroll:35, // atau setelah pembaca scroll 35%
rememberDays:7 // tampil lagi setelah 7 hari
};
var dlg=document.getElementById(cfg.id);
if(!dlg||typeof dlg.showModal!=="function")return;

var key="cfPop26:"+cfg.id,opened=false;
function remembered(){
try{
var t=parseInt(localStorage.getItem(key)||"0",10);
return t&&Date.now()-t<cfg.rememberDays*86400000;
}catch(e){return false}
}
function remember(){
try{localStorage.setItem(key,String(Date.now()))}catch(e){}
}
function openPop(){
if(opened||remembered()||dlg.open)return;
opened=true;dlg.showModal();remember();
}
function closePop(){
if(dlg.open)dlg.close();
}
dlg.querySelectorAll("[data-cfpop-close]").forEach(function(btn){
btn.addEventListener("click",closePop);
});
dlg.addEventListener("click",function(e){
var r=dlg.getBoundingClientRect();
if(e.clientX<r.left||e.clientX>r.right||e.clientY<r.top||e.clientY>r.bottom)closePop();
});
var timer=setTimeout(openPop,cfg.delay);
function onScroll(){
var max=document.documentElement.scrollHeight-innerHeight;
var pct=max>0?(scrollY/max)*100:0;
if(pct>=cfg.scroll){clearTimeout(timer);openPop();removeEventListener("scroll",onScroll)}
}
addEventListener("scroll",onScroll,{passive:true});
})();
</script>

Cara Mengubah Delay dan Waktu Tampil

id:"cfPopWelcome"ID popup yang otomatis dibuka.

delay:80008000 ms = 8 detik setelah halaman dibuka.

scroll:35Buka setelah pembaca mencapai 35% halaman.

rememberDays:7Jangan tampilkan lagi selama 7 hari.

Kalau popup hanya ingin dibuka dari tombol, kamu bahkan tidak perlu engine otomatis. Cukup panggil:

document.getElementById("cfPopWelcome").showModal();

Kenapa bukan “muncul sekali selamanya”?Informasi promo biasanya berubah. TTL 7 hari lebih fleksibel dibanding nilai localStorage permanen. Kamu bisa mengganti menjadi 1, 14, 30 hari, atau menonaktifkan trigger otomatis sama sekali.

Troubleshooting

Popup tidak muncul sama sekali

Periksa apakah ID pada konfigurasi sama dengan ID dialog. Jika pernah tampil, hapus key localStorage atau tunggu masa rememberDays habis.

Font Awesome tidak muncul

Pastikan template memang sudah memuat Font Awesome 7. Jika tidak ingin menggunakan icon, seluruh elemen <i> boleh dihapus.

Popup muncul setiap refresh

Browser mungkin memblokir localStorage, berada pada private mode tertentu, atau kode dijalankan pada origin/domain yang berbeda.

Tombol Esc tidak menutup popup

Pastikan popup dibuka dengan showModal(), bukan hanya menambahkan atribut open atau memaksa display:block.

Popup terlalu besar di mobile

Gunakan Type 03 atau kurangi isi popup. Jangan memasukkan paragraf panjang, tabel, atau terlalu banyak tombol.

Bagaimana reset untuk testing?

Buka DevTools → Application → Local Storage, lalu hapus key dengan awalan cfPop26:.

FAQ Inside PopUp Box Blogger

Apakah popup ini membutuhkan jQuery?

Tidak. Seluruh engine menggunakan JavaScript native.

Apakah <dialog> sudah aman digunakan?

Dukungan browser modern sudah luas. MDN menandai elemen dialog dan showModal() sebagai baseline widely available.

Apakah popup bisa memengaruhi SEO?

Bisa jika pengguna dibuat sulit mengakses konten, terutama interstitial promosi yang menutup layar. Gunakan dialog seperlunya, delay setelah pengguna berinteraksi, atau pilih banner/bottom notice.

Apakah tombol Tutup boleh diarahkan ke shortlink?

Sebaiknya tidak. Tombol Tutup harus mempunyai perilaku yang sesuai ekspektasi pengguna. Jika ingin memasang CTA sponsor, gunakan tombol terpisah yang labelnya jelas.

Apakah localStorage mengirim data ke server?

Pada contoh ini tidak. LocalStorage hanya menyimpan timestamp pada browser pengguna untuk menentukan kapan popup boleh tampil lagi.

Bisa dipakai untuk iklan sponsor?

Bisa untuk promosi langsung yang sesuai kebijakan situs dan aturan iklan yang berlaku, tetapi hindari pola menipu, tombol palsu, atau dialog yang sengaja sulit ditutup.

Referensi pembaruan MDN — HTML dialog element MDN — showModal() Google Search — Hindari interstisial yang mengganggu

WELCOME SIGNAL

Selamat Datang di CodeFlare

PopUp modern yang ringan, responsive, dan tidak membutuhkan jQuery.

Mulai Jelajah

CODEFLARE UPDATE

Widget lama, mesin baru.

Desain glass modern dengan native dialog, efek halus dan CTA yang jelas.

Lihat Update

Popup versi santunCompact, ringan, dan tidak menutupi sebagian besar layar.

Buka