Blog spot

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: black; color: white; padding: 0px;}</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

⭕ 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

Fx 1.22 10-Blogger

Input data disini

Fx 1.22 11Blogger

Input data disini

Fx 1.22 12-Blogger

Input data disini

Fx 1.22 13-Blogger

Input data disini