Widget Blog Menampilkan Data BMKG Gempa Dan Potensi Tsunami di Indonesia

Menghadirkan informasi terkini dan akurat mengenai gempa bumi dan tsunami di Indonesia, Widget Blog codeflare ini bisa menampilkan data terbaru dari Badan Meteorologi, Klimatologi, dan Geofisika (BMKG). Dengan integrasi langsung ini, pemilik blog dapat menampilkan informasi peringatan dini dan pembaruan real-time yang penting untuk keselamatan dan kewaspadaan terhadap bencana alam di website atau blog pribadi kamu. Temukan informasi lengkap dan terus perbarui pengetahuan kamu tentang kondisi geofisika terbaru di tanah air melalui widget codeflare yang inovatif ini.

Apa itu BMKG ?

BMKG, atau Badan Meteorologi, Klimatologi, dan Geofisika, adalah sebuah lembaga pemerintah di Indonesia yang bertanggung jawab atas pengamatan, penelitian, dan penyampaian informasi terkait dengan meteorologi (cuaca), klimatologi (iklim), dan geofisika (gempa bumi, tsunami, dan aktivitas seismik lainnya). Tugas utama BMKG meliputi:

Pengamatan dan Prediksi Cuaca
Melakukan pemantauan dan memberikan prakiraan cuaca untuk berbagai wilayah di Indonesia, termasuk informasi mengenai suhu, hujan, angin, dan kondisi cuaca lainnya yang penting untuk berbagai sektor, seperti penerbangan, pertanian, dan perikanan.

Pengawasan Iklim
Mengumpulkan dan menganalisis data iklim untuk membantu memahami perubahan iklim dan memberikan informasi mengenai pola cuaca jangka panjang. Hal ini penting untuk perencanaan pembangunan, pertanian, dan mitigasi bencana.

Pemantauan Geofisika:
Memantau aktivitas seismik dan geofisika lainnya, seperti gempa bumi dan tsunami. BMKG menyediakan informasi dan peringatan dini terkait dengan kejadian-kejadian geofisika ini untuk mengurangi risiko bencana dan menyelamatkan nyawa.

Penelitian dan Pengembangan
Melakukan penelitian untuk meningkatkan pemahaman dan kemampuan prediksi terkait dengan cuaca, iklim, dan geofisika. BMKG juga mengembangkan teknologi dan metode baru untuk pengamatan dan analisis data.

Pelayanan Informasi Publik
Menyediakan informasi yang dapat diakses oleh publik, pemerintah, dan berbagai sektor industri. Informasi ini penting untuk berbagai keputusan sehari-hari dan perencanaan jangka panjang.

Secara keseluruhan, BMKG berperan penting dalam mitigasi bencana alam, perencanaan pembangunan, dan peningkatan kualitas hidup masyarakat melalui penyediaan informasi yang akurat dan tepat waktu mengenai kondisi cuaca, iklim, dan geofisika.

Data Gempa dan Potensi Tsunami disediakan oleh website BMKG dan dapat diakses secara real-time oleh khalayak luas. Informasi ini tersedia secara online dalam format JSON Script yang mudah diolah, memungkinkan kamu untuk membuat widget blog yang selalu memperbarui informasi gempa dan potensi tsunami di Indonesia.

JSON (JavaScript Object Notation) script adalah sebuah format data yang digunakan untuk menyimpan dan mentransfer informasi. JSON sering digunakan dalam aplikasi web untuk pertukaran data antara klien (seperti browser) dan server. JSON adalah format yang mudah dibaca oleh manusia dan juga mudah diuraikan oleh mesin, yang membuatnya sangat populer dalam pengembangan web modern.

Informasi Singkat

Gempa yang berpotensi tsunami adalah gempa bumi yang terjadi di bawah laut atau dekat dengan pantai dan memiliki kekuatan serta karakteristik tertentu yang memungkinkan untuk memicu terjadinya tsunami. Beberapa faktor yang menentukan potensi tsunami dari sebuah gempa bumi meliputi:

Lokasi: Gempa terjadi di bawah laut atau di dekat garis pantai.

