Musafir Blogspot

Home Theater

Private Theater

Nyeleneh Video Player + Live TV

uji

Fitur web

Interaktif

dan Multimedia>

Oleh: Ir. Supriadi

Terapan penggunaa Algoritma pemograman pada halaman web

Edisi Musafir Engenering & Nona AI

2025

⭕Baca Daftar isi:

Backround 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>

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 diseluler dan dengan width variable di dekstop
<div class="fullwidth"><div class="konten-center konten-scroll"> letakkan Konent disini</div></div>



<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

<div id="hero1" class="hero"><img src="Url gambar"alt="diskripsi"</div>

<div id="hero2" class="hero"><img src="Url gambar"alt="diskripsi"</div>

<div id="hero3" class="hero"><img src="Url gambar"alt="diskripsi"</div>


<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>

🔴

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; }

/* Mengatur gaya untuk judul */
.daftar-isi-judul {color: red; font-family: 'Righteous', sans-serif;font-size: x-large; }</style>

CSS untuk modifikasi tulisan ol Li type2

<div id="daftarLagu">link letak disini</div>

<style>

#daftarLagu {font-family: arial; font-size: 14px; line-height: 1.0; } /* jarak antar baris */

#daftarLagu ol {color: black; /* warna angka */

padding-left: 20px; }

#daftarLagu ol li a { color: green !important; /* warna link */

text-decoration: none; }

#daftarLagu ol li a:hover { color: red !important; /* warna saat disenggol */

text-decoration: underline; }

/* Warna aktif setelah klik */

#daftarLagu ol li a.active {

color: blue !important;

font-weight: bold; } /* warna setelah di klik */

</style>

☀ Warna & Opacity Dinamis

⭕ opacity- (Transparan): 0% ⭕ opacity+ (Gelap): 0%

🎯 Hex
🌈 RGBA
🌫️ Opacity
🎨 RGB
🔍 Alpha (0–1)
🔁 Variabel Warna

🔖 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

Sistem	Nama Warna	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

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>

<img class="responsive-img" src="Url gambar"style="float: right; padding: 0px;"/>

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>

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh4Wejf3h3r3J5FI7i0WVciLJDVQ-iGQcOgmluI2Hssn_xyq-9ZVjr05SaCKrVPODqXZwtx4fub8hQyP3_CNwwwmHVDdcN_cuczemd-P6dnwZziRaJgaKI3b0wAgMonys8xGZgO7SMQqAKfB6KgGQrDgr7kss7IgAZsMFWnRAkJy5FfzuwVIPlj54pf7a0/s600/teknisi%20jambi.gif" alt="Gambar Responsive" class="responsive-img">

CSS Bingkai gambar

<div class="bingkai-gambar">letakkan gambar disini</div>

width: 100%;max-width: 300px;

overflow: hidden;

border: 1px solid #ddd;

border-radius: 20px;}</style>

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>


<style> .blink-emoji { animation: blink 2s infinite; }
@keyframes blink {0%, 100% { opacity: 1; }
50% { opacity: 0; }} </style>

Audio MP3

Tipe1

<span class="blink-emoji">
<div class="circle-button" onclick="toggleMusafir(this)">
<div class="play-icon blinking-icon"></div>⭕</span></div>


<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>

<style>.blink-emoji { animation: blink 1s infinite; }
@keyframes blink {0%, 100% { opacity: 1; }
50% { opacity: 0; }}</style>Tipe2
<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

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>

<button class="dengarkan-btn" onclick="bacaTeks('teks-bacaan')">🔊 Dengarkan</button>

Untuk melakukan reset data pabrik pada HP Oppo A3s, buka menu Pengaturan > Pengaturan Tambahan> Buat Cadangan dan Reset > Reset ke Data Pabrik.</div>

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
<span style="color: black; font-family: Caveat; font-size: x-large;">Music Channel</span>
<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>


<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>

Catatan tersembunyi 1

id=pesan1, 2, dan3 dst

Tombol , catatan type 1

Tombol teks

<a href="javascript:void(0);" onclick="bukaTutup('pesan1')"><b><i>Tentang kami</i></b></a>

Tombol catatan type 2

Tombol Petak

<button onclick="bukaTutup('pesan1')" style="margin-bottom: 5px;">📜 Catatan 1</button>

Kontainer catatan Type1

<div class="isi-pesan" id="pesan1" style="border: 0px solid black; display: none; margin-top: 0px; padding: 0px;"><p>letakkan konten disini</p></div>

Kontainer catatan Type2 Ini container paling bagus

