00
HARI
Campas hitam
1-Blogger
<div style="box-sizing: border-box; padding: 0px; text-align: left; width: 100%;">
<div class="radar-fx-box" style="background: black; border-radius: 0px; border: 0px solid rgb(68, 68, 68); box-sizing: border-box; margin-bottom: 20px; overflow: hidden; width: 100%;">
<div style="align-items: center; background: blue; border: 0px solid white; box-sizing: border-box; color: white; display: flex; justify-content: space-between; padding: 3px;">
<div style="align-items: center; display: flex; gap: 12px; text-align: left;">
<span face="sans-serif">Fx 1.22</span>
<span face="sans-serif" style="background: silver; border-radius: 10px; color: black; font-size: 12px; padding: 2px 10px;">1-MQL5</span></div>
<button onclick="copyRadarCode(this)" style="background: black; border-radius: 10px; border: 1px solid rgba(255, 255, 255, 0.3); color: white; cursor: pointer; font-family: sans-serif; font-size: 12px; padding: 2px 10px;">π Copy</button></div>
<div style="padding: 0px; text-align: left;">
<pre class="target-code" style="line-height: 1.5; margin: 0px; text-align: left; word-break: break-all;"><span style="color: #d4d4d4; font-family: Consolas, monospace;"><span style="font-size: 14px; text-wrap-mode: wrap;">
Input data disini
</span></span></pre></div></div></div>
<!--SCrip Copy-->
<script>function copyRadarCode(btn) {const parent = btn.closest('.radar-fx-box');
const codeText = parent.querySelector('.target-code').innerText.trim();
if (navigator.clipboard) {navigator.clipboard.writeText(codeText).then(() => {const oldText = btn.innerHTML;
btn.innerHTML = "✅ Copied!";setTimeout(() => { btn.innerHTML = oldText; }, 2000);})
.catch(err => {console.error("Gagal menyalin: ", err);});}}</script>
CSS Vidio short
2-Blogger
<!--π³π³π³π³π³π³
CSS Bingkai VIDIO SHORT
Kontainer:
<div class="flex-wrapper">
<div class="video-box"><iframe src="https://www.youtube.com/embed/DuP-s6-bclg" allowfullscreen></iframe></div></div>-->
<style>.flex-wrapper {display: flex;
justify-content: left; /* Mengunci video ke tengah */
align-items: center; width: 100%;}
.video-box { width: 100%; max-width: 400px;
aspect-ratio: 9 / 16;background: #000;
overflow: hidden;}
.video-box iframe
{width: 100%; height: 100%;
border: none;}</style>
Bingkai Vidio
3-Blogger
<!--π³π³π³π³π³π³
Bingkai Vidio:
<div class="video-container">
<iframe allowfullscreen="" class="BLOG_video_class" height="266" src="https://www.youtube.com/embed/OxlgSpsZm6c" width="320"></iframe></div>
CSS BINGKAI VIDIO-->
</style>
<!--CSS Vidio-->
<style>
.video-container {width: 100%;
max-width: 800px; /* Batas lebar maksimal di desktop */
aspect-ratio: 16 / 9; /* Menggunakan rasio modern */
height: auto; /* Mengikuti rasio yang ditentukan */
overflow: hidden;
margin: 20px auto; /* Memastikan container selalu di tengah */
background-color: #000; /* Latar belakang hitam untuk bingkai L/R */
}
.video-container iframe {width: 100%;
height: 100%;border: 0;display: block; /* Menghilangkan celah bawah */
}</style>
CSS Vidio short
4-Blogger
<!--π³π³π³π³π³π³
CSS dan script Vidio short
Display Vidio short :
<div id="shortContainer"></div>
Link Vidio short :
<a onclick="toggleShort(this, 'uZ63HONHz_M')">Always Remember Us This Way</a>
Scripot Vidio short:
<script src="https://www.youtube.com/iframe_api"></script>
<script>let activeShort = null; let activeLink = null; function toggleShort(link, id)
// jika yang sama diklik lagi → matikan
{if (activeLink === link) {document.getElementById("shortContainer").innerHTML = "";
activeLink.style.color = ""; activeLink = null; return;}
// matikan yang sebelumnya
if (activeLink) activeLink.style.color = "";
document.getElementById("shortContainer").innerHTML = "";
activeLink = link; link.style.color = "red"; // buat container unik
const c = document.createElement("div");
c.style.position = "relative"; c.style.paddingBottom = "177.77%";
c.style.height = "0"; c.style.maxWidth = "100%";
c.style.overflow = "hidden"; const p = document.createElement("iframe");
p.src = "https://www.youtube.com/embed/" + id + "?autoplay=1&playsinline=1";
p.style.position = "absolute";
p.style.top = 0; p.style.left = 0; p.style.width = "100%"; p.style.height = "100%";
p.setAttribute("frameborder", "0"); p.setAttribute("allow", "autoplay; encrypted-media");
c.appendChild(p); document.getElementById("shortContainer").appendChild(c);}</script>
Tema bloger
5-Blogger
style>body {background: radial-gradient(circle, #111 0%, #000 100%); color: white; padding: 10px;}</style>
Text berkedip
6-Blogger
<!--Script Emoji Berkedip
<span class="blink-emoji">➡️</span>-->
<style> .blink-emoji { animation: blink 3s infinite; }
@keyframes blink {0%, 100% { opacity: 1; }
50% { opacity: 0; }} </style>
Neon hitam
7-Blogger
<!--π³π³π³π³π³π³-->
<!--➖CSS Tulisan dengan Neon hitam berkedip
Kontainer:
<div id="neon-hitam">lettakkan text disini"> </div>-->
<style>#neon-hitam {animation: neon-flicker 1.8s infinite alternate;
text-align: left; line-height: 1.0}
@keyframes neon-flicker {0% { text-shadow: 0 0 4px #000, 0 0 10px #000; }
50% { text-shadow: 0 0 14px #000, 0 0 20px #000; }
100% { text-shadow: 0 0 4px #000, 0 0 10px #000; }}</style>
Full width
8-Blogger
<!--π³π³π³π³π³π³Kontainer Fullwidth fullScreen
Link:
<div class="fullwidth">CSS:-->
<style>html, body {margin: 0; padding: 0; box-sizing: border-box;}
.fullwidth{ /*float atau tampa float */
background:transparent; /*background kontainer */
border-radius: 5px;
border: 0px dashed red; /*pengaturan border */
padding: 0px; top: 0px} /*pengaturan padding disni */
/* Mobile: full lebar layar */
@media (max-width: 760px)
{.fullwidth{width: 100vw; /*pengaturan Width di seluler */
position: relative; left: -67%; margin-left: 61vw;}}
/* Desktop: batasi agar tidak masuk sidebar */
@media (min-width: 760px)
{.fullwidth{width: 100%; /*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>
Fx 1.2
01-Data
☀ Warna & Opacity Dinamis
| π― Hex | |
| π RGBA | |
| π«️ Opacity | |
| π¨ RGB | |
| π Alpha (0–1) | |
| π Variabel Warna | |
Kode warna html:
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
Pesan tersembunyi
10-Blogger
<!--Display:
<div id="noteContainer2" style="display: none; margin-top: 20px;"></div>
<div id="noteContainer3" style="display: none; margin-top: 20px;"></div>
Kontainer pesan:
<div hidden="" id="note0">
Link ontainer:
<a onclick="toggleNote('note1','noteContainer2')" style="cursor: pointer;">Fx 1.2</a>
➖Css pesan tersembunyi-->
<script>
function toggleNote(noteId, containerId)
{let containers = document.querySelectorAll("div[id^='noteContainer']");
const container = document.getElementById(containerId);
const note = document.getElementById(noteId);
if (container && note && container.style.display === "block" && container.innerHTML === note.innerHTML) {
container.style.display = "none"; return;}
containers.forEach(c => c.style.display = "none");
if (container && note) { container.innerHTML = note.innerHTML;
container.style.display = "block"; }}</script>
<style>
html, body {margin: 0; padding: 0; box-sizing: border-box;}
.fullwidth{ background:transparent; border-radius: 5px; border: 0px dashed red; padding: 0px; top: 0px}
@media (max-width: 760px) {.fullwidth{width: 100vw; position: relative; left: -67%; margin-left: 61vw;}}
@media (min-width: 760px) {.fullwidth{width: 100%; max-width: 800px; }}</style>
Pengaturan Li
11Blogger
!--π³π³π³π³π³π³
➖CSS pengaturan Li 2 kolom di dextop, 1 kolom di seluler
<div class="two-col"><ol>
<li>input text</li></ol>
<ol start="21">
<li>input text</li></ol> -->
<style>.two-col { display: flex; gap: 10px;}
.two-col ol { margin: 0; padding-left: 20px; line-height: 1.5;}
.two-col ol li { background: transparent;
color: white; font-family: "arial", sans-serif;
font-size: 15px; padding: 4px 6px;}
.two-col ol li::marker { color: white;}
.two-col ol li:hover { background: rgba(0, 0, 255, 0.34);}
/* HP 1 kolom */
@media (max-width: 600px) {.two-col {flex-direction: column; gap: 10px;}}</style>
Background gambar
12-Blogger
<div style="background-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjoxmHHd0AVylDt3HMHYyxVzrfYyO-L1Lz-ntej2zwZy8cWNGmiJd5H713hq9DugOTpxjxbO2GTLLJ9Nb97A3B_c2rrJi_JRX3HGx8jw-YmD73J2a7ke44cb5bKzonib8sr0nGr9KAYHEqYwfDycp-1Zwl3PI505l9q_AHY9TgbJVOpUI5jD2VdrA2GCII/s3200/21103534_1685828784780762_782632547_o.jpg'); background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; height: auto; width: 100%;">input text</div>
Fx 1.22
13-Blogger
<!--π³π³π³π³π³π³-->
<!--π³π³π³π³π³π³
CSS dan Script display vidio embed youtube
<!--➖Display Vidio-->
<div id="tvContainer"><iframe allowfullscreen="" id="tvFrame" src=""></iframe></div>
Link VIDIO :
<a data-src="https://www.youtube.com/embed/ZUdJQSUcK_Y" onclick="toggleTV(this)">Disco Dancer - Jimmi Jimmi</a>-->
<style>
/* Diubah menjadi display: none agar tersembunyi saat awal dimuat */
#tvContainer {display: none; margin: 10px 0;}
/* Wajib agar iframe punya ukuran benar */
#tvFrame {width: 100%; aspect-ratio: 16/9; border: none;}
</style>
<!--➖Script Vidio Chanell-->
<script>function toggleTV(el) {var frame = document.getElementById("tvFrame");
var container = document.getElementById("tvContainer");
var videoURL = el.getAttribute("data-src");
// Jika video yang sama sedang ON → klik lagi untuk OFF
if (frame.dataset.current === videoURL)
{frame.src = ""; frame.dataset.current = "";container.style.display = "none";
// kembalikan warna normal
el.style.color = "";
el.style.fontWeight = ""; return; }
// Jika ON dengan link baru → ganti video
frame.src = videoURL; frame.dataset.current = videoURL;
container.style.display = "block";
// Reset semua link
document.querySelectorAll("#daftarChannel a").forEach(a=>
{ a.style.color = ""; a.style.fontWeight = ""; });
// Ubah warna untuk yang diklik
el.style.color = "red"; el.style.fontWeight = "bold";}
["fullscreenchange","webkitfullscreenchange","mozfullscreenchange","MSFullscreenChange"]
.forEach(eventName => { document.addEventListener(eventName, () =>
{if (document.fullscreenElement) {if (screen.orientation && screen.orientation.lock)
{ screen.orientation.lock("landscape").catch(()=>{});}} });});</script>
<!--π³π³π³π³π³π³-->
Header
14-Blogger
<!--Heade tampa tombol Copy
<div style="align-items: center; background: gray; border: 0px solid black; box-sizing: border-box; color: white; display: flex; justify-content: space-between; padding: 3px;">
<div style="align-items: center; display: flex; gap: 12px; text-align: left;">
<span face="sans-serif">Strategi Fx 1.21</span>
<span face="sans-serif" style="background: silver; border-radius: 10px; color: black; font-size: 12px; padding: 2px 10px;">12-Data</span></div></div>
Fx 1.22
15-Blogger
Input data disini
Sebuah Simfoni Kuantitatif Multi-Timeframe Berbasis Mitigasi Risiko & Psikologi Audio