Kekuatan (Magnitudo): Gempa bumi dengan magnitudo yang besar, umumnya di atas 7,0 pada skala Richter, memiliki potensi lebih besar untuk menyebabkan tsunami.

Kedalaman: Gempa yang terjadi pada kedalaman yang dangkal (kurang dari 70 km) lebih mungkin menyebabkan tsunami dibandingkan gempa yang lebih dalam.

Pergerakan Tektonik: Jenis pergerakan lempeng tektonik juga berpengaruh, khususnya gempa yang disebabkan oleh pergerakan vertikal lempeng (subduksi), di mana satu lempeng masuk di bawah lempeng lainnya, lebih cenderung menyebabkan perubahan mendadak pada dasar laut yang dapat memicu gelombang tsunami.

Mekanisme Terjadinya Tsunami

Tsunami terjadi ketika gempa bawah laut menyebabkan perubahan mendadak pada dasar laut, yang menggeser sejumlah besar air. Gelombang yang dihasilkan kemudian menyebar ke segala arah dengan kecepatan tinggi. Ketika gelombang tersebut mendekati pantai, kecepatan menurun dan tinggi gelombang meningkat, menyebabkan air laut bisa mencapai daratan dengan kekuatan yang merusak.

Contoh Gempa Berpotensi Tsunami

Salah satu contoh terkenal adalah gempa bumi dan tsunami di Samudra Hindia pada tahun 2004. Gempa tersebut berkekuatan 9,1–9,3 dan menyebabkan tsunami yang menghancurkan, mempengaruhi banyak negara dan mengakibatkan lebih dari 230.000 korban jiwa.

Peringatan Dini

BMKG dan lembaga sejenis di seluruh dunia memonitor aktivitas seismik dan mengeluarkan peringatan dini jika terdeteksi gempa yang berpotensi tsunami. Peringatan dini ini sangat penting untuk mengurangi risiko dan menyelamatkan nyawa.

Dengan pemahaman ini, masyarakat di daerah rawan tsunami dapat lebih waspada dan mengambil tindakan preventif jika terjadi gempa bumi yang berpotensi memicu tsunami.

Sumber : BMKG

Widget Informasi Gempa Dan Potensi Tsunami

Bagi kamu yang ingin menampilkan widget blog dengan informasi terbaru tentang gempa dan potensi tsunami di Indonesia berdasarkan data BMKG, silakan pilih dari beberapa widget yang tersedia di bawah ini. Jangan khawatir, warna dan bentuk widget dapat disesuaikan agar sesuai dengan tampilan blog kamu.

1. Tampilan Widget Dengan Model Kotak

Widget Blog ini Menampilkan Informasi Gempa dan Potensi Tsunami di Indonesia dalam bentuk kotak, yang berisi informasi lokasi geografis gempa, waktu dan tanggal kejadian, serta keterangan apakah berpotensi tsunami atau tidak serta info lainnya mengenai gempa yang terjadi, berikut contoh tampilannya.

Loading Data Gempa...

Buat yang tertarik memasang widget blog gempa dan potensi tsunami ini, silakan disalin kode widget di bawah ini dan paste-kan/taruh pada kotak widget HTML di template website atau blog kamu.

2. Tampilan Widget Dengan Model List

Widget Blog ini Menampilkan daftar Informasi Gempa diatas 5 skala ritcher yang Potensi Tsunami di Indonesia dalam bentuk list/daftar dengan animasi sliding vertikal. Widget ini berisi informasi lokasi geografis gempa, waktu dan tanggal kejadian, serta keterangan apakah berpotensi tsunami atau tidak serta info lainnya mengenai gempa yang terjadi, berikut contoh tampilannya.

Loading Data Gempa...

Buat yang tertarik memasang widget blog daftar gempa diatas 5 skala ritcher yang potensi tsunami ini, silakan disalin kode widget di bawah ini dan paste-kan/taruh pada kotak widget HTML di template website atau blog kamu.

