Materi
Roadmap
Proyek
Sertifikat
Skillance Code Lab
Jalankan »
Skillance Code Lab Editor
Editor
Hasil
Split
Editor Kode Sumber
Tekan
Ctrl + Enter
untuk Menjalankan
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script> <style> body { font-family: sans-serif; padding: 20px; background: #f8fafc; } #kotakKonten { border: 2px dashed #94a3b8; padding: 20px; border-radius: 8px; background: white; margin-top: 15px; } button { background: #0d2e5c; color: white; border: none; padding: 10px 18px; border-radius: 6px; cursor: pointer; } </style> </head> <body> <h3>Memuat Fragmen Konten Eksternal</h3> <button id="btnLoadKonten">Muat Bagian Berita (.load)</button> <div id="kotakKonten">Konten awal belum dimuat...</div> <script> $(document).ready(function() { $('#btnLoadKonten').click(function() { // Di server nyata: $('#kotakKonten').load('berita.html #headline'); $('#kotakKonten').html('<p style="color:#fca311;">Memuat fragmen berita...</p>'); setTimeout(function() { $('#kotakKonten').html(` <h4 style="color:#00758f; margin-top:0;">🚀 Pengumuman Beasiswa Skillance 2026</h4> <p style="margin-bottom:0; color:#334155;">Pendaftaran jalur sertifikasi web developer resmi dibuka untuk mahasiswa dan umum!</p> `); }, 400); }); }); </script> </body> </html>
Hasil Tampilan (Browser Preview)
Muat Ulang