📋 Kotak Script untuk Blog

Salin kode di bawah ini untuk digunakan di postingan blog Anda

HTML

<!-- Struktur HTML Dasar -->
<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <title>Judul Halaman</title>
</head>
<body>
  <h1>Halo Dunia!</h1>
</body>
</html>

CSS

/* Styling untuk Tombol Modern */
.tombol {
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: white;
  padding: 12px 24px;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.tombol:hover {
  transform: translateY(-2px);
}

JavaScript

// Fungsi untuk menyapa pengguna
function sapa(nama) {
  const pesan = `Halo, ${nama}! Selamat datang 👋`;
  return pesan;
}

// Event listener untuk tombol
document.querySelector('.tombol')
  .addEventListener('click', () => {
    const hasil = sapa('Pengunjung');
    console.log(hasil);
  });

🔧 Kode CSS untuk Blog Anda

Tambahkan CSS ini ke template blog Anda (Edit HTML → sebelum </head>):

Template CSS

<style>
/* Kotak Kode untuk Blogger */
.code-box {
  background: linear-gradient(135deg, #1e1e2e 0%, #2d2d3f 100%);
  border: 1px solid #3d3d5c;
  border-radius: 12px;
  overflow: hidden;
  margin: 20px 0;
  font-family: 'Consolas', 'Monaco', monospace;
}

.code-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

.code-dots {
  display: flex;
  gap: 6px;
}

.code-dots span {
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.code-dots .red { background: #ff5f56; }
.code-dots .yellow { background: #ffbd2e; }
.code-dots .green { background: #27ca40; }

.code-lang {
  font-size: 13px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 4px;
}

.code-lang.html { color: #ff7b72; }
.code-lang.css { color: #79c0ff; }
.code-lang.js { color: #ffd700; }

.copy-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255,255,255,0.1);
  border: none;
  border-radius: 6px;
  color: white;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.copy-btn:hover {
  background: rgba(255,255,255,0.2);
}

.code-content {
  padding: 16px;
  overflow-x: auto;
}

.code-content pre {
  margin: 0;
  color: #e6e6e6;
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/* Toast Notification */
.copy-toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 12px 20px;
  background: #10b981;
  color: white;
  border-radius: 8px;
  font-weight: 500;
  z-index: 9999;
  animation: slideIn 0.3s ease;
}

@keyframes slideIn {
  from { transform: translateX(100px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}
</style>

<script>
function copyCode(id) {
  const code = document.getElementById(id);
  const text = code.innerText || code.textContent;
  
  navigator.clipboard.writeText(text).then(() => {
    const toast = document.createElement('div');
    toast.className = 'copy-toast';
    toast.textContent = '✓ Kode berhasil disalin!';
    document.body.appendChild(toast);
    
    setTimeout(() => toast.remove(), 2000);
  });
}
</script>

📝 Cara Pakai di Postingan

Gunakan struktur HTML ini saat menulis postingan (mode HTML):

Struktur Postingan

<div class="code-box">
  <div class="code-header">
    <div class="code-dots">
      <span class="red"></span>
      <span class="yellow"></span>
      <span class="green"></span>
    </div>
    <span class="code-lang html">HTML</span>
    <button class="copy-btn" onclick="copyCode('kode1')">
      📋 Salin
    </button>
  </div>
  <div class="code-content">
    <pre id="kode1">Kode Anda di sini...</pre>
  </div>
</div>

💡 Tips: Ganti html dengan css atau js pada class code-lang untuk bahasa berbeda. Jangan lupa ganti ID kode1 menjadi unik untuk setiap kotak kode!