Kumpulan Kotak Script HTML Keren untuk Mempercantik Postingan Blogger



Menampilkan kode di dalam artikel blog bisa menjadi tantangan tersendiri. Kotak script yang baik tidak hanya membuat kode tampil rapi, tetapi juga membantu pembaca memahami struktur dan konteksnya dengan lebih jelas. Dalam panduan ini kamu akan belajar apa itu kotak script, bagaimana membuatnya dengan HTML & CSS, serta contoh-contoh kode yang bisa langsung kamu pakai di postingan Blogger.

Apa Itu Kotak Script?

Kotak script adalah area di dalam artikel blog yang digunakan untuk menampilkan kode secara visual rapi, biasanya dibungkus dengan batas, latar kontras, dan kadang disertai tombol salin. Fokus utamanya adalah agar pembaca bisa melihat kode dengan jelas tanpa elemen lain mengganggu.

Kotak script sangat berguna terutama ketika kamu menjelaskan tag HTML, contoh CSS, JavaScript, atau blok kode lain ke pembaca yang ingin belajar pemrograman web.

Artikel-artikel terkait HTML dasar seperti Panduan Lengkap Belajar Tag Dasar HTML bisa dibantu oleh kotak script untuk menampilkan contoh kode secara rapi.

Struktur Dasar Kotak Script dengan HTML

Untuk mulai membuat kotak script yang sederhana, berikut struktur HTML yang paling dasar:

<div class="code-box">
    <pre>
        <code>
            <!-- Kode kamu di sini -->
        </code>
    </pre>
</div>

Penjelasan:

  • <div class="code-box"> – wadah tampilan kotak script
  • <pre> – mempertahankan spasi & enter asli
  • <code> – menandai teks sebagai kode

Contoh lengkap bisa kamu lihat di artikel lain seperti Belajar Pemformatan Teks HTML untuk melihat bagaimana tag <pre> bekerja di dalam real HTML.

CSS Dasar untuk Membuat Kotak Script Lebih Keren

Berikut contoh CSS sederhana agar tampilan kotak script lebih menarik:

.code-box {
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 5px;
    padding: 15px;
    overflow-x: auto;
}
.code-box code {
    font-family: Consolas, "Courier New", monospace;
    color: #333;
}

CSS di atas memberi:

  • Latar kontras putih keabu-abuan
  • Batas tepi (border)
  • Radius sudut untuk estetika
  • Scroll horizontal jika kode panjang

Tambahkan CSS ini ke **tema Blogger → Edit HTML → dalam tag <style> atau ke widget CSS khususmu.

Contoh Kotak Script HTML

Berikut contoh kotak script yang menunjukkan HTML dasar:


<!DOCTYPE html>
<html>
<head>
    <title>Contoh HTML</title>
</head>
<body>
    <h1>Halo Dunia!</h1>
</body>
</html>

Penjelasan singkat:

  • <!DOCTYPE html> – deklarasi HTML5
  • <html> – root dokumen
  • <head> – metadata
  • <body> – konten yang terlihat

Artikel ini berkaitan dengan contoh kode yang sering kamu lihat di artikel lain seperti Cara Membuat Dokumen HTML.

Contoh Kotak Script CSS


body {
    font-family: Arial, sans-serif;
    background: #fff;
    margin: 0;
    padding: 20px;
}

Contoh di atas menunjukkan CSS global untuk body sehingga tampilan halaman jadi lebih rapi dan terbaca.

Cara Menambahkan Tombol Salin (Copy)

Tombol salin sangat bermanfaat agar pembaca bisa menyalin kode dengan sekali klik. Berikut skrip JavaScript yang bisa kamu gunakan:


<button onclick="copyCode(this)">Salin</button>

<script>
function copyCode(el) {
    const codeBlock = el.nextElementSibling.querySelector("code");
    navigator.clipboard.writeText(codeBlock.innerText);
    el.innerText = "Tersalin!";
}
</script>

Letakkan tombol di atas kotak script, dan kode JavaScript di bawahnya. Ini akan membuat tombol berfungsi saat diklik.

Selain itu, jika kamu ingin tombol salin tetap di tempat saat scroll horizontal, kamu bisa baca artikel lanjutan tentang CSS positioning.

Tips Membuat Kotak Script yang Baik

  • Jangan terlalu panjang di satu baris — gunakan scroll horizontal.
  • Berikan warna kontras agar kode terbaca jelas.
  • Pakai font monospace agar tampilan konsisten.
  • Tambahkan tombol salin untuk kemudahan pembaca.

Untuk kamu yang sedang belajar membuat tampilan responsif, artikel Cara Membuat Website Responsif juga penting dipelajari agar kotak script tampil baik di semua ukuran layar.

Kesalahan Umum Saat Membuat Kotak Script

Berikut beberapa kesalahan yang sering terjadi:

  • Kotak script tidak scroll → artinya overflow-x belum aktif.
  • Garis batas tidak terlihat → border terlalu tipis atau warna serupa.
  • Kode tidak rapi → tidak pakai tag <pre> & <code>.
  • Tombol salin error → biasanya karena script tidak sesuai urutan DOM.

Jika kamu menemukan error pada kode HTML, artikel Cara Memperbaiki Kesalahan pada HTML bisa membantu.

Kesimpulan

Kotak script adalah alat penting untuk menampilkan contoh kode secara profesional dan ramah pembaca. Dengan pemahaman struktur HTML + CSS + JavaScript yang benar, kamu bisa membuat kotak script yang rapi, nyaman dibaca, dan mudah disalin. Ini meningkatkan pengalaman belajar bagi pembaca dan membuat artikel kamu lebih berguna.

Silakan lanjut eksplorasi dengan artikel lain seperti Panduan Lengkap Belajar Elemen HTML atau Cara Menggunakan JavaScript pada HTML untuk memperdalam pemahaman kamu.

Label: