Widget Gempa BMKG untuk Blogger dengan Data JSON Real-Time

---

Menghadirkan informasi gempabumi terbaru di blog sekarang dapat dilakukan dengan memanfaatkan Data Gempabumi Terbuka dari Badan Meteorologi, Klimatologi, dan Geofisika (BMKG). Melalui data tersebut, widget CodeFlare dapat menampilkan informasi seperti waktu kejadian, magnitudo, kedalaman, koordinat, wilayah gempa, informasi dirasakan, hingga keterangan mengenai potensi tsunami.

Data ini sangat berguna untuk membuat blog atau website yang membutuhkan informasi geofisika Indonesia secara dinamis tanpa harus memasukkan data secara manual setiap kali terjadi gempa. Namun perlu dipahami bahwa widget hanya berfungsi sebagai media untuk menampilkan kembali informasi dari BMKG. Untuk peringatan dini, arahan evakuasi, dan informasi keselamatan, pengguna tetap harus mengikuti kanal resmi BMKG dan instansi berwenang.

GEOPHYSICS DATA Data Gempabumi Indonesia

DATA ONLINE

SUMBER BMKG

FORMAT JSON

UPDATE Otomatis

SCRIPT Native JS

Apa itu BMKG?

BMKG atau Badan Meteorologi, Klimatologi, dan Geofisika merupakan lembaga pemerintah yang melaksanakan tugas pemerintahan di bidang meteorologi, klimatologi, dan geofisika. Informasi yang disediakan BMKG digunakan oleh masyarakat, pemerintah, dunia usaha, serta berbagai sektor yang membutuhkan data cuaca, iklim, kualitas udara, gempabumi, dan tsunami.

Dalam kaitannya dengan artikel ini, salah satu peran penting BMKG adalah melakukan pemantauan aktivitas geofisika dan menyampaikan informasi mengenai kejadian gempabumi serta tsunami di wilayah Indonesia.

Beberapa bidang layanan BMKG yang sering digunakan masyarakat meliputi:

Pengamatan dan Informasi Cuaca BMKG melakukan pengamatan atmosfer serta menyediakan prakiraan dan informasi cuaca untuk berbagai wilayah Indonesia. Informasi tersebut digunakan untuk aktivitas sehari-hari maupun sektor seperti transportasi, pertanian, kelautan, dan kebencanaan.

Informasi Iklim BMKG mengumpulkan dan menganalisis data iklim, curah hujan, suhu, perubahan iklim, serta berbagai indikator klimatologi yang dapat digunakan untuk perencanaan jangka menengah dan panjang.

Pemantauan Gempabumi dan Tsunami BMKG memantau aktivitas seismik di wilayah Indonesia dan sekitarnya. Ketika terjadi gempabumi, parameter seperti waktu, lokasi, magnitudo, dan kedalaman dianalisis sebelum informasinya disampaikan kepada masyarakat.

Peringatan Dini BMKG mempunyai peran penting dalam sistem peringatan dini yang berkaitan dengan fenomena meteorologi, klimatologi, dan geofisika, termasuk peringatan dini tsunami.

Pelayanan Data dan Informasi Publik Sebagian data BMKG tersedia untuk digunakan kembali oleh masyarakat dan pengembang. Salah satunya adalah Data Gempabumi Terbuka yang dapat dimanfaatkan untuk membuat aplikasi maupun widget informasi seperti yang dibahas pada artikel ini.

Data Gempabumi Terbuka BMKG

BMKG menyediakan portal Data Terbuka yang memungkinkan pengembang mengambil sejumlah informasi dalam format yang mudah diproses oleh aplikasi.

Untuk data gempabumi, BMKG menyediakan beberapa kategori informasi seperti gempabumi M 5.0+, gempabumi dirasakan, dan gempabumi berpotensi tsunami.

Data tersebut tersedia dalam format XML, JSON, dan JPG. Untuk widget Blogger, format JSON menjadi salah satu pilihan yang paling praktis karena dapat dibaca menggunakan JavaScript kemudian ditampilkan langsung pada halaman web.

Data diperbarui setiap kali terdapat peristiwa gempabumi yang masuk ke layanan tersebut. Karena merupakan layanan data publik, pengguna juga perlu menggunakan endpoint secara wajar dan tidak melakukan request secara berlebihan.

SEISMIC DATA NOTE Parameter awal dapat diperbarui

Parameter gempabumi yang muncul pada beberapa menit pertama setelah kejadian dapat berubah setelah BMKG melakukan analisis atau revisi lebih lanjut. Widget akan mengikuti data yang tersedia ketika halaman melakukan request.

Apa itu JSON?

JSON atau JavaScript Object Notation adalah format pertukaran data yang banyak digunakan pada aplikasi web.

Dibandingkan menulis informasi secara manual ke dalam halaman HTML, JavaScript dapat mengambil data JSON dari sebuah sumber kemudian membaca nilai tertentu di dalamnya. Data tersebut selanjutnya dapat diolah dan ditampilkan menjadi kartu informasi, daftar, ticker, grafik, maupun komponen web lainnya.

Pada widget gempa CodeFlare, konsepnya sederhana: browser mengambil data dari endpoint BMKG, JavaScript membaca parameter gempa, kemudian informasi tersebut disusun menjadi tampilan yang lebih mudah dibaca pengunjung.

BMKG JSON

JavaScript

Widget

Pengunjung

Gempa dan Potensi Tsunami

Tidak setiap gempabumi yang terjadi di laut akan menghasilkan tsunami. Potensi tsunami berkaitan dengan berbagai karakteristik kejadian gempa dan proses yang menyebabkan perubahan pada dasar laut.

Karena itu, sebaiknya kita tidak menentukan sendiri apakah sebuah gempa berpotensi tsunami hanya berdasarkan satu parameter seperti magnitudo atau kedalaman.

Beberapa faktor yang berkaitan dengan pembangkitan tsunami antara lain lokasi sumber gempa, kedalaman, magnitudo, mekanisme sumber gempa, serta deformasi dasar laut yang terjadi.

01

Lokasi Gempa

Gempa yang sumbernya berada di laut atau di sekitar kawasan pesisir dapat menjadi salah satu kondisi yang perlu diperhatikan, tetapi lokasi di laut saja tidak berarti gempa tersebut pasti menghasilkan tsunami.

02

Magnitudo

Magnitudo menggambarkan besarnya energi gempabumi. Gempa dengan magnitudo besar dapat memiliki dampak yang luas, tetapi magnitudo bukan satu-satunya faktor untuk menentukan adanya tsunami.

03

Kedalaman

Gempa dangkal dapat menghasilkan efek yang berbeda dibandingkan gempa yang sumbernya jauh di dalam bumi. Namun kedalaman juga perlu dianalisis bersama parameter lainnya.

04

Mekanisme Sumber Gempa

Jenis pergerakan pada patahan dan perubahan vertikal dasar laut menjadi faktor penting dalam proses pembangkitan tsunami.

Status tsunami sebaiknya selalu mengikuti informasi resmi BMKG. Widget tidak menghitung sendiri potensi tsunami berdasarkan magnitudo atau kedalaman.

Bagaimana Tsunami Terjadi?

Tsunami merupakan rangkaian gelombang laut yang dapat terjadi ketika sejumlah besar massa air mengalami perpindahan secara tiba-tiba.

Salah satu penyebabnya adalah deformasi dasar laut akibat gempabumi. Perubahan tersebut dapat memindahkan kolom air di atasnya dan menghasilkan gelombang yang kemudian merambat ke berbagai arah.

Ketika mendekati wilayah pantai dan perairan menjadi lebih dangkal, karakteristik gelombang berubah dan ketinggian air dapat meningkat.

Gempabumi bukan satu-satunya penyebab tsunami. Aktivitas vulkanik, longsoran bawah laut, dan mekanisme lain juga dapat menyebabkan perpindahan massa air yang besar.

Peringatan Dini Tsunami

Indonesia mempunyai sistem pemantauan dan peringatan dini tsunami yang melibatkan BMKG serta berbagai unsur terkait.

Jika BMKG mengeluarkan informasi atau peringatan dini tsunami setelah suatu gempabumi, informasi resmi tersebut harus menjadi rujukan utama.

Widget pada website sebaiknya diposisikan sebagai sarana tambahan untuk mempermudah melihat data, bukan sebagai pengganti sistem peringatan dini resmi.

WARNING

Jika berada di kawasan rawan tsunami dan merasakan gempa kuat atau berlangsung cukup lama, ikuti prosedur kesiapsiagaan daerah setempat serta arahan resmi dari BMKG dan instansi berwenang. Jangan menunggu informasi dari widget blog untuk mengambil keputusan keselamatan.

Generator Widget Gempa BMKG

WIDGET SELECTOR Pilih Widget yang Ingin Digunakan Pilih model lalu buka preview dan salin kode lengkapnya.

Widget Utama dipilih.

Widget Informasi Gempa dan Potensi Tsunami

Bagi kamu yang ingin menampilkan informasi gempabumi Indonesia pada Blogger, data terbuka BMKG dapat digunakan untuk membuat widget yang diperbarui secara otomatis ketika halaman dibuka.

Widget dapat menampilkan beberapa parameter seperti tanggal dan waktu kejadian, magnitudo, kedalaman, lintang dan bujur, wilayah, potensi tsunami, informasi dirasakan, serta lokasi gempa pada peta.

Tampilan widget dapat dikembangkan dalam berbagai bentuk, mulai dari kartu informasi, daftar gempabumi, slider vertikal hingga headline ticker.

NEW

VERSI TERBARU Widget Gempa BMKG Native JavaScript

Versi terbaru direkomendasikan untuk pemasangan baru. Widget menggunakan JavaScript native untuk mengambil data autogempa.json dari Data Gempabumi Terbuka BMKG sehingga tidak membutuhkan jQuery untuk memproses data utamanya.

Widget dirancang responsif mulai dari sidebar sekitar 200px hingga area konten yang lebih lebar. Informasi penting tetap menggunakan ukuran font yang nyaman dibaca, sementara layout data otomatis berubah menjadi satu kolom ketika ruang tersedia terlalu sempit.

Menghubungkan ke data BMKG...

Untuk menggunakan widget versi terbaru, salin seluruh kode berikut kemudian pasang pada gadget HTML/JavaScript Blogger. Font Awesome hanya diperlukan untuk ikon. Template CodeFlare sendiri sudah menggunakan Font Awesome sehingga library tersebut tidak perlu dimuat ulang.

MAIN WIDGET Kode Widget Gempa Utama

Salin seluruh kode berikut lalu tempel pada gadget HTML/JavaScript Blogger.

<div id="cfBmkgWidget">Loading Data BMKG...</div> <script> (function(){ "use strict"; var root=document.getElementById("cfBmkgWidget"); if(!root)return; function esc(v){return String(v==null?"-":v).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'");} function safe(v){return String(v||"").toLowerCase().indexOf("tidak")!==-1;} function cfMapUrl(coords){ var c=String(coords||"").split(","); if(c.length<2)return ""; return "https://maps.google.com/maps?q="+encodeURIComponent(c[0].trim())+","+encodeURIComponent(c[1].trim())+"&hl=id&z=9&output=embed"; } function cfEnsureMapModal(){ var modal=document.getElementById("cfEarthMapModal"); if(modal)return modal; modal=document.createElement("div"); modal.id="cfEarthMapModal"; modal.className="cfMapModal"; modal.setAttribute("aria-hidden","true"); modal.innerHTML='<div class="cfMapBackdrop" data-map-close></div><div class="cfMapDialog" role="dialog" aria-modal="true"><div class="cfMapHead"><i class="fa fa-map-marker"></i><b id="cfEarthMapTitle">Lokasi Gempa</b><button class="cfMapClose" type="button" data-map-close aria-label="Tutup peta"><i class="fa fa-times"></i></button></div><iframe id="cfEarthMapFrame" class="cfMapFrame" loading="lazy" title="Peta lokasi gempa"></iframe></div>'; document.body.appendChild(modal); modal.addEventListener("click",function(e){ if(e.target.closest("[data-map-close]"))cfCloseMap(); }); document.addEventListener("keydown",function(e){ if(e.key==="Escape"&&modal.classList.contains("is-open"))cfCloseMap(); }); return modal; } function cfOpenMap(coords,title){ var url=cfMapUrl(coords); if(!url)return; var modal=cfEnsureMapModal(); var frame=modal.querySelector("#cfEarthMapFrame"); var ttl=modal.querySelector("#cfEarthMapTitle"); frame.src=url; ttl.textContent=title||"Lokasi Gempa"; modal.classList.add("is-open"); modal.setAttribute("aria-hidden","false"); document.documentElement.classList.add("cfMapLocked"); } function cfCloseMap(){ var modal=document.getElementById("cfEarthMapModal"); if(!modal)return; modal.classList.remove("is-open"); modal.setAttribute("aria-hidden","true"); document.documentElement.classList.remove("cfMapLocked"); setTimeout(function(){ var frame=modal.querySelector("#cfEarthMapFrame"); if(frame&&!modal.classList.contains("is-open"))frame.src="about:blank"; },280); } fetch("https://data.bmkg.go.id/DataMKG/TEWS/autogempa.json",{cache:"no-store"}) .then(function(r){if(!r.ok)throw new Error("HTTP "+r.status);return r.json();}) .then(function(d){ var g=d&&d.Infogempa&&d.Infogempa.gempa;if(!g)throw new Error("Data tidak tersedia"); var h=''; h+='<div class="cfMainCard">'; h+='<div class="cfMainTop"><span><i></i> BMKG LIVE DATA</span><b>M '+esc(g.Magnitude)+'</b></div>'; h+='<div class="cfMainBody">'; h+='<strong class="cfMainPlace"><i class="fa fa-map-marker"></i> '+esc(g.Wilayah)+'</strong>'; h+='<div class="cfMainGrid">'; h+='<div><small>Tanggal</small><b>'+esc(g.Tanggal)+'</b></div>'; h+='<div><small>Jam</small><b>'+esc(g.Jam)+'</b></div>'; h+='<div><small>Kedalaman</small><b>'+esc(g.Kedalaman)+'</b></div>'; h+='<div><small>Koordinat</small><b>'+esc(g.Lintang)+' · '+esc(g.Bujur)+'</b></div>'; h+='</div>'; h+='<div class="cfMainPot '+(safe(g.Potensi)?"safe":"warn")+'">'+esc(g.Potensi)+'</div>'; if(g.Dirasakan)h+='<div class="cfMainFelt"><b>Dirasakan:</b> '+esc(g.Dirasakan)+'</div>'; h+='</div><div class="cfMainFoot">Sumber BMKG · Widget by CodeFlare</div></div>'; root.innerHTML=h; }) .catch(function(){root.innerHTML='<div class="cfMainError">Data BMKG belum dapat dimuat.</div>';}); document.addEventListener("click",function(e){ var b=e.target.closest(".cfMapOpen");if(!b)return;cfOpenMap(b.getAttribute("data-coords"),b.getAttribute("data-title")); }); })(); </script> <style> #cfBmkgWidget,#cfBmkgWidget *{box-sizing:border-box}#cfBmkgWidget{font-family:Arial,sans-serif;font-size:12px} .cfMainCard{overflow:hidden;border:1px solid rgba(0,131,218,.20);border-radius:12px;background:linear-gradient(145deg,rgba(0,131,218,.04),rgba(91,74,180,.025))} .cfMainTop{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;border-bottom:1px solid rgba(0,131,218,.13)} .cfMainTop span{display:flex;align-items:center;gap:5px;color:#0083da;font-size:11px;font-weight:700}.cfMainTop span i{width:6px;height:6px;border-radius:50%;background:#28a66a}.cfMainTop b{padding:5px 7px;border-radius:6px;background:#087bc3;color:#fff;font-size:13px} .cfMainBody{padding:10px}.cfMainPlace{display:block;font-size:13px;line-height:1.45}.cfMainPlace i{color:#0083da} .cfMainGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin-top:8px}.cfMainGrid>div{padding:7px;border:1px solid rgba(0,131,218,.12);border-radius:7px}.cfMainGrid small,.cfMainGrid b{display:block}.cfMainGrid small{font-size:11px;opacity:.7}.cfMainGrid b{margin-top:2px;font-size:12px;overflow-wrap:anywhere} .cfMainPot,.cfMainFelt{margin-top:7px;padding:7px;border-radius:7px}.cfMainPot.safe{border:1px solid rgba(40,166,106,.25);color:#28a66a}.cfMainPot.warn{border:1px solid rgba(220,78,78,.3);color:#dc4e4e}.cfMainFelt{border:1px solid rgba(232,155,45,.24)} .cfMainFoot{padding:6px;text-align:center;font-size:11px;opacity:.72}.cfMainError{padding:12px;border:1px solid rgba(220,78,78,.25);border-radius:9px;text-align:center} html.cfMapLocked{overflow:hidden} .cfMapModal{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:14px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease,visibility .25s ease} .cfMapModal.is-open{visibility:visible;opacity:1;pointer-events:auto} .cfMapBackdrop{position:absolute;inset:0;background:rgba(5,12,18,.72);backdrop-filter:blur(3px)} .cfMapDialog{position:relative;width:min(92vw,620px);transform:translateY(18px) scale(.97);transition:transform .28s ease;border:1px solid rgba(0,131,218,.28);border-radius:13px;background:#111b23;box-shadow:0 20px 55px rgba(0,0,0,.38);overflow:hidden} .cfMapModal.is-open .cfMapDialog{transform:translateY(0) scale(1)} .cfMapHead{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid rgba(0,131,218,.18);background:linear-gradient(135deg,#132938,#111b23);color:#eaf7ff} .cfMapHead i{color:#42bfff}.cfMapHead b{flex:1;min-width:0;font-size:13px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cfMapClose{width:32px;height:32px;border:1px solid rgba(80,190,255,.24);border-radius:7px;background:#233c4d;color:#fff!important;cursor:pointer} .cfMapFrame{display:block;width:100%;height:min(62vh,420px);border:0;background:#0d151b} .cfMapOpen{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:5px 7px;border:1px solid rgba(0,131,218,.22);border-radius:6px;background:#2b6384;color:#fff!important;font:inherit;font-size:11px;font-weight:700;cursor:pointer} @media(max-width:420px){.cfMapModal{padding:9px}.cfMapFrame{height:55vh}.cfMapDialog{width:96vw}} @media(prefers-reduced-motion:reduce){.cfMapModal,.cfMapDialog{transition:none}} @media(max-width:240px){.cfMainGrid{grid-template-columns:1fr}} </style>

Versi yang direkomendasikan Widget native JavaScript ini dirancang tetap nyaman dibaca pada sidebar mulai sekitar 200px tanpa horizontal scroll.

Versi Sebelumnya

LEGACY WIDGET Kode Widget Lama Tetap Tersedia Bagian berikut dipertahankan bagi pengguna yang masih memakai versi sebelumnya atau ingin menggunakan konsep tampilannya.

01 Widget Model Kotak

Widget model kotak merupakan versi awal yang menampilkan kejadian gempa terbaru bersama peta.

Informasi yang ditampilkan meliputi tanggal, waktu, koordinat, magnitudo, kedalaman, wilayah, potensi tsunami, dan informasi gempa yang dirasakan.

Versi ini masih dapat digunakan oleh pengguna yang menyukai tampilan lama atau sudah memasangnya pada website. Namun karena implementasinya menggunakan jQuery, untuk pemasangan baru saya lebih menyarankan widget native JavaScript yang tersedia pada bagian sebelumnya.

Loading Data Gempa...

BOX WIDGET Kode Widget Model Kotak

Salin seluruh kode berikut lalu tempel pada gadget HTML/JavaScript Blogger.

<div id="cfBmkgBoxWidget">Loading Data BMKG...</div> <script> (function(){ "use strict"; var root=document.getElementById("cfBmkgBoxWidget");if(!root)return; function esc(v){return String(v==null?"-":v).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'");} function cfMapUrl(coords){ var c=String(coords||"").split(","); if(c.length<2)return ""; return "https://maps.google.com/maps?q="+encodeURIComponent(c[0].trim())+","+encodeURIComponent(c[1].trim())+"&hl=id&z=9&output=embed"; } function cfEnsureMapModal(){ var modal=document.getElementById("cfEarthMapModal"); if(modal)return modal; modal=document.createElement("div"); modal.id="cfEarthMapModal"; modal.className="cfMapModal"; modal.setAttribute("aria-hidden","true"); modal.innerHTML='<div class="cfMapBackdrop" data-map-close></div><div class="cfMapDialog" role="dialog" aria-modal="true"><div class="cfMapHead"><i class="fa fa-map-marker"></i><b id="cfEarthMapTitle">Lokasi Gempa</b><button class="cfMapClose" type="button" data-map-close aria-label="Tutup peta"><i class="fa fa-times"></i></button></div><iframe id="cfEarthMapFrame" class="cfMapFrame" loading="lazy" title="Peta lokasi gempa"></iframe></div>'; document.body.appendChild(modal); modal.addEventListener("click",function(e){ if(e.target.closest("[data-map-close]"))cfCloseMap(); }); document.addEventListener("keydown",function(e){ if(e.key==="Escape"&&modal.classList.contains("is-open"))cfCloseMap(); }); return modal; } function cfOpenMap(coords,title){ var url=cfMapUrl(coords); if(!url)return; var modal=cfEnsureMapModal(); var frame=modal.querySelector("#cfEarthMapFrame"); var ttl=modal.querySelector("#cfEarthMapTitle"); frame.src=url; ttl.textContent=title||"Lokasi Gempa"; modal.classList.add("is-open"); modal.setAttribute("aria-hidden","false"); document.documentElement.classList.add("cfMapLocked"); } function cfCloseMap(){ var modal=document.getElementById("cfEarthMapModal"); if(!modal)return; modal.classList.remove("is-open"); modal.setAttribute("aria-hidden","true"); document.documentElement.classList.remove("cfMapLocked"); setTimeout(function(){ var frame=modal.querySelector("#cfEarthMapFrame"); if(frame&&!modal.classList.contains("is-open"))frame.src="about:blank"; },280); } fetch("https://data.bmkg.go.id/DataMKG/TEWS/autogempa.json",{cache:"no-store"}) .then(function(r){if(!r.ok)throw new Error();return r.json();}) .then(function(d){ var g=d.Infogempa.gempa,h='<div class="cfBoxCard">'; h+='<div class="cfBoxHead"><span><i class="fa fa-bolt"></i> GEMPA TERBARU</span><b>M '+esc(g.Magnitude)+'</b></div>'; h+='<div class="cfBoxRows">'; [["fa-calendar","Tanggal",g.Tanggal],["fa-clock-o","Jam",g.Jam],["fa-sort-amount-desc","Kedalaman",g.Kedalaman],["fa-map-marker","Wilayah",g.Wilayah],["fa-exclamation-triangle","Potensi",g.Potensi],["fa-street-view","Dirasakan",g.Dirasakan]].forEach(function(x){h+='<div><i class="fa '+x[0]+'"></i><b>'+x[1]+'</b><span>'+esc(x[2])+'</span></div>';}); h+='</div><div class="cfBoxAction"><button class="cfMapOpen" type="button" data-coords="'+esc(g.Coordinates)+'" data-title="'+esc(g.Wilayah)+'"><i class="fa fa-map"></i> Buka Peta Gempa</button></div>'; h+='<div class="cfBoxFoot">Sumber BMKG · Widget by CodeFlare</div></div>'; root.innerHTML=h; }) .catch(function(){root.innerHTML='<div class="cfBoxError">Data BMKG belum dapat dimuat.</div>';}); document.addEventListener("click",function(e){var b=e.target.closest(".cfMapOpen");if(b)cfOpenMap(b.getAttribute("data-coords"),b.getAttribute("data-title"));}); })(); </script> <style> #cfBmkgBoxWidget,#cfBmkgBoxWidget *{box-sizing:border-box}#cfBmkgBoxWidget{font-family:Arial,sans-serif;font-size:12px} .cfBoxCard{overflow:hidden;border:1px solid rgba(0,131,218,.18);border-radius:11px}.cfBoxHead{display:flex;justify-content:space-between;gap:8px;padding:9px;background:linear-gradient(135deg,rgba(0,131,218,.06),rgba(94,72,180,.03))}.cfBoxHead span{color:#0083da;font-size:11px;font-weight:700}.cfBoxHead b{font-size:13px} .cfBoxRows>div{display:grid;grid-template-columns:18px 70px minmax(0,1fr);gap:5px;padding:7px 8px;border-top:1px solid rgba(127,145,155,.16);line-height:1.4}.cfBoxRows i{color:#0083da}.cfBoxRows span{overflow-wrap:anywhere}.cfBoxAction{padding:0 8px 8px}.cfBoxFoot{padding:6px;text-align:center;font-size:11px;opacity:.72}.cfBoxError{padding:12px;border:1px solid rgba(220,78,78,.25);border-radius:9px} html.cfMapLocked{overflow:hidden} .cfMapModal{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:14px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease,visibility .25s ease} .cfMapModal.is-open{visibility:visible;opacity:1;pointer-events:auto} .cfMapBackdrop{position:absolute;inset:0;background:rgba(5,12,18,.72);backdrop-filter:blur(3px)} .cfMapDialog{position:relative;width:min(92vw,620px);transform:translateY(18px) scale(.97);transition:transform .28s ease;border:1px solid rgba(0,131,218,.28);border-radius:13px;background:#111b23;box-shadow:0 20px 55px rgba(0,0,0,.38);overflow:hidden} .cfMapModal.is-open .cfMapDialog{transform:translateY(0) scale(1)} .cfMapHead{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid rgba(0,131,218,.18);background:linear-gradient(135deg,#132938,#111b23);color:#eaf7ff} .cfMapHead i{color:#42bfff}.cfMapHead b{flex:1;min-width:0;font-size:13px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cfMapClose{width:32px;height:32px;border:1px solid rgba(80,190,255,.24);border-radius:7px;background:#233c4d;color:#fff!important;cursor:pointer} .cfMapFrame{display:block;width:100%;height:min(62vh,420px);border:0;background:#0d151b} .cfMapOpen{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:5px 7px;border:1px solid rgba(0,131,218,.22);border-radius:6px;background:#2b6384;color:#fff!important;font:inherit;font-size:11px;font-weight:700;cursor:pointer} @media(max-width:420px){.cfMapModal{padding:9px}.cfMapFrame{height:55vh}.cfMapDialog{width:96vw}} @media(prefers-reduced-motion:reduce){.cfMapModal,.cfMapDialog{transition:none}} </style>

02 Widget Featured List / Sliding

Model ini menggabungkan dua gaya dalam satu widget: Featured List untuk menampilkan satu gempa utama beserta daftar ringkas berikutnya, dan Sliding untuk menampilkan data secara bergantian dalam format yang lebih dinamis.

Gunakan pilihan mode pada Live Preview untuk membandingkan keduanya. Featured List cocok saat kamu ingin semua informasi terlihat sekaligus, sedangkan Sliding cocok untuk sidebar yang lebih sempit atau tampilan yang ingin terasa lebih hidup.

LIVE PREVIEW Featured / Sliding Live Preview

SELECT MODE

Loading Data Gempa...

Loading Data Gempa...

FEATURED LIST WIDGET Kode Lengkap Siap Copy & Paste

Salin seluruh kode berikut lalu tempel pada gadget HTML/JavaScript Blogger. Kode featured list ini sudah menggunakan JavaScript native sehingga tidak membutuhkan jQuery.

<div id="cfBmkgFeaturedWidget">Loading Data Gempa...</div> <script> (function(){ "use strict"; var root=document.getElementById("cfBmkgFeaturedWidget"); if(!root)return; function esc(v){ return String(v==null?"-":v) .replace(/&/g,"&") .replace(/</g,"<") .replace(/>/g,">") .replace(/"/g,""") .replace(/'/g,"'"); } function cfMapUrl(coords){ var c=String(coords||"").split(","); if(c.length<2)return ""; return "https://maps.google.com/maps?q="+encodeURIComponent(c[0].trim())+","+encodeURIComponent(c[1].trim())+"&hl=id&z=9&output=embed"; } function cfEnsureMapModal(){ var modal=document.getElementById("cfEarthMapModal"); if(modal)return modal; modal=document.createElement("div"); modal.id="cfEarthMapModal"; modal.className="cfMapModal"; modal.setAttribute("aria-hidden","true"); modal.innerHTML='<div class="cfMapBackdrop" data-map-close></div><div class="cfMapDialog" role="dialog" aria-modal="true"><div class="cfMapHead"><i class="fa fa-map-marker"></i><b id="cfEarthMapTitle">Lokasi Gempa</b><button class="cfMapClose" type="button" data-map-close aria-label="Tutup peta"><i class="fa fa-times"></i></button></div><iframe id="cfEarthMapFrame" class="cfMapFrame" loading="lazy" title="Peta lokasi gempa"></iframe></div>'; document.body.appendChild(modal); modal.addEventListener("click",function(e){ if(e.target.closest("[data-map-close]"))cfCloseMap(); }); document.addEventListener("keydown",function(e){ if(e.key==="Escape"&&modal.classList.contains("is-open"))cfCloseMap(); }); return modal; } function cfOpenMap(coords,title){ var url=cfMapUrl(coords); if(!url)return; var modal=cfEnsureMapModal(); var frame=modal.querySelector("#cfEarthMapFrame"); var ttl=modal.querySelector("#cfEarthMapTitle"); frame.src=url; ttl.textContent=title||"Lokasi Gempa"; modal.classList.add("is-open"); modal.setAttribute("aria-hidden","false"); document.documentElement.classList.add("cfMapLocked"); } function cfCloseMap(){ var modal=document.getElementById("cfEarthMapModal"); if(!modal)return; modal.classList.remove("is-open"); modal.setAttribute("aria-hidden","true"); document.documentElement.classList.remove("cfMapLocked"); setTimeout(function(){ var frame=modal.querySelector("#cfEarthMapFrame"); if(frame&&!modal.classList.contains("is-open"))frame.src="about:blank"; },280); } function isSafe(v){ return String(v||"").toLowerCase().indexOf("tidak")!==-1; } fetch("https://data.bmkg.go.id/DataMKG/TEWS/gempaterkini.json",{cache:"no-store"}) .then(function(res){ if(!res.ok)throw new Error("HTTP "+res.status); return res.json(); }) .then(function(data){ var list=data&&data.Infogempa&&data.Infogempa.gempa; if(!Array.isArray(list)||!list.length){ throw new Error("Data tidak tersedia"); } var items=list.slice(0,6); var first=items[0]; var html=''; html+='<div class="cfBmfCard">'; html+='<div class="cfBmfTop">'; html+='<div><span class="cfBmfLive"><i></i> FEATURED EARTHQUAKE</span><b>Gempa M '+esc(first.Magnitude)+'</b></div>'; html+='<span class="cfBmfTime">'+esc(first.Jam)+'</span>'; html+='</div>'; html+='<div class="cfBmfHero">'; html+='<div class="cfBmfMag"><small>M</small><b>'+esc(first.Magnitude)+'</b></div>'; html+='<div class="cfBmfHeroData">'; html+='<strong>'+esc(first.Wilayah)+'</strong>'; html+='<span><i class="fa fa-calendar"></i> '+esc(first.Tanggal)+' · '+esc(first.Jam)+'</span>'; html+='<span><i class="fa fa-arrow-down"></i> '+esc(first.Kedalaman)+'</span>'; html+='<em class="'+(isSafe(first.Potensi)?"cfBmfSafe":"cfBmfWarn")+'">'+esc(first.Potensi)+'</em>'; html+='<button class="cfMapOpen" type="button" data-coords="'+esc(first.Coordinates)+'" data-title="'+esc(first.Wilayah)+'"><i class="fa fa-map"></i> Buka Peta Gempa</button>'; html+='</div>'; html+='</div>'; if(items.length>1){ html+='<div class="cfBmfList">'; items.slice(1).forEach(function(g,index){ html+='<div class="cfBmfItem">'; html+='<button class="cfMapOpen cfBmfMiniMap" type="button" data-coords="'+esc(g.Coordinates)+'" data-title="'+esc(g.Wilayah)+'" aria-label="Buka peta"><i class="fa fa-map-marker"></i></button>'; html+='<div class="cfBmfItemBody">'; html+='<strong>'+esc(g.Wilayah)+'</strong>'; html+='<span>'+esc(g.Tanggal)+' · '+esc(g.Jam)+' · '+esc(g.Kedalaman)+'</span>'; html+='<em class="'+(isSafe(g.Potensi)?"cfBmfSafe":"cfBmfWarn")+'">'+esc(g.Potensi)+'</em>'; html+='</div>'; html+='<b class="cfBmfMiniMag">M '+esc(g.Magnitude)+'</b>'; html+='</div>'; }); html+='</div>'; } html+='<div class="cfBmfFoot">Sumber data: <a href="https://data.bmkg.go.id/" target="_blank" rel="nofollow noopener">BMKG</a> · Widget by <a href="https://codeflare.net" target="_blank" rel="noopener">CodeFlare</a></div>'; html+='</div>'; root.innerHTML=html; }) .catch(function(){ root.innerHTML='<div class="cfBmfError"><i class="fa fa-exclamation-circle"></i> Data BMKG belum dapat dimuat.</div>'; }); document.addEventListener("click",function(e){ var b=e.target.closest(".cfMapOpen"); if(b)cfOpenMap(b.getAttribute("data-coords"),b.getAttribute("data-title")); }); })(); </script> <style> #cfBmkgFeaturedWidget, #cfBmkgFeaturedWidget *{box-sizing:border-box} #cfBmkgFeaturedWidget{ width:100%; min-width:0; font-family:Arial,sans-serif; font-size:12px; } .cfBmfCard{ overflow:hidden; border:1px solid rgba(0,131,218,.20); border-radius:12px; background:linear-gradient(145deg,rgba(0,131,218,.045),rgba(87,72,180,.025)); } .cfBmfTop{ display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 10px; border-bottom:1px solid rgba(0,131,218,.14); } .cfBmfTop>div{ min-width:0; } .cfBmfTop b{ display:block; margin-top:2px; font-size:13px; line-height:1.35; } .cfBmfLive{ display:flex; align-items:center; gap:5px; color:#0083da; font-size:11px; font-weight:700; letter-spacing:.4px; } .cfBmfLive i{ width:6px; height:6px; border-radius:50%; background:#28a66a; box-shadow:0 0 0 4px rgba(40,166,106,.10); } .cfBmfTime{ flex:0 0 auto; font-size:11px; opacity:.72; } .cfBmfHero{ display:grid; grid-template-columns:62px minmax(0,1fr); gap:10px; padding:11px; background:linear-gradient(135deg,rgba(0,131,218,.07),rgba(107,82,190,.035)); } .cfBmfMag{ height:62px; display:flex; align-items:center; justify-content:center; gap:2px; border-radius:12px; background:linear-gradient(145deg,#087fc6,#075d98); color:#fff; box-shadow:0 6px 14px rgba(0,83,140,.18); } .cfBmfMag small{ font-size:11px; font-weight:700; } .cfBmfMag b{ font-size:22px; line-height:1; } .cfBmfHeroData{ min-width:0; } .cfBmfHeroData strong{ display:block; font-size:13px; line-height:1.4; overflow-wrap:anywhere; } .cfBmfHeroData span{ display:block; margin-top:3px; font-size:12px; line-height:1.4; opacity:.78; } .cfBmfHeroData span i{ width:14px; color:#0083da; } .cfBmfHeroData em{ display:inline-block; margin-top:6px; padding:4px 6px; border-radius:5px; font-size:11px; font-style:normal; font-weight:700; line-height:1.35; } .cfBmfSafe{ border:1px solid rgba(40,166,106,.25); background:rgba(40,166,106,.06); color:#28a66a; } .cfBmfWarn{ border:1px solid rgba(220,78,78,.28); background:rgba(220,78,78,.06); color:#dc4e4e; } .cfBmfList{ padding:5px 9px 7px; } .cfBmfItem{ display:grid; grid-template-columns:27px minmax(0,1fr) auto; gap:7px; align-items:center; padding:8px 2px; border-bottom:1px dashed rgba(127,145,155,.25); } .cfBmfItem:last-child{ border-bottom:0; } .cfBmfItemBody{ min-width:0; } .cfBmfItemBody strong, .cfBmfItemBody span{ display:block; } .cfBmfItemBody strong{ font-size:12px; line-height:1.4; overflow-wrap:anywhere; } .cfBmfItemBody span{ margin-top:2px; font-size:11px; line-height:1.4; opacity:.70; } .cfBmfItemBody em{ display:inline-block; margin-top:4px; padding:3px 5px; border-radius:5px; font-size:10px; font-style:normal; font-weight:700; line-height:1.3; } .cfBmfSafe{border:1px solid rgba(40,166,106,.25);background:rgba(40,166,106,.06);color:#28a66a} .cfBmfWarn{border:1px solid rgba(220,78,78,.28);background:rgba(220,78,78,.06);color:#dc4e4e} .cfBmfMiniMag{ padding:4px 6px; border-radius:5px; background:#2b6384; color:#fff; font-size:11px; white-space:nowrap; } .cfBmfFoot{ padding:7px 9px; border-top:1px solid rgba(0,131,218,.12); font-size:11px; line-height:1.4; text-align:center; opacity:.75; } .cfBmfFoot a{ color:#0083da; text-decoration:none; } .cfBmfError{ padding:12px; border:1px solid rgba(220,78,78,.25); border-radius:9px; font-size:12px; text-align:center; } .cfBmfError i{ color:#dc4e4e; } @media(max-width:240px){ .cfBmfHero{ grid-template-columns:52px minmax(0,1fr); gap:8px; padding:9px; } .cfBmfMag{ height:52px; } .cfBmfMag b{ font-size:18px; } .cfBmfItem{ grid-template-columns:25px minmax(0,1fr); } .cfBmfMiniMag{ grid-column:2; justify-self:start; } } @media(prefers-reduced-motion:reduce){ .cfBmfLive i{ box-shadow:none; } } html.cfMapLocked{overflow:hidden} .cfBmfMiniMap{width:27px;height:27px;padding:0;border:1px solid rgba(0,131,218,.22);border-radius:6px;background:#2b6384;color:#fff!important;cursor:pointer} .cfMapModal{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:14px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease,visibility .25s ease} .cfMapModal.is-open{visibility:visible;opacity:1;pointer-events:auto} .cfMapBackdrop{position:absolute;inset:0;background:rgba(5,12,18,.72);backdrop-filter:blur(3px)} .cfMapDialog{position:relative;width:min(92vw,620px);transform:translateY(18px) scale(.97);transition:transform .28s ease;border:1px solid rgba(0,131,218,.28);border-radius:13px;background:#111b23;box-shadow:0 20px 55px rgba(0,0,0,.38);overflow:hidden} .cfMapModal.is-open .cfMapDialog{transform:translateY(0) scale(1)} .cfMapHead{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid rgba(0,131,218,.18);background:linear-gradient(135deg,#132938,#111b23);color:#eaf7ff} .cfMapHead i{color:#42bfff}.cfMapHead b{flex:1;min-width:0;font-size:13px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cfMapClose{width:32px;height:32px;border:1px solid rgba(80,190,255,.24);border-radius:7px;background:#233c4d;color:#fff!important;cursor:pointer} .cfMapFrame{display:block;width:100%;height:min(62vh,420px);border:0;background:#0d151b} .cfMapOpen{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:5px 7px;border:1px solid rgba(0,131,218,.22);border-radius:6px;background:#2b6384;color:#fff!important;font:inherit;font-size:11px;font-weight:700;cursor:pointer} @media(max-width:420px){.cfMapModal{padding:9px}.cfMapFrame{height:55vh}.cfMapDialog{width:96vw}} @media(prefers-reduced-motion:reduce){.cfMapModal,.cfMapDialog{transition:none}} </style>

03 Widget Headline Ticker

Headline ticker cocok digunakan apabila informasi gempa ingin ditempatkan pada area horizontal yang relatif sempit.

Setiap data dapat menampilkan magnitudo, wilayah, dan informasi potensi tsunami kemudian bergerak secara horizontal seperti ticker berita.

HEADLINE TICKER Kode Widget Headline Ticker + Hover Map

Salin seluruh kode berikut lalu tempel pada gadget HTML/JavaScript Blogger.

<div class="cfTickerWidget"><div class="cfTickerScroller"><div id="cfTickerInner" class="cfTickerInner"></div></div></div> <script> (function(){ "use strict"; var root=document.getElementById("cfTickerInner");if(!root)return; function esc(v){return String(v==null?"-":v).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">").replace(/"/g,""").replace(/'/g,"'");} function safe(v){return String(v||"").toLowerCase().indexOf("tidak")!==-1;} function cfMapUrl(coords){ var c=String(coords||"").split(","); if(c.length<2)return ""; return "https://maps.google.com/maps?q="+encodeURIComponent(c[0].trim())+","+encodeURIComponent(c[1].trim())+"&hl=id&z=9&output=embed"; } function cfEnsureMapModal(){ var modal=document.getElementById("cfEarthMapModal"); if(modal)return modal; modal=document.createElement("div"); modal.id="cfEarthMapModal"; modal.className="cfMapModal"; modal.setAttribute("aria-hidden","true"); modal.innerHTML='<div class="cfMapBackdrop" data-map-close></div><div class="cfMapDialog" role="dialog" aria-modal="true"><div class="cfMapHead"><i class="fa fa-map-marker"></i><b id="cfEarthMapTitle">Lokasi Gempa</b><button class="cfMapClose" type="button" data-map-close aria-label="Tutup peta"><i class="fa fa-times"></i></button></div><iframe id="cfEarthMapFrame" class="cfMapFrame" loading="lazy" title="Peta lokasi gempa"></iframe></div>'; document.body.appendChild(modal); modal.addEventListener("click",function(e){ if(e.target.closest("[data-map-close]"))cfCloseMap(); }); document.addEventListener("keydown",function(e){ if(e.key==="Escape"&&modal.classList.contains("is-open"))cfCloseMap(); }); return modal; } function cfOpenMap(coords,title){ var url=cfMapUrl(coords); if(!url)return; var modal=cfEnsureMapModal(); var frame=modal.querySelector("#cfEarthMapFrame"); var ttl=modal.querySelector("#cfEarthMapTitle"); frame.src=url; ttl.textContent=title||"Lokasi Gempa"; modal.classList.add("is-open"); modal.setAttribute("aria-hidden","false"); document.documentElement.classList.add("cfMapLocked"); } function cfCloseMap(){ var modal=document.getElementById("cfEarthMapModal"); if(!modal)return; modal.classList.remove("is-open"); modal.setAttribute("aria-hidden","true"); document.documentElement.classList.remove("cfMapLocked"); setTimeout(function(){ var frame=modal.querySelector("#cfEarthMapFrame"); if(frame&&!modal.classList.contains("is-open"))frame.src="about:blank"; },280); } fetch("https://data.bmkg.go.id/DataMKG/TEWS/gempaterkini.json",{cache:"no-store"}) .then(function(r){if(!r.ok)throw new Error();return r.json();}) .then(function(d){ var h=''; d.Infogempa.gempa.forEach(function(g){ var map=cfMapUrl(g.Coordinates); h+='<div class="cfTickWrap" tabindex="0" data-map-src="'+map+'" data-map-title="'+esc(g.Wilayah)+'">'; h+='<div class="cfTickRow"><span class="cfTickMag">M '+esc(g.Magnitude)+'</span><span class="cfTickArea">'+esc(g.Wilayah)+'</span><span class="'+(safe(g.Potensi)?"cfTickSafe":"cfTickWarn")+'">'+esc(g.Potensi)+'</span><button class="cfTickMapBtn cfMapOpen" type="button" data-coords="'+esc(g.Coordinates)+'" data-title="'+esc(g.Wilayah)+'"><i class="fa fa-map-marker"></i></button></div>'; h+='</div>'; }); root.innerHTML=h; Array.from(root.children).forEach(function(item){var clone=item.cloneNode(true);clone.setAttribute("aria-hidden","true");root.appendChild(clone);}); root.closest(".cfTickerScroller").setAttribute("data-animated","true"); function loadMap(wrap){var f=wrap.querySelector(".cfTickHoverMap iframe");if(f&&!f.src){f.src=f.getAttribute("data-map-src");}} var cursor=document.getElementById("cfTickCursorMap"); if(!cursor){ cursor=document.createElement("div"); cursor.id="cfTickCursorMap"; cursor.className="cfTickCursorMap"; cursor.innerHTML='<div><i class="fa fa-map"></i><b></b></div><iframe loading="lazy" title="Peta lokasi gempa"></iframe>'; document.body.appendChild(cursor); } function showMap(w,e){ if(!w||!cursor)return; var map=w.getAttribute("data-map-src")||""; var label=w.getAttribute("data-map-title")||"Lokasi Gempa"; var f=cursor.querySelector("iframe"); var b=cursor.querySelector("b"); if(map&&f.getAttribute("src")!==map)f.setAttribute("src",map); b.textContent=label; var pw=Math.min(300,window.innerWidth*.82); var x=e.clientX-(pw/2); var y=e.clientY+15; if(x<6)x=6; if(x+pw>window.innerWidth-6)x=window.innerWidth-pw-6; cursor.style.left=x+"px"; cursor.style.top=y+"px"; cursor.classList.add("show"); } function hideMap(){ if(cursor)cursor.classList.remove("show"); } root.addEventListener("mousemove",function(e){ showMap(e.target.closest(".cfTickWrap"),e); }); root.addEventListener("focusin",function(e){ var w=e.target.closest(".cfTickWrap"); if(!w)return; var r=w.getBoundingClientRect(); showMap(w,{clientX:r.left+(r.width/2),clientY:r.bottom}); }); root.addEventListener("mouseleave",hideMap); root.addEventListener("focusout",hideMap); }) .catch(function(){root.innerHTML='<div class="cfTickError">Data BMKG belum dapat dimuat.</div>';}); document.addEventListener("click",function(e){var b=e.target.closest(".cfMapOpen");if(b)cfOpenMap(b.getAttribute("data-coords"),b.getAttribute("data-title"));}); })(); </script> <style> .cfTickerWidget,.cfTickerWidget *{box-sizing:border-box}.cfTickerWidget{font-family:Arial,sans-serif;font-size:12px;position:relative;padding-bottom:142px} .cfTickerScroller{max-width:100%;overflow-x:hidden;overflow-y:visible}.cfTickerInner{display:flex;align-items:flex-start;gap:8px;width:max-content;padding:5px 0}.cfTickerScroller[data-animated="true"] .cfTickerInner{animation:cfTickerMove 100s linear infinite}.cfTickerScroller[data-animated="true"]:hover .cfTickerInner,.cfTickerScroller[data-animated="true"]:focus-within .cfTickerInner{animation-play-state:paused} .cfTickWrap{position:relative;flex:0 0 auto;outline:none}.cfTickRow{display:flex;align-items:center;gap:5px;white-space:nowrap;padding:5px;border:1px solid rgba(0,131,218,.15);border-radius:8px;background:rgba(0,131,218,.025)} .cfTickMag,.cfTickSafe,.cfTickWarn{padding:5px 7px;border-radius:5px;color:#fff;font-weight:700}.cfTickMag{background:#0083da;font-size:12px}.cfTickArea{padding:4px 6px;font-size:12px}.cfTickSafe{background:#268c56;font-size:11px}.cfTickWarn{background:#d84343;font-size:11px} .cfTickMapBtn{width:28px;height:28px;padding:0;border:1px solid rgba(0,131,218,.24);border-radius:6px;background:#2b6384;color:#fff!important;cursor:pointer} .cfTickWrap:hover .cfTickHoverMap,.cfTickWrap:focus-within .cfTickError{padding:10px;border:1px solid rgba(220,78,78,.25);border-radius:8px} @keyframes cfTickerMove{to{transform:translateX(calc(-50% - 4px))}} html.cfMapLocked{overflow:hidden} .cfMapModal{position:fixed;inset:0;z-index:999999;display:flex;align-items:center;justify-content:center;padding:14px;visibility:hidden;opacity:0;pointer-events:none;transition:opacity .25s ease,visibility .25s ease} .cfMapModal.is-open{visibility:visible;opacity:1;pointer-events:auto} .cfMapBackdrop{position:absolute;inset:0;background:rgba(5,12,18,.72);backdrop-filter:blur(3px)} .cfMapDialog{position:relative;width:min(92vw,620px);transform:translateY(18px) scale(.97);transition:transform .28s ease;border:1px solid rgba(0,131,218,.28);border-radius:13px;background:#111b23;box-shadow:0 20px 55px rgba(0,0,0,.38);overflow:hidden} .cfMapModal.is-open .cfMapDialog{transform:translateY(0) scale(1)} .cfMapHead{display:flex;align-items:center;gap:8px;padding:9px 10px;border-bottom:1px solid rgba(0,131,218,.18);background:linear-gradient(135deg,#132938,#111b23);color:#eaf7ff} .cfMapHead i{color:#42bfff}.cfMapHead b{flex:1;min-width:0;font-size:13px;line-height:1.35;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .cfMapClose{width:32px;height:32px;border:1px solid rgba(80,190,255,.24);border-radius:7px;background:#233c4d;color:#fff!important;cursor:pointer} .cfMapFrame{display:block;width:100%;height:min(62vh,420px);border:0;background:#0d151b} .cfMapOpen{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:5px 7px;border:1px solid rgba(0,131,218,.22);border-radius:6px;background:#2b6384;color:#fff!important;font:inherit;font-size:11px;font-weight:700;cursor:pointer} @media(max-width:420px){.cfMapModal{padding:9px}.cfMapFrame{height:55vh}.cfMapDialog{width:96vw}} @media(prefers-reduced-motion:reduce){.cfMapModal,.cfMapDialog{transition:none}} @media(max-width:260px){.cfTickerWidget{padding-bottom:124px}@media(prefers-reduced-motion:reduce){.cfTickerInner{animation:none!important}</style>

Lokasi Gempa

Catatan Penting Penggunaan Data BMKG

Gunakan Request Secukupnya Pada kebanyakan widget Blogger, mengambil data ketika halaman dibuka sudah cukup. Hindari request berulang dengan interval sangat pendek.

Tetap Cantumkan BMKG Sumber data sebaiknya tetap terlihat pada widget agar pengunjung mengetahui asal informasi yang ditampilkan.

Parameter Dapat Diperbarui Informasi awal gempabumi dapat berubah setelah dilakukan analisis lebih lanjut. Widget mengikuti data pada saat request dilakukan.

Bukan Sistem Peringatan Widget adalah media informasi tambahan dan tidak menggantikan peringatan dini maupun instruksi keselamatan resmi.

Mengembangkan Widget BMKG Lebih Lanjut

Saya masih dapat mengembangkan widget ini menjadi tampilan yang lebih lengkap. Data yang sama dapat digunakan untuk membuat dashboard mini, timeline gempabumi, peta interaktif, daftar kejadian M5.0+, atau tampilan khusus gempa yang dirasakan.

Untuk versi baru saya lebih memilih pendekatan JavaScript native karena widget menjadi lebih mandiri dan tidak bergantung pada jQuery.

Tampilan juga tidak perlu dibuat terlalu ramai. Informasi utama seperti magnitudo, lokasi, kedalaman, dan potensi tsunami dapat diberi hierarchy visual yang jelas, sementara background dan warna teks utama mengikuti template Blogger sehingga widget lebih mudah menyatu dengan mode terang maupun gelap.

Butuh Widget Data Custom?

CODEFLARE DEVELOPMENT Integrasikan Data Publik ke Blogger

Selain Data Gempabumi BMKG, konsep yang sama dapat digunakan untuk menampilkan banyak sumber data lain pada Blogger.

Custom Widget JSON / API Blogger Integration Responsive UI

DISKUSIKAN WIDGET

CodeFlare dapat membantu membuat widget berbasis JSON, API atau feed, dashboard mini, ticker informasi, custom widget, maupun integrasi data lain yang disesuaikan dengan desain website.

Kalau sebuah sumber menyediakan data yang dapat diakses dari browser, informasi tersebut biasanya masih bisa dikembangkan menjadi tampilan Blogger yang jauh lebih nyaman dibaca.

Yang terpenting adalah tetap menggunakan sumber data yang jelas, menampilkan atribusi ketika diwajibkan, menjaga request tetap efisien, serta mendesain widget agar informasi yang paling penting dapat segera ditemukan oleh pengunjung.

DATA LINK ACTIVE

Data resmi tetap menjadi sumber utama. Widget hanya membantu menyajikan informasinya agar lebih mudah dibaca pengunjung blog.