<div class="kontainer-lembut1" contenteditable="true" hidden="" id="pesan1"style="border: 1px solid gray;"><p>letakkan konten disini</p></div>

Kontainer catatan Type3 Ini container paling bagus

<div contenteditable="true" hidden="" id="pesan1" style="background: none; borde-radius: 6px; border: 1px solid rgb(204, 204, 204); margin: 10px 0px; padding: 10px; position: relative;"><p>letakkan konten disini</p></div>

<script>function bukaTutup(id){const semua = ['pesan1', 'pesan2', 'pesan3', 'pesan4'];
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>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>

Pesan tersembunyi dengan dua buah id

<h3>Catatan Note</h3>
<button onclick="toggleNote('note1')">Note 1</button>
<button onclick="toggleNote('note2')">Note 2</button>

<div id="note1" class="note-box" style="display:none;">Isi Note 1</div>
<div id="note2" class="note-box" style="display:none;">Isi Note 2</div>
<hr>

<h3>Catatan Catt</h3>
<button onclick="toggleCatt('catt1')">Catt 1</button>
<button onclick="toggleCatt('catt2')">Catt 2</button>

<div id="catt1" class="catt-box" style="display:none;">Isi Catt 1</div>
<div id="catt2" class="catt-box" style="display:none;">Isi Catt 2</div>

<style>body { font-family: Arial, sans-serif; background:#f5f5f5; padding:20px; }
button { margin:5px; padding:6px 12px; border:none; background:#444; color:#fff; border-radius:4px; cursor:pointer; }
button:hover { background:#666; }
.note-box, .catt-box { margin-top:10px; padding:10px; border:1px solid #ccc; background:#fff; </style>

<script>function toggleNote(id) {
let notes = document.querySelectorAll("div[id^='note']");
notes.forEach(n => n.style.display = "none"); // tutup semua Note
let note = document.getElementById(id);
if (note) note.style.display = "block"; // buka Note terpilih}
function toggleCatt(id) {
let catts = document.querySelectorAll("div[id^='catt']");
catts.forEach(c => c.style.display = "none"); // tutup semua Catt
let catt = document.getElementById(id);
if (catt) catt.style.display = "block"; // buka Catt terpilih}</script>

Tombol icon

Ikon WhatsApp & Telepon - Vertikal
<div style="bottom: 100px; left: 20px; position: fixed; z-index: 9999;">
<div style="padding: 0px; width: 40px;">

<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>

<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>

<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>


Script Kontainer lebut

Script Kontainer lebut Scroll

Script Kontainer lebut 2

<div class="kontainer-lembut2"><p>Content diletakkan disini</p></div>

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>

<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>

<div class="kontainer"><p>kontainerpertama.</p></div>

<div class="kontainer"><p>kontainer kedua.</p></div></div>

Container dengan Tombol Copy

Biarlah rindu jadi luka yang tidak berdarah, tapi tetap terasa. 🌙</p></div>


<script>function salinTeks(idKontainer)

{const konten = document.getElementById(idKontainer);
const teks = konten.innerText || konten.textContent;
navigator.clipboard.writeText(teks).then(function()

{alert("✅ Teks berhasil disalin!");}, function(err)

{alert("❌ Gagal menyalin teks: " + err); }); }</script>

CSS Style container tampil di Seluler dengan Width 100% dan di dekstop 50%

<div class="kontainer">

<div class="kontainer-kanan"><p> letak kontainer disini</P></div></div>

<div class="kontainer">

<div class="kontainer-kiri"><p> letak kontainer disini</P></div></div>


<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>

Scroll Box

<div class="scroll-box">content</div>

Kontainer Background gambar tampilan 50%Seluler

100% di dekstop

<div id="konten">Letakkan konten disini</div></div></div>

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

<div style="background-image: url('url Gambar'); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; border-radius: 10px; height: 500px; margin: 40px auto; overflow: auto; width: 100%; "><div style="font-family: Georgia; padding: 10px;">Letakkan konten disin</div>

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>

Background Gambar dengan opacity dan aspect ratio

Background tampilan 50%Seluler

100% di dekstop

<div id="konten">Letakkan konten disini</div></div></div>

Kontainer lembut dengan Background Gambar

tampilan 50%Seluler 100% di dekstop

<div id="kontainer"><div style="height: 300px">hhhhhhhhh</div></div>

<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>

Bebckground mengambang

<div class="background"></div>
<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

<style>body {background: radial-gradient(circle, #111 0%, #000 100%); color: white; padding: 10px;}</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%;">

<ul>
<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> 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>

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


<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>

/* Kolom akan mengambil lebar penuh di seluler */