<center>
<div style="max-width:350px;">
<div id="codeflareDaftarInfoGempa">Loading Data Gempa...</div>
</div>
</center>
<script>
$.getJSON( "https://data.bmkg.go.id/DataMKG/TEWS/gempaterkini.json", function(data) {
var tmpDataList='';
for(var i=0;i<data.Infogempa.gempa.length;i++){
tmpDataList += '<div class="daftarInfoGempa">';
tmpDataList += '<div class="dateInfoGempa">'+data.Infogempa.gempa[i].Tanggal+', '+data.Infogempa.gempa[i].Jam+'</div>';
tmpDataList += '<div class="dataInfoGempa">Besar: '+data.Infogempa.gempa[i].Magnitude+' SR | Dalam: '+data.Infogempa.gempa[i].Kedalaman+'</div>';
const mapData = data.Infogempa.gempa[i].Coordinates.split(",");
tmpDataList += '<div class="locInfoGempa">Lintang: '+data.Infogempa.gempa[i].Lintang+' | Bujur: '+data.Infogempa.gempa[i].Bujur+' <button class="btnOpenMap" onclick="openGMap('+mapData[0]+','+mapData[1]+')"><i class="fa fa-map-marker" aria-hidden="true"></i> View Map</button></div>';
tmpDataList += '<div class="wilInfoGempa">Area: '+data.Infogempa.gempa[i].Wilayah+'</div>';
let pot = data.Infogempa.gempa[i].Potensi.match("tidak");
if(pot=="tidak"){
tmpDataList += '<div class="potInfoGempaRed">Potensi: '+data.Infogempa.gempa[i].Potensi+'</div>';
}else{
tmpDataList += '<div class="potInfoGempa">Potensi: '+data.Infogempa.gempa[i].Potensi+'</div>';
}
tmpDataList += '</div>';
}
$('#codeflareDaftarInfoGempa').html(tmpDataList);
});
function openGMap(x,y){
PopupCenter('https://maps.google.com/maps?q='+x+','+y+'&hl=id&z=0','CodeFlare | Gempa Bumi Terkini',800,600);}
</script>
<style>
.daftarInfoGempa{
width:100%;
box-sizing:border-box;
padding:5px;
border:1px solid #ccc;
border-radius:5px;
margin-bottom:10px;
color:#000;
background: #feffff;
background: -moz-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
background: -webkit-linear-gradient(top, #feffff 0%,#d2ebf9 100%);
background: linear-gradient(to bottom, #feffff 0%,#d2ebf9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d2ebf9',GradientType=0 );
user-select:none;
}
.daftarInfoGempa:nth-child(1){margin-top:10px;}
.daftarInfoGempa:last-child{margin-bottom:0;}
.dateInfoGempa{
font-size:14px;
padding:5px;
background:#7bdb3d;
}
.potInfoGempa{
padding:5px;
background:#313d54;
color:#fff;
font-weight:bold;
}
.potInfoGempaRed{
padding:5px;
background:red;
color:#fff;
font-weight:bold;
}
.btnOpenMap{
padding:2px;
font-size:12px;
}
</style>

Modifikasi Widget Animasi Sliding Top to Bottom

Widget ini dapat ditingkatkan dengan menambahkan slider jQuery sederhana yang menampilkan animasi sliding dari atas ke bawah. Dengan menggunakan jQuery, kamu dapat dengan mudah mengimplementasikan efek transisi yang halus, memberikan pengalaman visual yang lebih menarik bagi pengguna. Animasi ini tidak hanya memperindah tampilan, tetapi juga membuat konten lebih dinamis dan interaktif. Untuk mengatur slider ini, kamu bisa memanfaatkan metode jQuery seperti .slideDown() dan .slideUp(), yang memungkinkan elemen untuk bergerak vertikal dengan mulus. Penerapan animasi sliding dari atas ke bawah ini sangat ideal untuk menyajikan informasi secara bertahap, menambah estetika serta fungsionalitas pada widget ini.

Loading Data Gempa...

Buat yang tertarik memasang widget blog daftar gempa diatas 5 skala ritcher yang potensi tsunami ini dengan animasi slider jQuery, silakan disalin kode widget di bawah ini dan paste-kan/taruh pada kotak widget HTML di template website atau blog kamu. Jangan lupa untuk menggunakan library jQuery terlebih dahulu pada template website atau blog kamu.

<center>
<div style="max-width:350px;">
<div id="codeflareDaftarInfoGempa">Loading Data Gempa...</div>
</div>
</center>
<script>
var dataShow=3; //Show Data Number
var dataTime=10; //Timer to Replace Data in Second
$.getJSON( "https://data.bmkg.go.id/DataMKG/TEWS/gempaterkini.json", function(data) {
var tmpDataList='';
for(var i=0;i<data.Infogempa.gempa.length;i++){
tmpDataList += '<div class="daftarInfoGempa">';
tmpDataList += '<div class="dateInfoGempa">'+data.Infogempa.gempa[i].Tanggal+', '+data.Infogempa.gempa[i].Jam+'</div>';
tmpDataList += '<div class="dataInfoGempa">Besar: '+data.Infogempa.gempa[i].Magnitude+' SR | Dalam: '+data.Infogempa.gempa[i].Kedalaman+'</div>';
const mapData = data.Infogempa.gempa[i].Coordinates.split(",");
tmpDataList += '<div class="locInfoGempa">Lintang: '+data.Infogempa.gempa[i].Lintang+' | Bujur: '+data.Infogempa.gempa[i].Bujur+' <button class="btnOpenMap" onclick="openGMap('+mapData[0]+','+mapData[1]+')"><i class="fa fa-map-marker" aria-hidden="true"></i> View Map</button></div>';
tmpDataList += '<div class="wilInfoGempa">Area: '+data.Infogempa.gempa[i].Wilayah+'</div>';
let pot = data.Infogempa.gempa[i].Potensi.match("tidak");
if(pot=="tidak"){
tmpDataList += '<div class="potInfoGempaRed">Potensi: '+data.Infogempa.gempa[i].Potensi+'</div>';
}else{
tmpDataList += '<div class="potInfoGempa">Potensi: '+data.Infogempa.gempa[i].Potensi+'</div>';
}
tmpDataList += '</div>';
}
$('#codeflareDaftarInfoGempa').html(tmpDataList);
});
function openGMap(x,y){
PopupCenter('https://maps.google.com/maps?q='+x+','+y+'&hl=id&z=0','CodeFlare | Gempa Bumi Terkini',800,600);}
var tickDataLength='';
var tickDataTime=dataTime*1000;
function startTickData(){
var b=$('.daftarInfoGempa');
b.eq(0).hide( "slow", function () {
$(this).appendTo($('#codeflareDaftarInfoGempa'));
b.eq(dataShow).show("slow");});}
setInterval(function(){startTickData()}, tickDataTime);
function tickerData(){
tickDataLength=$('.daftarInfoGempa').length;
if(tickDataLength>dataShow){
for(var i=dataShow;i<tickDataLength;i++){$('.daftarInfoGempa').eq(i).css('display','none');}
}startTickData();}
$(document).ready(function(){tickerData();});
</script>
<style>
.daftarInfoGempa{
width:100%;
box-sizing:border-box;
padding:5px;
border:1px solid #ccc;
border-radius:5px;
margin-bottom:10px;
color:#000;
background: #feffff;
background: -moz-linear-gradient(top, #feffff 0%, #d2ebf9 100%);
background: -webkit-linear-gradient(top, #feffff 0%,#d2ebf9 100%);
background: linear-gradient(to bottom, #feffff 0%,#d2ebf9 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#feffff', endColorstr='#d2ebf9',GradientType=0 );
user-select:none;
}
.daftarInfoGempa:nth-child(1){margin-top:10px;}
.daftarInfoGempa:last-child{margin-bottom:0;}
.dateInfoGempa{
font-size:14px;
padding:5px;
background:#7bdb3d;
}
.potInfoGempa{
padding:5px;
background:#313d54;
color:#fff;
font-weight:bold;
}
.potInfoGempaRed{
padding:5px;
background:red;
color:#fff;
font-weight:bold;
}
.btnOpenMap{
padding:2px;
font-size:12px;
}
</style>

3. Tampilan Widget Dengan Model Headline Ticker

Widget ini menampilkan model Headline Ticker, sebuah fitur yang memungkinkan informasi atau berita terbaru untuk ditampilkan secara bergulir. Dengan tampilan yang dinamis dan menarik, Headline Ticker pada widget ini mampu menarik perhatian pengguna secara efektif, memastikan bahwa mereka tidak melewatkan update penting. Model ini sangat cocok untuk situs berita, blog, atau platform yang sering memperbarui konten, memberikan pengalaman yang lebih interaktif dan modern. Penggunaan animasi yang halus pada ticker juga menambah estetika keseluruhan dari widget, membuatnya tidak hanya fungsional tetapi juga enak dipandang.

Buat yang tertarik memasang widget blog daftar gempa diatas 5 skala ritcher yang potensi tsunami ini dengan model headline ticker, silakan disalin kode widget di bawah ini dan paste-kan/taruh pada kotak widget HTML di template website atau blog kamu. Jangan lupa untuk menggunakan library jQuery terlebih dahulu pada template website atau blog kamu.

<center>
<div class="scroller" data-speed="slow">
<ul id="codeflareInfoGempaHeadlineTicker" class="tag-list scroller__inner"></ul>
</div>
</center>

<script>
$.getJSON( "https://data.bmkg.go.id/DataMKG/TEWS/gempaterkini.json", function(data) {
var tmpDataList='';
for(var i=0;i<data.Infogempa.gempa.length;i++){
tmpDataList += '<li class="dataInfoGempaHeadTick" onmouseover="openDataHeadTick(\''+i+'\')" onmouseout="closeDataHeadTick(\''+i+'\')">';
tmpDataList += '<span style="padding:0 5px;background:#0083da;color:#fff;">'+data.Infogempa.gempa[i].Magnitude+' S-R</span>';
if(i % 2 == 0){
tmpDataList += '<span style="padding:5px;background:#c2ed45;color:#000;border-radius:5px;">'+data.Infogempa.gempa[i].Wilayah+'</span>';}
else{tmpDataList += '<span style="padding:5px;background:#0a333a;color:#fff;border-radius:5px;">'+data.Infogempa.gempa[i].Wilayah+'</span>';}
let pot = data.Infogempa.gempa[i].Potensi.match("tidak");
if(pot=="tidak"){tmpDataList += '<span style="padding:0 5px;background:red;color:#fff;">⚠️BAHAYA</span>';}
else{tmpDataList += '<span style="padding:0 5px;background:green;color:#fff;">✅AMAN</span>';}
tmpDataList += '<div id="detailGempaHeadTick'+i+'" style="display:none;padding:5px;background:#35605d;border-radius:5px;margin-top:5px;text-align:left;">';
const mapData = data.Infogempa.gempa[i].Coordinates.split(",");
tmpDataList +='<iframe frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?q='+mapData[0]+','+mapData[1]+'&hl=id&z=10&output=embed" style="width:100%;border-radius:5px;"></iframe>';
tmpDataList += '<div style="padding:5px;background:#333;color:#fff;border-radius:4px;">��'+data.Infogempa.gempa[i].Tanggal+', '+data.Infogempa.gempa[i].Jam+'<br>';
tmpDataList += '��Kedalaman Gempa: '+data.Infogempa.gempa[i].Kedalaman+'<br>';
tmpDataList += '��Potensi Tsunami: '+data.Infogempa.gempa[i].Potensi;
tmpDataList += '</div></div>';
tmpDataList += '</li>';}
$('#codeflareInfoGempaHeadlineTicker').html(tmpDataList);});

function openDataHeadTick(x){$('.dataInfoGempaHeadTick').eq(x).find('#detailGempaHeadTick'+x).show();}
function closeDataHeadTick(x){$('.dataInfoGempaHeadTick').eq(x).find('#detailGempaHeadTick'+x).hide();}
function openGMap(x,y){
PopupCenter('https://maps.google.com/maps?q='+x+','+y+'&hl=id&z=0','CodeFlare | Gempa Bumi Terkini',800,600);}
var tickDataLength='';
var tickDataTime=dataTime*1000;
function startTickData(){
var b=$('.daftarInfoGempa');
b.eq(0).hide( "slow", function () {
$(this).appendTo($('#codeflareDaftarInfoGempa'));
b.eq(dataShow).show("slow");});}
setInterval(function(){startTickData()}, tickDataTime);
function tickerData(){
tickDataLength=$('.daftarInfoGempa').length;
if(tickDataLength>dataShow){
for(var i=dataShow;i<tickDataLength;i++){$('.daftarInfoGempa').eq(i).css('display','none');}
}startTickData();}
$(document).ready(function(){tickerData();});
</script>
<script>
const scrollers = document.querySelectorAll(".scroller");
// If a user hasn't opted in for recuded motion, then we add the animation
if (!window.matchMedia("(prefers-reduced-motion: reduce)").matches) {
addAnimation();
}
function addAnimation(){
scrollers.forEach((scroller) => {
// add data-animated="true" to every `.scroller` on the page
scroller.setAttribute("data-animated", true);
// Make an array from the elements within `.scroller-inner`
const scrollerInner = scroller.querySelector(".scroller__inner");
const scrollerContent = Array.from(scrollerInner.children);
// For each item in the array, clone it
// add aria-hidden to it
// add it into the `.scroller-inner`
scrollerContent.forEach((item) => {
const duplicatedItem = item.cloneNode(true);
duplicatedItem.setAttribute("aria-hidden", true);
scrollerInner.appendChild(duplicatedItem);
});});}
</script>

<style>
#codeflareInfoGempaHeadlineTicker{margin:0;}
#codeflareInfoGempaHeadlineTicker > li::before{all:unset;content:none;}
.scroller {
max-width: 100%;
box-sizing:border-box;
}
.scroller__inner {
padding-block: 5px;
display: flex;
flex-wrap: wrap;
gap: 1rem;
}
.scroller[data-animated="true"] {
overflow: hidden;
-webkit-mask: linear-gradient(
90deg,
transparent,
white 20%,
white 80%,
transparent
);
mask: linear-gradient(90deg, transparent, white 20%, white 80%, transparent);
}
.scroller[data-animated="true"] .scroller__inner {
width: max-content;
flex-wrap: nowrap;
animation: scroll var(--_animation-duration, 40s)
var(--_animation-direction, forwards) linear infinite;
}
.scroller[data-direction="right"] {
--_animation-direction: reverse;
}
.scroller[data-direction="left"] {
--_animation-direction: forwards;
}
.scroller[data-speed="fast"] {
--_animation-duration: 20s;
}
.scroller[data-speed="slow"] {
--_animation-duration: 160s;
}
.scroller[data-animated="true"] .scroller__inner:hover{animation-play-state:paused;cursor:pointer;}
@keyframes scroll {
to {
transform: translate(calc(-50% - 0.5rem));
}}
</style>

Dengan segala keunggulan ini, Headline Ticker pada widget ini menjadi solusi ideal untuk meningkatkan keterlibatan pengguna dan menyampaikan informasi secara efisien. Fitur ini tidak hanya menawarkan fungsionalitas yang tinggi tetapi juga estetika yang menawan, memastikan bahwa setiap pembaruan penting dapat disampaikan dengan cara yang menarik dan modern. Oleh karena itu, penggunaan Headline Ticker ini sangat disarankan bagi setiap platform yang ingin tetap relevan dan menarik di mata penggunanya.

Demikian artikel blog tentang Widget Blog Menampilkan Informasi Gempa Dan Potensi Tsunami di Indonesia Berdasarkan Data BMKG Terbaru terima kasih sudah berkunjung, jangan lupa Like, Share dan Subscribe, untuk pertanyaan, kritik ataupun saran silakan ditulis pada kotak komentar di bawah. Apabila ada kata-kata yang kurang berkenan atau informasi yang kurang akurat, harap dimaklumi. Akhir kata Semoga Bermanfaat.

Keyword

"Widget Blog", "Informasi Gempa", "Potensi Tsunami", "Indonesia", "Data BMKG", "Gempa Terbaru", "Tsunami Terbaru", "Informasi BMKG", "Widget Informasi", dan "Data Gempa Indonesia"

Incoming Search Terms

Widget blog yang menampilkan informasi gempa dan potensi tsunami di Indonesia berdasarkan data BMKG terbaru merupakan alat yang sangat berguna bagi masyarakat untuk mendapatkan informasi terkini dan akurat. Dengan adanya widget ini, pengguna dapat dengan mudah memantau situasi gempa dan tsunami, serta mengambil tindakan pencegahan yang diperlukan.