الرَّاحِمُونَ يَرْحَمُهُمُ الرَّحْمَٰنُ، ارْحَمُوا مَنْ فِي الْأَرْضِ يَرْحَمْكُمْ مَنْ فِي السَّمَاءِ
Artinya:“Orang-orang yang penyayang akan disayangi oleh Ar-Rahman (Allah Yang Maha Pengasih). Sayangilah yang ada di bumi, niscaya Yang di langit akan menyayangi kalian.”→(HR. At-Tirmidzi)
TerapanWeb Interaktif: HTML + CSS + JavaScript
- Html untuk menghilangkan scroll halaman dan Script MathJax
- Backround pembuka web
- Container full screen pada seluler
- Tab judul blog
- Container full screen di seluler dengan backround gambar
- Emoji & Gambar berputar
- Link Internet & Jam digital
- CSS untuk modifikasi tulisan ol Li
- ScreeShot ukuran Besar
- Cek warna dan Opacity
- Data warna digital
- Pengaturan gambar
- Pengaturan Vidio
- Teks dengan Efek mengetik
- Audio player Mp3
- Tombol Audio Mp3
- Channel Vidio
- Catatan tersembunyi
- Tombol ikon
- Container
- Backround Gambar
- Gambar dan kontainer berkedip pada satu posisi
- Jam digital
- Menulis 2 kolom di dekstop menjadi satu kolom diseluler
- Note
- Catatan
- Audio visual Channel
- Pannel Audio Mp3 upload
- galery photo
Html untuk menghilangka scroll halaman
Tempatkan di Opsi pengaturan menu CSS
html, body {width: 100vw; height: 100vh;
overflow-y: scroll; /* Scroll tetap ada, tapi tidak terlihat */
scrollbar-width: none; /* Menghilangkan scroll bar di Firefox */}
::-webkit-scrollbar {display: none; /* Menghilangkan scroll bar di Chrome & Safari */}
Script MathJax ke Template atau Posting
Tambahkan Script Konfigurasi & Loader MathJax
Letakkan di dalam tag <head> pada template blog atau di bagian atas HTML halaman:
<!--Script MathJax-->
<script type="text/javascript">
//<![CDATA[ window.MathJax = { tex: { inlineMath: [['$', '$'], ['\\(', '\\)']] },
svg: { fontCache: 'global' } }; //]]></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-svg.js"></script>
Kosong
CSS penhilang tombol beranda bawaan template
<style>
.blog-pager,
#blog-pager,
.blog-pager-older-link,
.blog-pager-newer-link,
#blog-pager-newer-link,
#blog-pager-older-link,
.pager,
#pager {
display: none !important;
visibility: hidden !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important; }
</style>
Backround pembuka web
<!--Backgound pembuka web-->
<div id="splash-screen-nona">
<div class="splash-content-nona">
<div class="welcome-text-nona" style="font-size: 200px !important; font-weight: bold; color: darkgreen;">Majiu Kincai</div>
<img alt="Servis elektronik Jambi" class="splash-image-nona" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjdtcRQDSXkE1g4TntKJDaTTsoIOHOup_gKOWtf9sRfyX60kwsDxSyn76vaZgPveJBUH_W2ZhoAiJiochWs98lDxlpOa7UADTInLi6aynf0Hj0I-mqI3fgdmkrLnPQdXxBYOToSCUmjbBkjSqN-e-IigV66HPkAVFeivtuURGoQUN58RyC5mZ9N8nNkNPeG/s320/cinto.png" /></div></div>
<style>
body, html {margin: 0 !important;
padding: 0 !important;}
#splash-screen-nona {position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background-color: #ffffff;
display: flex !important;
justify-content: center !important;
align-items: center !important;
z-index: 99999 !important;
opacity: 1;
transition: opacity 1s ease-out;
pointer-events: none;}
.splash-content-nona {width: 100% !important;
height: 100% !important;
position: relative !important;}
.splash-image-nona {width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 0px !important;
padding: 0px !important;}
.welcome-text-nona {position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
color: white!important; font-family: arial rounded !important;
font-size: 150px !important;
font-weight: bold !important;
text-shadow: 2px 2px 4px rgba(0,0,0,0.7) !important;
white-space: nowrap !important;}
#splash-screen-nona.fade-out-nona {opacity: 0;}</style>
<script>window.addEventListener('DOMContentLoaded', function() {const splashScreen = document.getElementById('splash-screen-nona');
document.body.style.overflow = 'hidden';
if (splashScreen) {const displayDuration = 2000;
setTimeout(function() {splashScreen.style.opacity = '0';
setTimeout(function() {splashScreen.style.display = 'none'
splashScreen.remove();
document.body.style.overflow = '';
console.log('Nona: Splash screen removed and scrollbar restored.');}, 1000);}, displayDuration);} else {console.warn('Nona: Splash screen element not found.');
document.body.style.overflow = '';}});</script>
Container fullwidth pada seluler
<div class="fullwidth">
<div class="konten-center konten-scroll">isi konten disini</div></div>
<style>html, body {margin: 0; padding: 0;
box-sizing: border-box;}
.fullwidth{float: left; /*float atau tampa float letakkan disini */
background: linear-gradient(silver, silver, white);/*pengaturan background*/
border: 0px solid silver; /*pengaturan border*/border-radius: 5px; width: 100%;
padding: 0px;}/*pengaturan padding */
/* Mobile: full lebar layar */
@media (max-width: 1000px)
{.fullwidth{width: 95vw; /*pengaturan Width di seluler */
position: relative;
left: 50%;
margin-left: -50vw;}}
/* Desktop: batasi agar tidak masuk sidebar */
@media (min-width: 1025px)
{.fullwidth {width: 50%; /*pengaturan Width di seluler */
margin-left: 0px ;/*posisi kontaine sebelah kiri */
max-width: 800px; }}/* sesuaikan dengan lebar area konten */
.konten-center {color: white; padding:0px;
box-sizing: border-box;}
/* Tambahan: height, overflow, padding */
.konten-scroll {height: 400px; overflow: auto; }</style> </style>☀
Tab judul Blogger
<div id="tab-musafir">
<div class="tab-left">
<img class="gambar-putar" src="https://blogger.googleusercontent.com/img/a/AVvXsEgwNOZkCfeizXvB1f-iAmL7sQffGnbY_27UOZxGKWJ-T9OqxV3am-bWIWeMub53RFizGaoYlGfkB9gaPFrPIwkDCzrHSyXqjdH7W39yeWwlpn6O14AMjw5PRZY6WLCZ17IbFrVUAqYTTcATXrqM4fiPmvfdt5VHLWTphBkqZxDn5Hh489FM9i0dfXMzOAo" style="border-radius:50%; border:2px solid white;" />
<i><span class="judul">ALGORITMA</span></i>
<a href="#beranda">Beranda</a>
<a href="/p/tentang.html">Tentang</a>
<a href="/p/kontak.html">Kontak</a>
<a href="/p/arsip.html">Arsip</a>
</div>
<div id="tanggalJam">Memuat...</div></div>
<style>
#tab-musafir {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 9999;
background-color: #00CED1;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px 15px;
box-sizing: border-box;
transition: top 0.4s ease; /* smooth */
}
.tab-left {
display: flex;
align-items: center;
gap: 15px;
}
#tab-musafir img {
height: 40px;
width: 40px;
}
.judul {
font-family: Arial Rounded ;
font-size: 35px;
color: white;
font-weight: bold;
}
#tab-musafir a {
font-family: Arial Rounded ;
font-size: 18px;
color: white;
text-decoration: none;
}
#tab-musafir a:hover {
text-decoration: underline;
}
#tanggalJam {
font-family: Arial Rounded ;
font-size: 18px;
color: white;
white-space: nowrap;
}
</style>
<script>
let lastScrollTop = 0;
const tabMusafir = document.getElementById("tab-musafir");
window.addEventListener("scroll", function () {
let scrollTop = window.pageYOffset || document.documentElement.scrollTop;
if (scrollTop > lastScrollTop) {
tabMusafir.style.top = "-70px"; // sembunyi
} else {
tabMusafir.style.top = "0"; // tampil
}
lastScrollTop = scrollTop <= 0 ? 0 : scrollTop;
});
function updateTanggalJam() {
const el = document.getElementById("tanggalJam");
const hari = ["Minggu","Senin","Selasa","Rabu","Kamis","Jumat","Sabtu"];
const bulan = ["Januari","Februari","Maret","April","Mei","Juni","Juli","Agustus","September","Oktober","November","Desember"];
const now = new Date();
const teks = `${hari[now.getDay()]}, ${String(now.getDate()).padStart(2,'0')} ${bulan[now.getMonth()]} ${now.getFullYear()} ${String(now.getHours()).padStart(2,'0')}:${String(now.getMinutes()).padStart(2,'0')}:${String(now.getSeconds()).padStart(2,'0')}`;
el.textContent = teks;
}
setInterval(updateTanggalJam, 1000);
updateTanggalJam();
</script>
<style> .banner { position: fixed; top: 0; /* jarak dari atas */
left: 0; /* jarak dari kiri */ width: 100%; /* lebar penuh */
background: transparent; padding: 10px; text-align: center; }
body { height: 10000px; /* biar bisa scroll */ } </style>
<!--➖➖Kontainer Fullwidth fullScreen➖➖-->
<style>html, body {margin: 0; padding: 0;
box-sizing: border-box;}
.fullwidth{ /*float atau tampa float */
background: linear-gradient(silver, silver, white); /*background kontainer */
border: 0px solid silver; border-radius: 5px; width: 100%;
border: 0px dashed gray; /*pengaturan border */
padding: 0px;} /*pengaturan padding disni */
/* Mobile: full lebar layar */
@media (max-width: 1000px)
{.fullwidth{width: 100vw; /*pengaturan Width di seluler */
position: relative;
left: 50%;
margin-left: -50vw;}}
/* Desktop: batasi agar tidak masuk sidebar */
@media (min-width: 1025px)
{.fullwidth{width: 50%; /*pengaturan Width di dekstob */
margin-right: 0px ;/*posisi kontaine sebelah kiri */
max-width: 800px; }}/* sesuaikan dengan lebar area konten */
.konten-center {color: white; padding:0px;
box-sizing: border-box;}
/* Tambahan: height, overflow, padding */
.konten-scroll {height: 400px; overflow: auto;}</style>
<!--➖➖Gambar full width diseluler 100% di dekstop➖➖-->
<style>html, body {margin: 0;
padding: 0; }
.hero {position: relative;
text-align: center; }
/* Gambar responsif */
.hero img {width: 100%;
height: auto; /* Tinggi otomatis, tidak terpotong */
padding: 0px;
display: block; }
/* Konten di atas gambar */
.hero-content {position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
background-color: rgba(0,0,0,0.4);
padding: 15px;
border-radius: 8px; }
/* Full width di seluler */
@media (max-width: 1024px)
{.hero {width: 100vw;
position: relative;
left: 50%;
margin-left: -50vw; }}
/* Normal di desktop */
@media (min-width: 1025px) {.hero
{max-width: 800px;
margin: 0 auto; }}</style>
Emoji Berputar
<div class="emoji-berputar">🔄</div>
<!--➖➖Script Emoji Berputar➖➖-->
<style>.emoji-berputar {display: inline-block;
font-size: 50px; animation: muter 2s linear infinite;}
@keyframes muter {from{transform: rotate(0deg); }
to {transform: rotate(360deg); }}</style>
Emoji Berkedip
<span class="blink-emoji">⛔</span>
<!--➖➖Script Emoji Berkedip➖➖-->
<style> .blink-emoji { animation: blink 1s infinite; }
@keyframes blink {0%, 100% { opacity: 1; }
50% { opacity: 0; }} </style>
Gambar Berputar
<img alt="servis TV Jambi"class="gambar-putar" src="Url Gambar"style="float: left; border-radius: 50%"/></div>
<!--➖➖Script Gambar Berputar➖➖-->
<style>.gambar-putar {width: 200px; height: 200px;
object-fit: cover; animation: mutarTerus 2s linear infinite;}
@keyframes mutarTerus {0% {transform: rotate(0deg);}
100% {transform: rotate(360deg); }}</style>
Tulisan berkedip dua warna
<span class="dua-warna" style="font-family: Righteous; font-size: 100px; line-height: 1;">
Fitur web<p></p>
<span style="font-family: rubik; font-size: 60px; line-height: 1;">
Interaktif dan Multimedia</span></span><p></p>
<span class="dua-warna">
Itu cuma contoh supaya bisa uji<p></p>
efek scroll, tapi kalau dipasang<p></p>
di template asli, halaman kosong pun jadi panjang banget 😆</span>
<style>.dua-warna {animation: gantiWarna 1s infinite alternate; }
@keyframes gantiWarna { 0% { color: white;
text-shadow: 2px 2px 10px #005555; }
100% {color: orange; text-shadow: 2px 2px 10px none; }}</style>
Kosong
CSS untuk modifikasi tulisan ol Li
<div class="daftar-isi"><p>
<p class="daftar-isi-judul">Daftar Isi:</p>
<ol>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan1')">Pengantar Teknologi Informatika</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan2')">Komponen Sistem Komputer</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan3')">Sistem Operasi dan Fungsinya</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan4')">Jaringan Komputer & Internet</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan5')">Dasar-Dasar Basis Data</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan6')">Pengantar Pemrograman</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan7')">Dasar Pengembangan Web</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan8')">Kecerdasan Buatan (Artificial Intelligence)</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan9')">Keamanan Siber dan Etika Digital</a></li>
<li><a href="javascript:void(0);" onclick="bukaTutup('pesan10')">Tren Teknologi Masa Depan</a></li></ol></p></div>
<style>
/* CSS untuk mengatur gaya seluruh daftar */
.daftar-isi {font-family: Arial; font-size: 15px; line-height: 1.0; }/* Jarak antar baris */
.daftar-isi ol, .daftar-isi li {color: black; }/* Mengubah warna ANGKA di daftar menjadi putih */
.daftar-isi a {color: black; /* Warna tulisan link */
text-decoration: none; }/* Menghapus garis bawah pada link */
/* Mengubah warna link saat di-hover (opsional) */
.daftar-isi a:hover {text-decoration: underline; color: red; }
.daftar-isi-judul {color: red; font-family: 'Righteous', sans-serif;font-size: x-large; }</style>
ScreeShot ukuran Besar
<div id="kontainerGambar">
<h2>Judul Konten</h2>
<p class="konten">Ini adalah isi dari kontainer yang akan dijadikan screenshot.</p>
<img src="https://placekitten.com/300/200" alt="Kucing lucu" style="max-width:100%; margin-top:10px;"></div>
<button id="screenshotBtn">Ambil Screenshot</button>
<div id="screenshotHasil"></div><!-- html2canvas CDN -->
<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<title>Screenshot Kontainer</title>
<style>
body {
font-family: sans-serif;
background: #f2f2f2;
padding: 40px;
text-align: center;
}
#kontainerGambar {
width: 500px;
margin: 0 auto 20px auto;
padding: 20px;
border: 2px dashed #555;
background: white;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.konten {
font-size: 18px;
color: #333;
}
#screenshotBtn {
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 6px;
background-color: #2196f3;
color: white;
cursor: pointer;
}
#screenshotHasil {
margin-top: 20px;
}
canvas {
max-width: 100%;
border: 1px solid #ccc;
}
</style>
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/html2canvas@1.4.1/dist/html2canvas.min.js"></script>
<script>
document.getElementById('screenshotBtn').addEventListener('click', function() {
const target = document.getElementById('kontainerGambar');
html2canvas(target, {
scale: 2, // Bisa diubah untuk resolusi tinggi
useCORS: true
}).then(canvas => {
// Kosongkan sebelumnya
const hasil = document.getElementById('screenshotHasil');
hasil.innerHTML = '';
hasil.appendChild(canvas);
});
});
</script>
</body>
</html>
☀ Warna & Opacity Dinamis
🔖 Kode HTML Siap Pakai:
Sistem
Nama Warna
Preview
Kode HEX
RGB
Red
#FF0000
RGB
Green
#00FF00
RGB
Blue
#0000FF
RYB
Red
#FF0000
RYB
Yellow
#FFFF00
RYB
Blue
#0000FF
CMYK
Cyan
#00FFFF
CMYK
Magenta
#FF00FF
CMYK
Yellow
#FFFF00
CMYK
Black
#000000
Data warna digital lengkap
| Warna | Nama | Kode Hex | RGB |
|---|---|---|---|
| . | Alice Blue | #F0F8FF | RGB (240, 248, 255) |
| . | Antique White | #FAEBD7 | RGB (250, 235, 215) |
| . | Aqua | #00FFFF | RGB (0, 255, 255) |
| . | Aquamarine | #7FFFD4 | RGB (127, 255, 212) |
| . | Azure | #F0FFFF | RGB (240, 255, 255) |
| . | Beige | #F5F5DC | RGB (245, 245, 220) |
| . | Bisque | #FFE4C4 | RGB (255, 228, 196) |
| . | Black | #000000 | RGB (0, 0, 0) |
| . | Blanched Almond | #FFEBCD | RGB (255, 235, 205) |
| . | Blue | #0000FF | RGB (0, 0, 255) |
| . | Blue Violet | #8A2BE2 | RGB (138, 43, 226) |
| . | Brown | #A52A2A | RGB (165, 42, 42) |
| . | Burly Wood | #DEB887 | RGB (222, 184, 135) |
| . | Cadet Blue | #5F9EA0 | RGB (95, 158, 160) |
| . | Chartreuse | #7FFF00 | RGB (127, 255, 0) |
| . | Chocolate | #D2691E | RGB (210, 105, 30) |
| . | Coral | #FF7F50 | RGB (255, 127, 80) |
| . | Cornflower Blue | #6495ED | RGB (100, 149, 237) |
| . | Cornsilk | #FFF8DC | RGB (255, 248, 220) |
| . | Crimson | #DC143C | RGB (220, 20, 60) |
| . | Cyan | #00FFFF | RGB (0, 255, 255) |
| . | Dark Blue | #00008B | RGB (0, 0, 139) |
| . | Dark Cyan | #008B8B | RGB (0, 139, 139) |
| . | Dark GoldenRod | #B8860B | RGB (184, 134, 11) |
| . | Dark Gray | #A9A9A9 | RGB (169, 169, 169) |
| . | Dark Green | #006400 | RGB (0, 100, 0) |
| . | Dark Khaki | #BDB76B | RGB (189, 183, 107) |
| . | Dark Magenta | #8B008B | RGB (139, 0, 139) |
| . | Dark Olive Green | #556B2F | RGB (85, 107, 47) |
| . | Dark Orange | #FF8C00 | RGB (255, 140, 0) |
| . | Dark Orchid | #9932CC | RGB (153, 50, 204) |
| . | Dark Red | #8B0000 | RGB (139, 0, 0) |
| . | Dark Salmon | #E9967A | RGB (233, 150, 122) |
| . | Dark Sea Green | #8FBC8F | RGB (143, 188, 143) |
| . | Dark Slate Blue | #483D8B | RGB (72, 61, 139) |
| . | Dark Slate Gray | #2F4F4F | RGB (47, 79, 79) |
| . | Dark Turquoise | #00CED1 | RGB (0, 206, 209) |
| . | Dark Violet | #9400D3 | RGB (148, 0, 211) |
| . | Deep Pink | #FF1493 | RGB (255, 20, 147) |
| . | Deep Sky Blue | #00BFFF | RGB (0, 191, 255) |
| . | Dim Gray | #696969 | RGB (105, 105, 105) |
| . | Dodger Blue | #1E90FF | RGB (30, 144, 255) |
| . | Fire Brick | #B22222 | RGB (178, 34, 34) |
| . | Floral White | #FFFAF0 | RGB (255, 250, 240) |
| . | Forest Green | #228B22 | RGB (34, 139, 34) |
| . | Fuchsia | #FF00FF | RGB (255, 0, 255) |
| . | Gainsboro | #DCDCDC | RGB (220, 220, 220) |
| . | Ghost White | #F8F8FF | RGB (248, 248, 255) |
| . | Gold | #FFD700 | RGB (255, 215, 0) |
| . | Golden Rod | #DAA520 | RGB (218, 165, 32) |
| . | Gray | #808080 | RGB (128, 128, 128) |
| . | Green | #008000 | RGB (0, 128, 0) |
| . | Green Yellow | #ADFF2F | RGB (173, 255, 47) |
| . | Honey Dew | #F0FFF0 | RGB (240, 255, 240) |
| . | Hot Pink | #FF69B4 | RGB (255, 105, 180) |
| . | Indian Red | #CD5C5C | RGB (205, 92, 92) |
| . | Indigo | #4B0082 | RGB (75, 0, 130) |
| . | Ivory | #FFFFF0 | RGB (255, 255, 240) |
| . | Khaki | #F0E68C | RGB (240, 230, 140) |
| . | Lavender | #E6E6FA | RGB (230, 230, 250) |
| . | Lavender Blush | #FFF0F5 | RGB (255, 240, 245) |
| . | Lawn Green | #7CFC00 | RGB (124, 252, 0) |
| . | Lemon Chiffon | #FFFACD | RGB (255, 250, 205) |
| . | Light Blue | #ADD8E6 | RGB (173, 216, 230) |
| . | Light Coral | #F08080 | RGB (240, 128, 128) |
| . | Light Cyan | #E0FFFF | RGB (224, 255, 255) |
| . | Light GoldenRod Yellow | #FAFAD2 | RGB (250, 250, 210) |
| . | Light Gray | #D3D3D3 | RGB (211, 211, 211) |
| . | Light Green | #90EE90 | RGB (144, 238, 144) |
| . | Light Pink | #FFB6C1 | RGB (255, 182, 193) |
| . | Light Salmon | #FFA07A | RGB (255, 160, 122) |
| . | Light Sea Green | #20B2AA | RGB (32, 178, 170) |
| . | Light Sky Blue | #87CEFA | RGB (135, 206, 250) |
| . | Light Slate Gray | #778899 | RGB (119, 136, 153) |
| . | Light Steel Blue | #B0C4DE | RGB (176, 196, 222) |
| . | Light Yellow | #FFFFE0 | RGB (255, 255, 224) |
| . | Lime | #00FF00 | RGB (0, 255, 0) |
| . | Lime Green | #32CD32 | RGB (50, 205, 50) |
| . | Linen | #FAF0E6 | RGB (250, 240, 230) |
| . | Magenta (Fuchsia) | #FF00FF | RGB (255, 0, 255) |
| . | Maroon | #800000 | RGB (128, 0, 0) |
| . | Medium AquaMarine | #66CDAA | RGB (102, 205, 170) |
| . | Medium Blue | #0000CD | RGB (0, 0, 205) |
| . | Medium Orchid | #BA55D3 | RGB (186, 85, 211) |
| . | Medium Purple | #9370DB | RGB (147, 112, 219) |
| . | Medium Sea Green | #3CB371 | RGB (60, 179, 113) |
| . | Medium Slate Blue | #7B68EE | RGB (123, 104, 238) |
| . | Medium Spring Green | #00FA9A | RGB (0, 250, 154) |
| . | Medium Turquoise | #48D1CC | RGB (72, 209, 204) |
| . | Medium Violet Red | #C71585 | RGB (199, 21, 133) |
| . | Midnight Blue | #191970 | RGB (25, 25, 112) |
| . | Mint Cream | #F5FFFA | RGB (245, 255, 250) |
| . | Misty Rose | #FFE4E1 | RGB (255, 228, 225) |
| . | Moccasin | #FFE4B5 | RGB (255, 228, 181) |
| . | Navajo White | #FFDEAD | RGB (255, 222, 173) |
| . | Navy | #000080 | RGB (0, 0, 128) |
| . | Old Lace | #FDF5E6 | RGB (253, 245, 230) |
| . | Olive | #808000 | RGB (128, 128, 0) |
| . | Olive Drab | #6B8E23 | RGB (107, 142, 35) |
| . | Orange | #FFA500 | RGB (255, 165, 0) |
Gambar Klik zoom
Klik zoom merah putih Gif
<img onclick="this.style.width = this.style.width === '100%' ? '50px' : '100%'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiapRQpEdNc6eWlTbTSAKG0uEbMLTDGQDwkmognISOJ9mA6fnz-hqQiE57ml-Kx0xHZT1B-s8neGYqf1cWD8Af9wLs3dxvSTrfFZ_OaAAv79FpekPByCFSAFSuyUz3-YXO0SCk0U5DG4h9wKo4wyWu6zAbKwRy2YMxDAupIcAj6wbUoqpOpzt1OhCSI08A/s1600/Gif-Bendera-Merah-Putih-Berkibar-ezgif.com-crop.gif"style="cursor: pointer; display: block; margin-right: 0px; padding: 0px; transition: width 0.5s; width: 50px;"/>
Klik zoom merah putih float: left
<img onclick="this.style.width = this.style.width === '100%' ? '30px' : '100%'" src="https://blogger.googleusercontent.com/img/a/AVvXsEgY9IOCPKiJvQ6RyjoxfSa3tnczC0oB2hKQssfFxH2SLhjRVL4wSdiLn34c--ADPhJ8hQDBePYe9bRbqmmjgwVbFscR59ovBws28SlZalVM2popGGQExYUfX06ulk6xhqCecjUrnjNUON49lVI9OqAV-c6Lv8bHVT3bYfJXP21qgbm0Fj3wkl4FJjp6z80" style="border: 2px solid rgb(211, 211, 211); cursor: pointer; display: block; float: left; margin-right: 0px; padding: 0px; transition: width 0.5s; width: 30px;" />menulis disini
<img onclick="this.style.width = this.style.width === '100%' ? '50px' : '100%'" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAwQ9cPl4m8z5ToM92LJ7-rbD7EBqlYjocMXVnUmvG7oQImJUBuaUprmIQEjcqXWgl3OaLPoji1cmmL1OEpzDwPGjAFJJn3wdvWuGKiWRCo9IALsqLuuKEsQgWQBatNe1c4EItdGY0f1nSkBgzj04_FHwbKKoLlTkUn_mzb0FmFtD-azsacRwOgmQVJWo/s600/Screenshot_11-removebg-preview%20%281%29.png"style="cursor: pointer; display: block; margin-right: 0px; padding: 0px; transition: width 0.5s; width: 50px;"
Klik zoom full display
<img onclick="this.style.width = this.style.width === '100vw' ? '100%' : '100vw'" src="https://blogger.googleusercontent.com/img/a/AVvXsEgXop4M44OI_T3vxuz2QQdvdW2H4zpxCAldM1JHo_cifdzAErgWQ3QifRpe7Jg55yHtjxwlqqx_Vs1qt-apyUa2LTzbYWtV9ceOXKDMAWTZcoqJmQ-YjmC6WZExBvgql8U9pnf8IVDkDWXzL8Dyc3un80ON6vNbmr1Ln6Nio_3MEzGIiZnJatN2ZBSci5M" style="cursor: pointer; display: block; margin-right: 0px; padding: 0px; transition: width 0.5s; width: 100%;" />
Gambar tampil 50% di dekstop 100 diseluler
Style1
<style>.responsive-img {float: right; width: 50%; max-width: 100%; height: auto;}
@media (max-width: 768px) {.responsive-img {width: 100%;}}</style>
Style2
<style>.responsive-img {width: 50%; max-width: 100%;
height: auto; margin: 0 0 10px 10px; /* Atas: 0, Kanan: 0, Bawah: 10px, Kiri: 10px */}
@media (max-width: 768px) {.responsive-img {width: 100%; float: none;
margin: 0 auto 10px auto; /* Tengah di layar kecil */}}</style>
Pengaturan Vidio Aspect ratio
<div class="video-Musafir">
<iframe allowfullscreen="0" frameborder="0" height="180" src="https://www.youtube.com/embed/POwevoiF2Ng" width="320"></iframe></div>
<div class="video-Musafir">
<object aria-label="Upload video" class="BLOG_video_class" contentid="6e2f78a594e18039" height="784" id="BLOG_video-6e2f78a594e18039" width="444"></object></div>
<style>.video-Musafir {position: relative;
width: 100%; /* Lebar akan menyesuaikan container induk */
aspect-ratio: 16 / 9; overflow: hidden;}
.video-Musafir iframe {position: absolute; top: 0; left: 0;
width: 100%; height: 100%; }</style>
<!--➖➖Vidio Aspek ratio Dowload komputer➖➖-->
<div class="video-container">
<object aria-label="Upload video" class="BLOG_video_class" contentid="a6cc4b173d2326ae" height="372" id="BLOG_video-a6cc4b173d2326ae" width="208"></object></div>
<style>.video-container {float: right; margin-right: 8px; width: 25%; max-width: 500;
aspect-ratio: 208 / 372; position: relative; overflow: hidden;
border: 0px solid red; border-radius: 5px;}
.video-container iframe {width: 100%; height: 100%; border: none; }</style>
Vidio Float left/right aspect ratio 100%di seluler 50% di Dekstop
<div class="video-container right">
<iframe src="https://www.youtube.com/embed/m10nkRWSUFE" frameborder="0" allowfullscreen></iframe></div>
<!-- Float kiri -->
<div class="video-container left">
<iframe src="https://www.youtube.com/embed/VIDEO_ID" frameborder="0" allowfullscreen></iframe></div>
<style>.video-container {width: 50%;
aspect-ratio: 16 / 9;
border: 4px solid #00CED1;
border-radius: 12px;
overflow: hidden; margin: 10px; }
.video-container iframe {width: 100%;
height: 100%; border: none; }
.video-container.left { float: left; }
.video-container.right { float: right; }
@media screen and (max-width: 768px) {.video-container
float: none !important;
margin: 10px auto; }}</style>
Teks dengan Efek mengetik
Aku menuliskan rinduku perlahan,
Satu huruf, satu napas,
Seperti mengetuk pintu hatimu
Di malam yang tidak selesai...</template>
<!-- TOMBOL -->
<div style="text-align: center; margin-top: 15px;">
<button onclick="ulangKetik()" style="padding: 8px 20px; font-family: monospace;
background: #444; color: white; border: none; border-radius: 6px; cursor: pointer;">🔁 Ketik Ulang</button></div>
<!-- GAYA -->
<style>.mengetik {font-family: 'Courier New', monospace;
font-size: 15px;
background: white;
color: black;
padding: 20px;
border-radius: 12px;
border: 0px solid gray; /* Bisa diubah menjadi 1px bila ingin */
max-width: 100%;
margin: 40px auto;
min-height: 200px;
white-space: pre-line; }
.kursor-ketik {
display: inline-block;
width: 10px;
background: black;
animation: blink 1s step-start infinite;
height: 1em;
margin-left: 2px; }
@keyframes blink {0%, 100% { opacity: 1; }
50% { opacity: 0; }}</style>
<!-- SCRIPT -->
<script>const kontainer = document.getElementById('mesinKetik');
const teksPuisi = document.getElementById('teksAsli').innerHTML.trim();
let i = 0; function ketikPerHuruf() {if (i <= teksPuisi.length) {
kontainer.innerHTML = teksPuisi.substring(0, i) + '<span class="kursor-ketik"></span>';
i++; setTimeout(ketikPerHuruf, 60); } else {
kontainer.innerHTML = teksPuisi;
kontainer.setAttribute("contenteditable", "true"); }}
function ulangKetik() {kontainer.setAttribute("contenteditable", "false");
i = 0; kontainer.innerHTML = ''; ketikPerHuruf(); }
window.onload = ketikPerHuruf;</script>
Audio player Mp3
<div class="audio-panel">
<div class="audio-header">
<img id="logoAudio" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg5JoCi24ShjkqzoBEIATVLOLob3-mF6C4twGBVbNXlJJLMuuIxHIjnhybnUSH5hkzqMfmBL5Z4LgVbxlAwlBmrLfVa9opt57oG10tX0RlfHFotyFr4LmR4AMSdyuM5CNNNYpUKE2Z_BTnmRwhCyAmt04DYs3XB7iRkCnu2T6agy0NkMqSyBw377QvB9Bc/s320/Screenshot_54.jpg" style="float: left; width: 50px; height: 50px; object-fit: cover; border-radius: 50%; margin-right: 10px;" />
<h2 style="display:inline-block; vertical-align: top; margin-top:10px; color: #fff;">Pemutar Lagu Cabin</h2></div>
<audio controls id="laguNona" style="height: 25px; margin-bottom: 10px; width: 100%;">
<source id="sumberAudio" src="" type="audio/mpeg">
Maaf, browser kamu tidak mendukung audio.</audio>
<canvas id="audioVisualizer" width="400" height="20"></canvas>
<div class="control-area">
<input type="file" id="inputAudio" multiple webkitdirectory />
<select id="modePutar" onchange="gantiMode()">
<option value="normal">🔁 Urutan</option>
<option value="acak">🔀 Acak</option>
<option value="ulang">🔂 Ulang</option>
<option value="reverse">🔄 Reverse</option></select>
<button onclick="togglePlaylist()"><span class="blink-emoji">🔵</span> Equalizer + Playlist</button></div>
<div class="equalizer" id="panelGabungan" style="display: none;">
<label style="color:white">Bass</label>
<input type="range" id="bass" min="-30" max="30" value="0">
<label style="color:white">Mid</label>
<input type="range" id="mid" min="-30" max="30" value="0">
<label style="color:white">Treble</label>
<input type="range" id="treble" min="-30" max="30" value="0">
<ol id="daftarLagu"></ol></div></div>
<style>.audio-panel
{background: linear-gradient(to bottom right, #111827, #1f2937);
color: white; padding: 20px;
font-family: 'Segoe UI', sans-serif;
max-width: 400px;
border-radius: 12px;
box-shadow: 0 0 12px rgba(0,0,0,0.4); }
.audio-header img.mutar {animation: mutarTerus 4s linear infinite; }
@keyframes mutarTerus {0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); } }
canvas {width: 100%;
height: 20px;
background: rgba(255, 255, 255, 0.1);
border-radius: 8px;
margin-top: 10px;}
.equalizer input[type=range] {width: 100%;
margin-bottom: 10px; }
.control-area {margin-top: 15px; }
#daftarLagu {
margin-top: 10px;
padding-left: 20px; }
#daftarLagu li a {color: white;
text-decoration: none; }
#daftarLagu li a:hover {color: cyan; }
#daftarLagu li.aktif a {color: yellow;
font-weight: bold;}</style>
<script>
const inputAudio = document.getElementById('inputAudio');
const audioPlayer = document.getElementById('laguNona');
const sourceAudio = document.getElementById('sumberAudio');
const daftarLagu = document.getElementById('daftarLagu');
const modePutar = document.getElementById('modePutar');
const logoAudio = document.getElementById('logoAudio');
const panelGabungan = document.getElementById('panelGabungan');
let files = [], urls = [], currentIndex = 0, mode = "normal";
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
const source = audioCtx.createMediaElementSource(audioPlayer);
const bass = audioCtx.createBiquadFilter(); bass.type = "lowshelf"; bass.frequency.value = 200;
const mid = audioCtx.createBiquadFilter(); mid.type = "peaking"; mid.frequency.value = 1000; mid.Q.value = 1;
const treble = audioCtx.createBiquadFilter(); treble.type = "highshelf"; treble.frequency.value = 3000;
source.connect(bass); bass.connect(mid); mid.connect(treble);
const analyser = audioCtx.createAnalyser();
treble.connect(analyser); analyser.connect(audioCtx.destination);
analyser.fftSize = 128;
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
const canvas = document.getElementById('audioVisualizer');
const ctx = canvas.getContext('2d');
function drawVisualizer() {requestAnimationFrame(drawVisualizer);
analyser.getByteFrequencyData(dataArray);
ctx.clearRect(0, 0, canvas.width, canvas.height);
const spacing = 0.5;
const barWidth = (canvas.width / bufferLength) - spacing; let x = 0;
for (let i = 0; i < bufferLength; i++) {
const barHeight = dataArray[i] / 1.5;
ctx.fillStyle = `rgb(${120 + barHeight},${180 - barHeight},255)`;
ctx.fillRect(x, canvas.height - barHeight, barWidth, barHeight);
x += barWidth + spacing; }}
drawVisualizer();
['bass','mid','treble'].forEach(id =>
{document.getElementById(id).oninput = e => {const value = parseFloat(e.target.value);
if (id === 'bass') bass.gain.value = value;
if (id === 'mid') mid.gain.value = value;
if (id === 'treble') treble.gain.value = value; }; });
inputAudio.addEventListener('change', function () {
files = Array.from(this.files).filter(f => f.type === "audio/mpeg" || f.name.endsWith(".mp3"));
urls = files.map(f => URL.createObjectURL(f));
if (mode === "reverse") { files.reverse(); urls.reverse(); }
tampilkanDaftar(); });
function tampilkanDaftar() {
daftarLagu.innerHTML = "";
files.forEach((file, i) => {
const item = document.createElement('li');
item.innerHTML = `<a href="javascript:void(0)" onclick="putarLagu(${i})">${file.name.replace(/\.mp3$/i, '')}</a>`;
daftarLagu.appendChild(item);});}
function togglePlaylist() {
panelGabungan.style.display = panelGabungan.style.display === "none" ? "block" : "none"; }
function gantiMode() {
mode = modePutar.value;
if (mode === "reverse") {
files.reverse(); urls.reverse(); tampilkanDaftar(); }}
function putarLagu(index) {
currentIndex = index;
sourceAudio.src = urls[index];
audioPlayer.load();
audioPlayer.play();
highlight(index); }
function highlight(index) {
[...daftarLagu.getElementsByTagName("li")].forEach((li, i) => {
li.classList.toggle("aktif", i === index); }); }
audioPlayer.addEventListener('ended', () => {
logoAudio.classList.remove('mutar');
if (mode === "ulang") putarLagu(currentIndex);
else if (mode === "acak") putarLagu(Math.floor(Math.random() * urls.length));
else if (mode === "reverse") {
currentIndex--; if (currentIndex < 0) currentIndex = urls.length - 1;
putarLagu(currentIndex); } else {currentIndex++;
if (currentIndex < urls.length) putarLagu(currentIndex); }});
audioPlayer.addEventListener('play', () => {
if (audioCtx.state === 'suspended') audioCtx.resume();
logoAudio.classList.add('mutar'); });
audioPlayer.addEventListener('pause', () => {
logoAudio.classList.remove('mutar'); });</script>
<!--➖➖Script Emoji Berkedip➖➖-->
<style> .blink-emoji { animation: blink 2s infinite; }
@keyframes blink {0%, 100% { opacity: 1; }
50% { opacity: 0; }} </style>
Audio MP3
Tipe1
<!--Tombol Audio-->
<span class="blink-emoji">
<div class="circle-button" onclick="toggleMusafir(this)">
<div class="play-icon blinking-icon"></div>⭕</span></div>
<!--Tombol Audio-->
<audio id="Musafir" src="https://www.dropbox.com/scl/fi/yaq5s0b4vmupobxu9ks8w/Putri-Ariani-Perfect-Liar.mp3?rlkey=dd750vugl92tlgbtf0sz5pkjo&st=d6g8bxe4&raw=1"></audio>
<script>function toggleMusafir(button) { const audio = document.getElementById('Musafir');
const icon = button.querySelector('div');
if (audio.paused) { audio.play();
icon.className = 'pause-icon'; } else { audio.pause();
icon.className = 'play-icon blinking-icon'; }
audio.onended = () => { icon.className = 'play-icon blinking-icon'; }; }
</script>
<!--➖➖Script Emoji Berkedip➖➖-->
<style>.blink-emoji { animation: blink 1s infinite; }
@keyframes blink {0%, 100% { opacity: 1; }
50% { opacity: 0; }}</style>Tipe2<!-- Tombol Audio -->
<div class="circle-button" onclick="toggleMusafir(this)">
<div class="play-icon blinking-icon"></div></div>
<audio id="Musafir" src="https://www.dropbox.com/scl/fi/yaq5s0b4vmupobxu9ks8w/Putri-Ariani-Perfect-Liar.mp3?rlkey=dd750vugl92tlgbtf0sz5pkjo&st=d6g8bxe4&raw=1"></audio>
<style>
.circle-button { position: fixed;
top: 200px; /* Sudah diturunkan ke 200px */
left: 10%; transform: translateX(-50%);
width: 30px; height: 30px;
background-color: #c00;
border-radius: 50%;
display: flex; align-items: center;
justify-content: center;
cursor: pointer; z-index: 9999; }
.blinking-icon { animation: blink-icon 1s infinite; }
@keyframes blink-icon {0%, 100% { opacity: 1; }
50% { opacity: 0.2; }}
.play-icon { width: 0; height: 0;
border-style: solid;
border-width: 10px 0 10px 16px;
border-color: transparent transparent transparent white; }
.pause-icon { position: relative;
width: 16px; height: 20px; }
.pause-icon::before,
.pause-icon::after { content: ''; position: absolute;
top: 0; width: 6px;
height: 100%; background: white; }
.pause-icon::before { left: 0; }
.pause-icon::after { right: 0; }
</style>
<script>function toggleMusafir(button) { const audio = document.getElementById('Musafir');
const icon = button.querySelector('div'); if (audio.paused) { audio.play();
icon.className = 'pause-icon'; } else { audio.pause();
icon.className = 'play-icon blinking-icon'; }
audio.onended = () => { icon.className = 'play-icon blinking-icon'; }; }</script>
Tipe3<!--Gaya Tombol Dengarkan-->
<style>.dengarkan-btn {background-color: #e0f0ff;
border: 1px solid #2196F3; color: #000;
padding: 6px 12px; border-radius: 6px; cursor: pointer;
font-family: Arial, sans-serif; font-size: 14px;
margin-bottom: 10px;}.dengarkan-btn:hover {background-color: #b3e5fc;}</style>
<!--Tombol Dengarkan-->
<button class="dengarkan-btn" onclick="bacaTeks('teks-bacaan')">🔊 Dengarkan</button>
<!--Teks yang Akan Dibacakan-->
<div id="teks-bacaan">
Untuk melakukan reset data pabrik pada HP Oppo A3s, buka menu Pengaturan > Pengaturan Tambahan> Buat Cadangan dan Reset > Reset ke Data Pabrik.</div>
<!--JavaScript untuk Text-to-Speech-->
<script>
function bacaTeks(id) {var teks = document.getElementById(id).innerText;
var suara = new SpeechSynthesisUtterance(teks);
suara.lang = 'id-ID'; // Bahasa Indonesia
speechSynthesis.speak(suara);}
</script>
Channel Vidio
<ul id="daftarChannel" style="color: black; list-style: none; margin: 0px; padding-left: 0px;">
<li><a data-src="https://www.youtube.com/embed/TIyjtWra1Lc" href="javascript:void(0);" onclick="playTV(this)" style="color: black;">Conika</a></li>
<li><a data-src="https://www.youtube.com/embed/plK2EUJ9-j8" href="javascript:void(0);" onclick="playTV(this)" style="color: black;">Kau dan sibuah hati</a></li>
<li><a data-src="https://www.youtube.com/embed/2Gub8-cSH9c" href="javascript:void(0);" onclick="playTV(this)" style="color: black;">Mekah</a></li>
<li><a data-src="https://www.youtube.com/embed/-CwtcKDaaLA" href="javascript:void(0);" onclick="playTV(this)" style="color: black;">Metro TV</a></li>
<li><a data-src="https://www.youtube.com/embed/OhTXCnOnvHM" href="javascript:void(0);" onclick="playTV(this)" style="color: black;">SCTV</a></li>
<li><a data-src="https://www.youtube.com/embed/od2al0v6_Ms" href="javascript:void(0);" onclick="playTV(this)" style="color: black;">Arok arok cameh</a></li>
<li><a data-src="https://www.youtube.com/embed/LFWfaAXK9ss" href="javascript:void(0);" onclick="playTV(this)" style="color: black;">Pulangkah adiak</a></li>
<li><a data-src="https://www.youtube.com/embed/J5eu0O_z2vQ" href="javascript:void(0);" onclick="playTV(this)" style="color: black;">She's Gone</a></li>
<li><a data-src="https://www.youtube.com/embed/gs1vFwtY4MI" href="javascript:void(0);" onclick="playTV(this)" style="color: black;">Sunge mancur</a></li>
<li><a data-src="https://www.youtube.com/embed/m10nkRWSUFE" href="javascript:void(0);" onclick="playTV(this)" style="color: black;">Always Remember Us This Way</a></li></ul></div><br/>
<div align="right">
<a href="javascript:void(0);" onclick="matikanTV()" style="color: black;">🔴 OFF</a></div>
<div class="rasio-16-9" id="tvWrapper">
<div id="overlayKonten">
<p style="color: grey; padding-top: 20%; text-align: center;">Klik salah satu channel di atas untuk mulai menonton</p></div>
<iframe allowfullscreen="" id="tvPlayer" src=""></iframe></div>
<style>
.rasio-16-9 {position: relative;
width: 100%;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
border-radius: 8px;
Border: 1px solid gray; }
.rasio-16-9 iframe {position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none; }
#overlayKonten {position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: transparent; /* atau gunakan gambar, atau transparan */
z-index: 1;
display: flex;
justify-content: center;
align-items: center;
font-size: 16px;
text-align: center;
padding: 10px; }
</style>
<script>function playTV(el) {var url = el.getAttribute("data-src");
var player = document.getElementById("tvPlayer");
var overlay = document.getElementById("overlayKonten");
if (player) {player.src = url;
if (overlay) overlay.style.display = 'none'; }}// Sembunyikan konten
function matikanTV() {var player = document.getElementById("tvPlayer");
var overlay = document.getElementById("overlayKonten");
if (player) player.src = "about:blank"; // Kosongkan
if (overlay) overlay.style.display = 'flex';} // Tampilkan kembali konten</script>
<!--➖➖Script Kontainer iklan➖➖-->
<style>.kontainer-lembut1
{background: linear-gradient(yellow, white, white); border: 1px solid yellow; border-radius: 16px;
padding: 10px; max-width: 800px; margin: 20px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
font-family: 'Segoe UI', sans-serif; color: #333;
transition: all 0.3s ease-in-out;}
.kontainer-lembut:hover
{box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
transform: scale(1.01);}</style>
Channel Vidio Type2
<div class="kontainer-lembut"><p>
<style> #daftarChannel a {color: black; text-decoration: none; cursor: pointer; }
#daftarChannel a.aktif {background-color: red; color: white; padding: 2px 4px; border-radius: 3px; }
</style><div style="display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;">
<div style="background: none; border-radius: 10px; border: 0px dashed rgb(212, 163, 115); height: auto; padding: 0px; scrollbar-width: none; text-align: left; width: 45%;">
<li><data-src="https://www.youtube.com/embed/TIyjtWra1Lc" onclick="playTV(this)">Conika</a></li>
<li><a data-src="https://www.youtube.com/embed/plK2EUJ9-j8" onclick="playTV(this)">Kau dan sibuah hati</a></li>
<li><a data-src="https://www.youtube.com/embed/2Gub8-cSH9c" onclick="playTV(this)">Mekah</a></li>
<li><a data-src="https://www.youtube.com/embed/-CwtcKDaaLA" onclick="playTV(this)">Metro TV</a></li>
<li><a data-src="https://www.youtube.com/embed/OhTXCnOnvHM" onclick="playTV(this)">SCTV</a></li></div>
<div style="background: none; border-radius: 10px; border: 0px dashed rgb(212, 163, 115); height: auto; padding: 0px; scrollbar-width: none; text-align: left; width: 45%;">
<li><a data-src="https://www.youtube.com/embed/R_WD9UIxNFI" onclick="playTV(this)">Arok arok cameh</a></li>
<li><a data-src="https://www.youtube.com/embed/LFWfaAXK9ss" onclick="playTV(this)">Pulangkah adiak</a></li>
<li><a data-src="https://www.youtube.com/embed/J5eu0O_z2vQ" onclick="playTV(this)">She's Gone</a></li>
<li><a data-src="https://www.youtube.com/embed/gs1vFwtY4MI" onclick="playTV(this)">Sunge mancur</a></li>
<li><a data-src="https://www.youtube.com/embed/m10nkRWSUFE" onclick="playTV(this)">Always Remember Us This Way</a></li></ul></div></div></p></div>
<div align="right">
<button onclick="offTV()" style="background: rgb(221, 221, 221); color: black;">🔴Off</button></div>
<div id="tvContainer" style="display: none; margin-top: 20px;">
<div style="margin: auto; max-width: 780px; position: relative; width: 100%;">
<div style="height: 0px; padding-bottom: 56.25%; position: relative;">
<iframe allowfullscreen="" id="tvFrame" src="" style="border-radius: 10px; border: 2px solid white; height: 100%; left: 0; position: absolute; top: 0; width: 100%;"></iframe></div></div></div>
<!--Script Vidio Channel-->
<script> function playTV(el) { var frame = document.getElementById("tvFrame");
var container = document.getElementById("tvContainer");
frame.src = el.getAttribute("data-src");
container.style.display = "block";
var allLinks = document.querySelectorAll("#daftarChannel a");
allLinks.forEach(function(link) { link.classList.remove("aktif"); });
el.classList.add("aktif"); }
function offTV() {document.getElementById("tvFrame").src = "";
document.getElementById("tvContainer").style.display = "none";
var allLinks = document.querySelectorAll("#daftarChannel a");
allLinks.forEach(function(link) {link.classList.remove("aktif"); }); }</script>
<style>.kontainer-lembut
{background: linear-gradient(silver, white, white); border: 1px solid gray; border-radius: 16px;
padding: 10px; max-width: 800px; margin: 20px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
font-family: 'Segoe UI', sans-serif; color: #333;
transition: all 0.3s ease-in-out;}
>.kontainer-lembut:hover {box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
transform: scale(1.01);}</style>
Catatan tersembunyi 1
id=pesan1, 2, dan3 dst
semua.forEach(function(pesan) {const elemen = document.getElementById(pesan);
if (!elemen) return; if (pesan === id) {const status = elemen.style.display === 'block';
elemen.style.display = status ? 'none' : 'block';
if (!status) { if (elemen.getAttribute("contenteditable") === "true") {elemen.setAttribute("contenteditable", "false"); }
const editableTags = elemen.querySelectorAll('[contenteditable="true"]');
editableTags.forEach(function(tag){tag.setAttribute('contenteditable', 'false');}); }}
else {elemen.style.display = 'none';}}); }</script>
Catatan tersembunyi 2
id=catatan, 2, dan3 dst
<!--💋Script Catatan tersembunyi2-->
<script>function bukaTutup(id){const semua = ['Catatan1', 'Catatan2', 'Catatan3', 'Catatan4'];
semua.forEach(function(Catatan) {const elemen = document.getElementById(Catatan);
if (!elemen) return; if (Catatan=== id) {const status = elemen.style.display === 'block';
elemen.style.display = status ? 'none' : 'block';
if (!status) { if (elemen.getAttribute("contenteditable") === "true") {elemen.setAttribute("contenteditable", "false"); }
const editableTags = elemen.querySelectorAll('[contenteditable="true"]');
editableTags.forEach(function(tag){tag.setAttribute('contenteditable', 'false');}); }}
else {elemen.style.display = 'none';}}); }</script>
Catatan tersembunyi ringan tampa kontainer
<--Catatan tersembunyi ringan tampa kontainer-->
<button onclick="toggleNote('note2')">Buka/Tutup Catatan 2</button>
<li><a href="javascript:void(0)" onclick="toggleNote('note1')">Buka/Tutup Catatan 1</a></li>
<li><a href="javascript:void(0)" onclick="toggleNote('note2')">Buka/Tutup Catatan 2</a></li>
Box penyimpanan
<div id="note1" style="display:none;">Ini isi catatan pertama</div>
<div id="note2" style="display:none;">Ini isi catatan kedua</div>
<script>function toggleNote(id) {
let notes = document.querySelectorAll("div[id^='note']");
notes.forEach(n => n.style.display = "none"); // otomatis tutup semua
let note = document.getElementById(id);
if (note) {
note.style.display = "block"; // buka yang dipilih
}}</script>
Tombol icon
<div align="left">
<div style="background: none; border-radius: 5px; border: 0px solid gray; display: flex; gap: 7px; height: auto; padding: 2px; width: 290px;">
<a href="tel:+6285377639367">
<img src="https://blogger.googleusercontent.com/img/a/
AVvXsEhvdln8lCl7Agm6LKLvBPMYmOK71-VLAGAPyQXOFNDp4GqZa7FtAiUhl6sU9uKvt56bObhssJU4vJCYxiTGmG8vg7QGRvocnDxw1Mil4of7Wlhf9AAIPVHPkCY4miHE-ZJblvhgxhW3HgGp1-XiYYLWpR9HMaYBSZdyCN84csbD_Xh812EEww7cGx2HAr8K=w58-h59" style="border-radius: 10px; border: 1px solid white; height: 40px; margin: 0px; padding: 0px;" width="40px" /></a>
<a href="https://maps.app.goo.gl/i5crYwqSXw2vqACX9">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEjUzTUJ2k0OxjZwO1-MXXyHW3Eq6Ugbbhoi1zHaRCIS1GARZsu_-604VKslOkQzxLz6W-90smlznrXWsp70yxZuGLh3sEHseBGqhHImaj7Qe6a5ipnBj-5MMXWXOzbhIfzxZaezz3W2zA01A36WZVci-f8_XX07v4pbWRjU4_QLJukMYjHrMJuzQhlhWyiT=w61-h61" style="border-radius: 10px; border: 1px solid white; height: 40px; margin: 0px; padding: 0px;" width="40px" /></a>
<a href="https://wa.me/6285377639367">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEh26E-bjJCzUJS_Tl78wvOLFV4hS0UfzS6KSI1bCLfsq2Wa-cdKgeYqLu449y2eKF_Tgw2zQ7jkIU0raf2BeKB_LZvf4gijU4BiDQkMP68_kWbXztEKA7p1Hh2NEkRPfLzoYlGpxp9CbhiBDh6L6QnBaQJLqGhkBxI0HK-khZvWe5qBPSN_1luq4Wn_U9bG" style="border-radius: 10px; border: 1px solid white; height: 40px; margin: 0px; padding: 0px;" width="40px" /></a>
<a href="https://www.facebook.com/musafir.teknik">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEi8k7oDOqmK5vv6YUJ51VROBXRVE4Oz_V661Y7Wgfl7Q0-js8w4VmqDIg7wwY1-SNwfr-y8JvI9QQJt2wzJt5wSjLodEsVF84Qq1nCfVALwsdwF5A-TsXU6NxcuAkUhyuvmkNnF_e6Pn0x1P9oicMfr9eMRWzVKJBhOGKiC8CznF3i0Pt6oAGyVnC6XZvg" style="border-radius: 10px; border: 1px solid white; height: 40px; margin: 0px; padding: 0px;" width="40px" /></a>
<a href="https://www.tiktok.com/@serviselektronikjambi">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEh4pQw5r8YgECtV6IKx7QPxEeYhA_1ZMqy3ZJDvW9dOHu0LQC-QWwpaqvNK9chHTmJV6F52bPwrFXxeSHbbNnqdqxGubn-ChqzmiZY9qLA98s2UXQIYcw8v9U_TR4S5X_bO9Z5sNJl6DgwLLBqlNTE1b5TMDofF0Mp2rUU3UYaNSWjuvfBAmxFd2rDdzx0" style="border-radius: 10px; border: 1px solid white; height: 40px; margin: 0px; padding: 0px;" width="40px" /></a>
<a href="https://www.instagram.com/serviselektronikjambi/">
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEi-HZ4iJtgashj4FbZWsPt-jGVaigvFQlUuiolk6GzI-aUzYWJB-GwvqAtu5GGLFkeGyT8AamEYrv7rXbI7uASMUx4K5gU5CfOXK-6G4kvdPWmjpvF5AeB4NBeB5_1JgubeKj5Y51gmGb4C3IOpw6o2fW3GbUKgRoAIhWb9RUSK8V3ze__EzpSD_NtsIIg" style="border-radius: 10px; border: 0px solid white; height: 40px; margin: 0px; padding: 0px;" width="40px" /> </a></div></div>
Ikon WhatsApp & Telepon - Vertikal
<div style="bottom: 100px; left: 20px; position: fixed; z-index: 9999;">
<div style="padding: 0px; width: 40px;">
<!--WhatsApp-->
<a href="https://wa.me/6285377639367" target="_blank" title="Chat di WhatsApp">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikCZDEONXYsq581PbnD22mfoGIvxzKTHM6O9_5vNNuhnWuJ1E35Ru0PMhqBP5-gcAQEXnv9K_ynhqVA6B-zN031aH61-5Saj5Ke4AsMYlF95solWexCqSEj13u4R5epBxYjjQ82yJ5kKWCRGfgQ97xYSsYP3r7D-Nu9cW4R5gJq9BXCuN-hkz_P2NR6nY/s320/p2.jpg" style="border-radius: 10px; border: 4px solid white; padding: 0px;" width="40" /></a>
<!--Telepon-->
<a href="tel:+6285377639367" title="Panggil Sekarang">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiFRE626XS8A_JVhyphenhyphenKp4x8wLmnrbyhOw6L0rXm1ZhTUDYIQgvZ8SCEYFAL7PJbP9A_iCGCNC6ZmLi7I8C4FXSU5JGiiDEW0E6hXFn7pUgrKR0wHZKLeeMZM0b8mPDq8NqQu-0OydWdNII7Bmd0WmbaR4IvBdB176xxjXQUSD0NzQ6cmJmdUyGUhHy1vpUM/s320/p1.jpg" style="border-radius: 10px; border: 4px solid white; padding: 0px;" width="40" /></a>
<!--Facebook-->
<a href="https://www.facebook.com/profile.php?id=100065801940081" title="Kunjungi Facebook">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi93Lc8H9QdP68opY4sLguTbNWWZPYE79oZC50pRt-mZjthVOXYjy7mevGlJhfBkzhTT_4jsiK7j2z0bR0eAhe_vK27P1eFLiMEXGLeg3CWjmHGa0ZOhPIvqIOz60ExOabNZxTZsqjz3Ocf8TJanlo32_rzpNHOsKjXNFaHd6Bmo6EpWZsBxiRbQr4iqME/s320/Screenshot_18.jpg" style="border-radius: 10px; border: 4px solid white; padding: 0px;" width="40" /</a>
<!--Map-->
<img src="https://blogger.googleusercontent.com/img/a/AVvXsEjUzTUJ2k0OxjZwO1-MXXyHW3Eq6Ugbbhoi1zHaRCIS1GARZsu_-604VKslOkQzxLz6W-90smlznrXWsp70yxZuGLh3sEHseBGqhHImaj7Qe6a5ipnBj-5MMXWXOzbhIfzxZaezz3W2zA01A36WZVci-f8_XX07v4pbWRjU4_QLJukMYjHrMJuzQhlhWyiT=w61-h61" style="border-radius: 10px; border: 4px solid white; padding: 0px;" width="40" /></a></div></div>
Script Kontainer lebut
<!--<div class="kontainer-lembut"><p>Content diletakkan disini</p></div>-->
<!--➖➖Script Kontainer lembut➖➖-->
<style>.kontainer-lembut
{background: linear-gradient(white, white, #F0F8FF);
border: 1px solid #F0F8FF; border-radius: 16px;
padding: 10px; max-width: 800px; margin: 20px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
font-family: 'Segoe UI', sans-serif; color: #333;
transition: all 0.3s ease-in-out;}.kontainer-lembut:hover
{box-shadow: 0 6px 18px rgba(0, 0, 0, 0.9);
transform: scale(1.01);}</style>
Script Kontainer lebut Scroll
<style>.kontainer-lembut
{background: linear-gradient(white, white, #F0F8FF);
border: 1px solid #F0F8FF; border-radius: 16px;
height: 500px; overflow: auto;
padding: 10px; max-width: 800px; margin: 20px auto;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
font-family: 'Segoe UI', sans-serif; color: #333;
transition: all 0.3s ease-in-out;}.kontainer-lembut:hover
{box-shadow: 0 6px 18px rgba(0, 0, 0, 0.9);
transform: scale(1.01);}</style>
Script Kontainer lebut 2
<div class="kontainer-lembut2"><p>Content diletakkan disini</p></div>
background: linear-gradient(180deg, #ffffff, #f6f7f9);
border: 1px solid #e0e0e0;
border-radius: 20px;
padding: 24px;
max-width: 800px;
margin: 30px auto;
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
font-family: 'Segoe UI', sans-serif;
color: #2f2f2f;
transition: all 0.3s ease-in-out; }
.kontainer-lembut:hover {
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
transform: scale(1.005);
background: linear-gradient(180deg, #fdfdfd, #f0f2f5); }</style>
Kontainer bergandengan
<div style="display: flex; flex-wrap: wrap; gap: 5px; justify-content: center;">
<div style="background: none; border-radius: 10px; border: 2px dashed rgb(212, 163, 115); height: auto; padding: 10px; scrollbar-width: none; text-align: left; width: 45%;">letakakkan kontent disini</div>
<div style="background: none; border-radius: 10px; border: 2px dashed rgb(212, 163, 115); height: auto; padding: 10px; scrollbar-width: none; text-align: left; width: 45%;">letakakkan kontent disini</div></div>
<!--CSS Kontainer Horizontal didekstop vertikal di seluler-->
<style>.flex-wrap-container {display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.kontainer { background: transparent; border-radius: 12px; padding: 20px;
flex: 1 1 300px; /* min lebar 300px, bisa grow */ max-width: 500px; }
/* Responsif: HP akan tampil vertikal */
@media (max-width: 600px) {.kontainer {flex: 1 1 100%; /* jadi 100% jika layar kecil */
max-width: 100%; }}</style>
<!-- Script tombol copy-->
<script>function salinTeks(idKontainer)
const teks = konten.innerText || konten.textContent;
navigator.clipboard.writeText(teks).then(function()
<style> html, body {margin: 0;
padding: 0; } .kontainer {width: 100%;
overflow: hidden; }/* mencegah float nabrak */
.kontainer-kiri {float: left; width: 50%;
box-sizing: border-box; padding: 10px; background-color: #f0f0f0; }
.kontainer-kanan {float: right;
width: 50%; box-sizing: border-box;
padding: 10px; background-color: #e0e0e0;
height: 200px; overflow-y: auto; }
@media (max-width: 768px) {
.kontainer-kiri, .kontainer-kanan {float: none;
width: 100%; height: auto;}}</style>
<style>.scroll-box
{max-height: 300px; /* tinggi maksimum */
overflow-y: auto; /* scroll vertikal jika perlu */
border: 0px solid #ccc; padding: 0px;
background-color: #f9f9f9;}</style>
<style>
#kontainer {border-radius: 10px;
overflow: hidden; /* Ini penting agar sudut membulat terlihat */
margin: 0 auto;
position: relative;
width: 100%;
float: right; }
#kontainer::before {content: "";
background-image: url('https://kynguyenlamdep.com/wp-content/uploads/2021/12/cay-dua-500x667.jpg');
background-position: 25% 25%;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px;
opacity: 1;
z-index: 0;
border-radius: 10px; }/* Ditambahkan agar sesuai kontainer */
#konten {position: relative;
z-index: 1;
padding: 10px;
min-height: 600px;}
/* Responsive: lebar penuh di perangkat kecil */
@media (max-width: 768px) {#kontainer {width: 100%; }}</style>
kontainer-induk
<div class="kontaine-induk">kontenn letak disini</div>
</style>.kontainer-Induk
{background: transparent; border-radius: 10px;
border: 2px dashed red; height: auto; padding: 10px; scrollbar-width: none;
width: 80%;} </style>
kontainer-aspect ratio
<div style="aspect-ratio: 16 / 9; background: transparent; border-radius: 10px; border: 2px dashed red; padding: 0px; scrollbar-width: none; width: 400px;">kontenn letak disini</div>
>Background Gambar
Background Gambar dengan opacity
<div style="position: relative; border-radius: 16px; margin: 40px auto; max-width: 800px; overflow: hidden;"><div style="background-image: url('https://images.pexels.com/photos/1308881/pexels-photo-1308881.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500'); background-position: center;
background-repeat: no-repeat; background-size: cover; position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0.2; z-index: 0; "></div><div style=" position: relative; z-index: 1; height: 500px; overflow-y: auto; padding: 10px; color: white; font-family: 'Caveat', cursive; font-size: x-large; line-height: 1.6;">Letakkan konten disini</div>
<style>
#kontainer {border-radius: 10px;
overflow: hidden; /* Ini penting agar sudut membulat terlihat */
margin: 0 auto;
position: relative;
width: 100%;
float: right; }
#kontainer::before {content: "";
background-image: url('https://kynguyenlamdep.com/wp-content/uploads/2021/12/cay-dua-500x667.jpg');
background-position: 25% 25%;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 500px;
opacity: 1;
z-index: 0;
border-radius: 10px; }/* Ditambahkan agar sesuai kontainer */
#konten {position: relative;
z-index: 1;
padding: 10px;
min-height: 600px;}
/* Responsive: lebar penuh di perangkat kecil */
@media (max-width: 768px) {#kontainer {width: 100%; }}</style>
<style>#kontainer {border-radius: 10px;
overflow: hidden; /* Ini penting agar sudut membulat terlihat */
margin: 0 auto;
position: relative;
width: 100%;
float: right;
transition: all 0.6s ease-in-out;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); }
#kontainer:hover {
transform: scale(1.03) rotate(0.5deg);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3); }
#kontainer::before {content: "";
background-image: url('https://kynguyenlamdep.com/wp-content/uploads/2021/12/cay-dua-500x667.jpg');
background-position: 25% 25%;
background-repeat: no-repeat;
background-size: cover;
position: absolute;
top: 0; left: 0;
width: 100%;
height: 500px;
opacity: 1;
z-index: 0;
border-radius: 10px; }/* Ditambahkan agar sesuai kontainer */
#konten {position: relative;
z-index: 1;
padding: 10px;
min-height: 600px;}
/* Responsive: lebar penuh di perangkat kecil */
@media (max-width: 768px) {#kontainer {width: 100%; }}</style>
<div class="kontainer-mengambang">
<div class="konten">Teks atau isi di sini</div></div>
<style>
.kontainer-mengambang {
border: 1px solid rgba(128, 128, 128, 0.4);
border-radius: 20px;
position: relative;
overflow: hidden;
animation: mengambang 5s ease-in-out infinite;
box-shadow: none;
transition: box-shadow 0.4s ease, transform 0.4s ease;}
.kontainer-mengambang:hover {box-shadow: 0 6px 18px rgba(0, 0, 0, 0.9);
transform: scale(1.01);}/* scale + tetap ikut animasi */
.background
{background-image:
url('https://st.depositphotos.com/1019714/1954/v/450/depositphotos_19545001-stock-illustration-abstract-music-background.jpg');
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: cover;
height: 100%;
width: 100%;
opacity: 0.3;
position: absolute;
top: 0;
left: 0;
z-index: 0; }
.konten {
color: black;
font-size: x-large;
line-height: 1.6;
padding: 10px;
position: relative;
z-index: 1; }
@keyframes mengambang {
0% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
100% { transform: translateY(0px); }}
</style>
Background Gambar gelap full display
Dua gambar berkedip pada satu posisi
<div style="position: relative; width: 100px; height: 100px;">
<img id="gambarA" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgyA4icT8MYSbQpHnOdQeL1Ci17Q8QPLI0CBCgimoG6BngkvDyBYE-SE1XhgM93qOkSjc_F2yvCWh8jimtnJcNmYVRYg33kQ1f_O65VOwBrLozypOyL2V56so452qi8gaEDBLk83gyix4hkYDCmmP58cW7Fbg9wV8RohiBfs6UOo0zv7l7ZgtTjeAheTV8/s320/5932f5ff-d756-4ded-b445-8df35860de96.jpg" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" />
<img id="gambarB" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjLzbScXXZAYCHCt9_-tzVKqnHcjKsk0Ka5J2gNq0UocQUsXHPZp49Wk_OPAe20NFhRBULe9Gq_4KDWz7MPHTOmhZjJqO8qqth8qKTkAiWPUiGcldP-Ot2alprfmP5qIv66wV53c3qrsrAmRixzdyYaIV2tyDwElv8ZMO95i4hOzGf5qTZxxbRIRlnMLUo/s320/78f75850-ec9a-494e-ad2c-8c5466467cc6.png" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: none;" /></div>
<script>let tampilA = true;
setInterval(() => {document.getElementById('gambarA').style.display = tampilA ? 'block' : 'none';
document.getElementById('gambarB').style.display = tampilA ? 'none' : 'block';
tampilA = !tampilA;}, 500); // Ganti gambar setiap 500 milidetik</script>
Dua Kontainer berkedip pada satu posisi
<!--Dua Kontainer berkedip pada satu posisi-->
<div style="height: auto; position: relative; width: 100%;">
<div id="teksA" style="background: gray; border: 0px solid gray; display: none; width: 350px;">
<span style="color: white; font-family: Righteous; font-size: x-large;"> Selamat pagi, Sayang...</span></div>
<div id="teksB" style="background: red; border: 0px solid gray; display: none; width: 350px;">
<span style="color: white; font-family: Righteous; font-size: x-large;"> Selamat malam, Cinta...</span></div></div>
<script>let tampilA = true;
setInterval(() => {document.getElementById('teksA').style.display = tampilA ? 'block' : 'none';
document.getElementById('teksB').style.display = tampilA ? 'none' : 'block';
tampilA = !tampilA; }, 2000); // Ganti teks setiap 200 milidetik</script>
Jam digital
Hari, Tanggal & Jam Digital
<div id="tanggalJam" style=" font-family: arial rounded; font-size: 20px;
color: white; background: black; padding: 10px 20px; border-radius: 8px;
display: inline-block; box-shadow: 0 0 10px rgba(0,255,255,0.3); line-height: 0.5;
vertical-align: middle;">Memuat...</div>
<script>function updateTanggalJam()
{const elements = document.querySelectorAll("#tanggalJam, .tanggalJam"); // Bisa banyak
const hari = ["Minggu", "Senin", "Selasa", "Rabu", "Kamis", "Jumat", "Sabtu"];
const bulan = ["Januari", "Februari", "Maret", "April", "Mei", "Juni",
"Juli", "Agustus", "September", "Oktober", "November", "Desember"];
const now = new Date();
const namaHari = hari[now.getDay()];
const tanggal = String(now.getDate()).padStart(2, '0');
const namaBulan = bulan[now.getMonth()];
const tahun = now.getFullYear();
const jam = String(now.getHours()).padStart(2, '0');
const menit = String(now.getMinutes()).padStart(2, '0');
const detik = String(now.getSeconds()).padStart(2, '0');
const teks = `${namaHari}, ${tanggal} ${namaBulan} ${tahun} ${jam}:${menit}:${detik}`;
elements.forEach(el => el.textContent = teks); }
setInterval(updateTanggalJam, 1000);
updateTanggalJam();</script>
Jam Analog dan digital
<div style="display: flex; flex-wrap: wrap; gap: 20px; justify-content: center;">
<canvas class="clockCanvas" height="300" width="300"></canvas>
<canvas class="clockCanvas" height="300" width="300"></canvas>
<canvas class="clockCanvas" height="300" width="300"></canvas></div>
<style>.clockCanvas {width: 200px !important;
height: 200px !important;
aspect-ratio: 1/1 !important;
display: block; }</style>
<script>
// =============================
// PENGATURAN JAM
// =============================
const clockSettings = {hourHandWidth: 6, // lebar jarum jam
minuteHandWidth: 4, // lebar jarum menit
secondHandWidth: 2, // lebar jarum detik
hourNumbersColor: "#000", // warna angka jam
digitalFont: "16px Arial", // font jam digital
digitalColor: "#000", // warna jam digital
centerCapColor: "#000", // warna bulatan poros tengah
centerCapRadius: 0.05 }; // ukuran bulatan poros (0.05 = 5% radius)
// =============================
// FUNGSI MENGGAMBAR JAM
// =============================
function drawClock(ctx, radius)
{drawFace(ctx, radius);
drawNumbers(ctx, radius);
drawTime(ctx, radius); }
function drawFace(ctx, radius)
// Lingkaran luar
{ctx.beginPath();
ctx.arc(0, 0, radius, 0, 2 * Math.PI);
ctx.fillStyle = "white";
ctx.fill();
// Outline
ctx.strokeStyle = "#000";
ctx.lineWidth = radius * 0.02;
ctx.stroke();
// Penanda menit (garis tipis)
for (let i = 0; i < 60; i++)
{ctx.beginPath();
let length = (i % 5 === 0) ? radius * 0.1 : radius * 0.05;
ctx.lineWidth = (i % 5 === 0) ? 2 : 1;
ctx.moveTo(0, -radius);
ctx.lineTo(0, -radius + length);
ctx.stroke();
ctx.rotate(Math.PI / 30); }}
function drawNumbers(ctx, radius)
{ctx.font = radius * 0.15 + "px Arial";
ctx.textBaseline = "middle";
ctx.textAlign = "center";
ctx.fillStyle = clockSettings.hourNumbersColor;
for (let num of [12, 3, 6, 9]) {
let ang = (num * Math.PI) / 6;
ctx.rotate(ang);
ctx.translate(0, -radius * 0.85);
ctx.rotate(-ang);
ctx.fillText(num.toString(), 0, 0);
ctx.rotate(ang);
ctx.translate(0, radius * 0.85);
ctx.rotate(-ang); }}
function drawTime(ctx, radius) {
let now = new Date();
let hour = now.getHours();
let minute = now.getMinutes();
let second = now.getSeconds() + now.getMilliseconds() / 1000;
// Hitung sudut jarum jam
hour = hour % 12;
let hourAngle = (hour * Math.PI) / 6 + (minute * Math.PI) / (6 * 60) + (second * Math.PI) / (360 * 60);
drawHand(ctx, hourAngle, radius * 0.5, clockSettings.hourHandWidth);
// Jarum menit
let minuteAngle = (minute * Math.PI) / 30 + (second * Math.PI) / (30 * 60);
drawHand(ctx, minuteAngle, radius * 0.75, clockSettings.minuteHandWidth);
// Jarum detik
let secondAngle = (second * Math.PI) / 30;
drawHand(ctx, secondAngle, radius * 0.85, clockSettings.secondHandWidth, "red");
// Tutup poros
ctx.beginPath();
ctx.arc(0, 0, radius * clockSettings.centerCapRadius, 0, 2 * Math.PI);
ctx.fillStyle = clockSettings.centerCapColor;
ctx.fill();
// Jam digital di bawah titik pusat
ctx.font = clockSettings.digitalFont;
ctx.fillStyle = clockSettings.digitalColor;
let digitalTime = now.toLocaleTimeString();
ctx.fillText(digitalTime, 0, radius * 0.5); }
function drawHand(ctx, pos, length, width, color = "#000")
{ctx.beginPath();
ctx.lineWidth = width;
ctx.lineCap = "round";
ctx.strokeStyle = color;
ctx.moveTo(0, 0);
ctx.rotate(pos);
ctx.lineTo(0, -length);
ctx.stroke();
ctx.rotate(-pos); }
// =============================
// INISIALISASI SEMUA JAM
// =============================
function initClocks() {document.querySelectorAll(".clockCanvas").forEach(canvas =>
{let ctx = canvas.getContext("2d");
let radius = canvas.height / 2;
ctx.translate(radius, radius);
radius = radius * 0.9;
setInterval(() =>
{ctx.clearRect(-canvas.width, -canvas.height, canvas.width * 2, canvas.height * 2);
drawClock(ctx, radius);}, 20); }); }// update tiap 20ms untuk gerakan halus
initClocks(); </script>
Menulis 2 kolom di dekstop menjadi satu kolom diseluler
<!--Menulis 2 kolom menjadi satu kolom diseluler-->
<div class="column">Kolom1 letakkan teks disini</div>
<div class="column">Kolom2 letakkan teks disini</div></div>
<style> /* CSS untuk desktop */
justify-content: space-between; gap: 20px; }/* Jarak antara kolom */
min-width: 300px; } /* Lebar minimum agar tidak terlalu sempit di desktop */
@media (max-width: 768px) {.responsive-columns