Cara Membuat Kotak Kode HTML di Artikel Blogger

Jika Anda sering membuat artikel tutorial HTML, CSS, dan JavaScript di Blogger, menampilkan kode dengan format yang rapi sangat penting. Kode yang ditulis langsung sebagai paragraf biasa akan lebih sulit dibaca, terutama ketika memiliki banyak baris, simbol, atau spasi yang harus dipertahankan.

Salah satu solusi yang dapat digunakan adalah membuat kotak kode Blogger atau code box. Dengan menggunakan elemen <pre> dan <code>, kode dapat ditampilkan dalam area khusus sehingga pembaca dapat membedakannya dari penjelasan artikel.

Pada artikel ini, Anda akan mempelajari cara membuat kotak HTML Blogger tanpa CSS eksternal dan tanpa menambahkan font. Pembahasan juga mencakup cara menampilkan HTML, CSS, dan JavaScript, membuat code box responsif di HP, menambahkan tombol salin, serta kesalahan yang perlu dihindari.

Apa Itu Kotak Kode Blogger?

Kotak kode Blogger adalah area khusus di dalam artikel yang digunakan untuk menampilkan potongan kode agar berbeda dari teks biasa. Format ini banyak digunakan pada artikel tutorial pemrograman, tutorial Blogger, panduan HTML, CSS, dan JavaScript.

Contohnya, jika Anda ingin mengajarkan pembaca cara membuat paragraf HTML, kode berikut lebih mudah dipahami jika ditempatkan dalam code box:

<p>Ini adalah paragraf HTML.</p>

Berbeda dengan paragraf biasa, elemen <pre> dirancang untuk mempertahankan whitespace dan format teks tertentu. Hal ini berguna ketika Anda ingin pembaca melihat struktur kode sebagaimana mestinya.

Mengapa Tutorial HTML, CSS, dan JavaScript Membutuhkan Code Box?

Ketika kode ditampilkan sebagai teks biasa, pembaca dapat kesulitan membedakan antara penjelasan dan kode yang harus disalin. Masalah tersebut semakin terasa ketika contoh kode memiliki banyak baris.

Code box dapat membantu karena:

• Kode terlihat berbeda dari teks artikel.
• Struktur beberapa baris kode lebih mudah dipahami.
• Pembaca dapat menemukan kode yang perlu disalin dengan lebih cepat.
• Kode yang panjang dapat ditempatkan dalam area dengan scroll horizontal.
• Artikel tutorial terlihat lebih terstruktur.

Tujuan utama kotak kode bukan sekadar membuat artikel terlihat berbeda, tetapi membantu pembaca mengikuti tutorial tanpa bingung antara instruksi dan kode.

Perbedaan Elemen <pre> dan <code>

Sebelum membuat code box Blogger, penting memahami fungsi dasar kedua elemen HTML yang sering digunakan untuk menampilkan kode.

Elemen	Fungsi	Contoh Penggunaan
<code>	Menandai teks atau potongan kode sebagai kode.	Nama class, atribut, atau kode singkat.
<pre>	Menampilkan teks dengan format whitespace yang dipertahankan.	Kode yang terdiri dari beberapa baris.
<pre><code>	Kombinasi yang umum digunakan untuk blok kode.	Tutorial HTML, CSS, dan JavaScript.

Cara Membuat Kotak Kode HTML di Artikel Blogger

Cara paling sederhana adalah memasukkan elemen <pre> dan <code> langsung ke editor HTML postingan Blogger. Anda tidak perlu memasang library tambahan untuk membuat kotak kode dasar.

Langkah 1: Buka Artikel Blogger

Buka dashboard Blogger dan pilih artikel yang ingin diedit atau buat artikel baru. Gunakan mode HTML pada editor postingan agar Anda dapat mengontrol markup yang digunakan.

Langkah 2: Tentukan Lokasi Kode

Letakkan kotak kode setelah paragraf yang menjelaskan fungsi kode tersebut. Sebaiknya pembaca mengetahui terlebih dahulu apa yang akan dilakukan oleh kode sebelum diminta menyalinnya.

Contoh alur tutorial yang sederhana:

1. Jelaskan fungsi kode.
2. Tampilkan kotak kode.
3. Jelaskan bagian penting dari kode.
4. Berikan instruksi mengenai tempat memasukkan kode.
5. Tunjukkan hasil yang diharapkan.

Langkah 3: Masukkan Kode Kotak

Gunakan struktur dasar berikut untuk membuat kotak kode:

<pre style="margin:0 0 24px; padding:16px; overflow-x:auto; line-height:1.7; background:#f5f5f5; border:1px solid #ddd; border-radius:8px;"><code>KODE ANDA DI SINI</code></pre>

Kode tersebut menggunakan inline style sehingga tidak membutuhkan file CSS tambahan. Anda dapat mengubah warna latar, border, padding, atau radius sesuai kebutuhan desain artikel.

Langkah 4: Masukkan Contoh Kode ke Dalamnya

Misalnya Anda ingin menampilkan kode HTML berikut kepada pembaca:

<div class="kotak">
  <h2>Judul Konten</h2>
  <p>Isi konten berada di sini.</p>
</div>

Perhatikan bahwa ketika HTML ingin ditampilkan sebagai contoh kepada pembaca, karakter tertentu seperti tanda < dan > perlu ditulis dalam bentuk entity HTML agar browser tidak menganggapnya sebagai elemen HTML yang harus dirender.

Karakter	Entity HTML	Kegunaan
<	&lt;	Menampilkan tanda kurang dari.
>	&gt;	Menampilkan tanda lebih dari.
&	&amp;	Menampilkan karakter ampersand.

Cara Menampilkan CSS di Kotak Kode Blogger

CSS juga dapat ditampilkan menggunakan struktur <pre><code>. Misalnya Anda ingin memberikan contoh aturan CSS sederhana:

.kotak-artikel {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
}

Karena CSS tidak menggunakan tanda < dan > pada sebagian besar aturan dasar, proses penampilannya biasanya lebih sederhana dibandingkan ketika menampilkan kode HTML.

Cara Menampilkan JavaScript di Code Box Blogger

JavaScript dapat ditampilkan dengan cara yang sama. Contohnya:

document.addEventListener("DOMContentLoaded", function () {
  console.log("Halaman sudah dimuat.");
});

Jika JavaScript tersebut hanya ingin ditampilkan sebagai contoh tutorial, letakkan sebagai isi <code>. Jika kode benar-benar dimaksudkan untuk dijalankan oleh browser, cara penempatannya berbeda dan perlu menggunakan elemen <script> sesuai kebutuhan.

Cara Membuat Code Box Blogger yang Responsif di HP

Kode program sering kali memiliki baris yang lebih panjang daripada lebar layar smartphone. Jangan memaksa kode tersebut mengecil sampai sulit dibaca. Salah satu solusi yang sederhana adalah menggunakan overflow-x:auto pada elemen <pre>.

Contoh:

<pre style="max-width:100%; overflow-x:auto; padding:16px; line-height:1.7; background:#f5f5f5; border:1px solid #ddd; border-radius:8px;">
  <code>KODE PANJANG ANDA DI SINI</code>
</pre>

Dengan pendekatan tersebut, pembaca dapat menggeser area kode secara horizontal ketika ada baris yang lebih panjang daripada layar. Ini biasanya lebih nyaman daripada membuat seluruh halaman ikut melebar.

Cara Membuat Kotak Kode dengan Tombol Salin

Jika artikel Anda sering menyediakan kode yang harus disalin pembaca, tombol salin dapat menjadi tambahan yang berguna. Tombol tersebut memungkinkan pembaca menyalin isi code box tanpa harus memilih kode secara manual.

Berikut contoh sederhana yang dapat ditempatkan langsung pada artikel:

<div style="margin:0 0 28px;">
  <button type="button" onclick="navigator.clipboard.writeText(document.getElementById('kode-1').innerText)" style="margin:0 0 10px; padding:8px 12px; cursor:pointer;">Salin Kode</button>

  <pre id="kode-1" style="margin:0; padding:16px; overflow-x:auto; line-height:1.7; background:#f5f5f5; border:1px solid #ddd; border-radius:8px;"><code>Contoh kode Anda di sini</code></pre>
</div>

Contoh tersebut menggunakan Clipboard API melalui navigator.clipboard.writeText(). Dukungan dan perilakunya dapat bergantung pada lingkungan browser dan konteks halaman, sehingga sebaiknya selalu diuji setelah dipasang.

Jika menggunakan beberapa code box dengan tombol salin, setiap blok sebaiknya memiliki ID yang berbeda agar tombol mengambil kode dari blok yang benar.

Perlukah Menggunakan Syntax Highlighter?

Syntax highlighter adalah sistem yang memberikan warna atau format berbeda pada bagian tertentu dari kode, seperti tag HTML, property CSS, string, angka, dan fungsi JavaScript.

Untuk tutorial sederhana, Anda tidak harus menggunakan syntax highlighter. Kotak kode dasar sudah cukup jika tujuan utama Anda adalah membuat kode mudah dibaca dan disalin.

Syntax highlighter lebih berguna jika:

• Artikel berisi banyak kode.
• Kode memiliki struktur yang cukup kompleks.
• Anda ingin membedakan jenis kode secara visual.
• Pembaca perlu melihat struktur kode dengan lebih jelas.

Namun, library syntax highlighter biasanya membutuhkan JavaScript dan CSS tambahan. Jika tujuan Anda adalah membuat artikel sederhana tanpa dependensi eksternal, gunakan code box berbasis HTML dan inline style seperti contoh sebelumnya.

Tips Membuat Kotak HTML Blogger yang Nyaman Dibaca

Tampilan code box sebaiknya disesuaikan dengan kebutuhan pembaca, bukan hanya dibuat untuk terlihat menarik.

• Gunakan ukuran teks yang masih nyaman dibaca pada HP.
• Berikan padding agar kode tidak menempel pada tepi kotak.
• Gunakan overflow-x:auto untuk kode yang panjang.
• Jaga jarak antara penjelasan dan code box.
• Gunakan warna latar yang memiliki kontras cukup dengan teks.
• Jangan membuat dekorasi terlalu banyak sehingga kode sulit dibaca.
• Tambahkan tombol salin jika pembaca memang perlu sering menyalin kode.
• Uji code box pada desktop dan HP sebelum artikel diterbitkan.

Contoh Struktur Tutorial yang Menggunakan Code Box

Jika Anda membuat artikel tutorial HTML, CSS, atau JavaScript, struktur berikut dapat membantu pembaca mengikuti langkah dengan lebih mudah.

Bagian	Isi	Tujuan
Penjelasan	Menjelaskan fungsi kode	Memberikan konteks
Code box	Menampilkan kode	Memudahkan pembaca menyalin
Penjelasan kode	Membahas bagian penting	Membantu pembaca memahami
Cara pemasangan	Menjelaskan lokasi kode	Mengurangi kesalahan penerapan
Hasil	Menjelaskan hasil yang diharapkan	Memudahkan pengecekan

Kesalahan yang Perlu Dihindari

1. Menampilkan Kode HTML Tanpa Encoding yang Tepat

Jika tag HTML dimasukkan langsung ke dalam struktur halaman tanpa escaping yang sesuai, browser dapat menganggap tag tersebut sebagai elemen yang harus dirender, bukan sebagai kode yang ingin ditampilkan kepada pembaca.

Karena itu, karakter seperti < dan > perlu diperhatikan ketika Anda menampilkan contoh HTML.

2. Tidak Menggunakan Scroll Horizontal

Kode yang panjang dapat membuat halaman melebar jika tidak ditangani dengan benar. Gunakan area scroll horizontal pada code box agar lebar kode tidak memengaruhi keseluruhan halaman.

3. Membuat Ukuran Teks Terlalu Kecil

Tujuan code box adalah membantu pembaca membaca kode. Jangan mengecilkan ukuran teks terlalu jauh hanya agar banyak kode dapat terlihat sekaligus.

4. Memasukkan Terlalu Banyak Kode Sekaligus

Jika tutorial hanya membutuhkan satu bagian kode, tidak perlu selalu memberikan file lengkap. Tampilkan bagian yang memang perlu diubah atau ditambahkan, kemudian jelaskan lokasinya.

5. Tidak Memberikan Penjelasan Setelah Kode

Kode tanpa penjelasan dapat menyulitkan pembaca pemula. Jelaskan bagian penting, lokasi pemasangan, serta perubahan yang akan terlihat setelah kode diterapkan.

Checklist Sebelum Menerbitkan Artikel Tutorial

Sebelum menerbitkan tutorial yang berisi kode, periksa beberapa hal berikut:

• Kode dapat dibaca dengan jelas.
• Kode HTML sudah ditampilkan dengan encoding yang benar.
• Code box tidak menyebabkan halaman melebar.
• Kode dapat digeser secara horizontal jika diperlukan.
• Lokasi pemasangan kode dijelaskan.
• Hasil setelah kode diterapkan dijelaskan.
• Tampilan sudah diperiksa pada HP.
• Tombol salin diuji jika digunakan.

FAQ tentang Kotak Kode Blogger

Apa itu kotak kode Blogger?

Kotak kode Blogger adalah area khusus dalam artikel yang digunakan untuk menampilkan kode HTML, CSS, JavaScript, atau bahasa pemrograman lainnya agar lebih mudah dibaca dan disalin.

Apakah membuat code box Blogger membutuhkan plugin?

Tidak untuk kebutuhan dasar. Anda dapat menggunakan elemen HTML seperti <pre> dan <code> langsung di artikel. Fitur tambahan seperti syntax highlighting mungkin membutuhkan JavaScript atau CSS tambahan.

Mengapa kode HTML tidak muncul sebagai teks di Blogger?

Kemungkinan kode HTML dimasukkan sebagai markup biasa sehingga browser mencoba merendernya sebagai elemen halaman. Untuk menampilkan tag HTML sebagai teks, karakter khusus seperti tanda kurang dari dan lebih dari perlu di-escape menggunakan entity HTML.

Bagaimana agar code box Blogger tidak merusak tampilan di HP?

Gunakan lebar yang fleksibel dan overflow-x:auto pada area kode. Dengan begitu, kode yang lebih panjang dari layar dapat digeser secara horizontal tanpa membuat seluruh halaman ikut melebar.

Apakah kotak kode bisa diberi tombol copy?

Bisa. Tombol dapat menggunakan Clipboard API untuk menyalin isi code box. Namun, fitur tersebut sebaiknya diuji pada browser yang menjadi target pembaca karena perilaku clipboard dapat bergantung pada lingkungan halaman dan browser.

Apakah syntax highlighter wajib digunakan?

Tidak. Jika kebutuhan Anda hanya menampilkan kode dengan rapi, <pre><code> sudah dapat digunakan. Syntax highlighter merupakan pilihan tambahan jika Anda membutuhkan pewarnaan atau penandaan sintaks.

Kesimpulan

Membuat kotak kode Blogger tidak harus rumit. Dengan menggunakan elemen <pre> dan <code>, Anda sudah dapat membuat area khusus untuk menampilkan HTML, CSS, dan JavaScript secara lebih rapi di dalam artikel.

Jika artikel ditujukan untuk pembaca yang menggunakan HP, perhatikan juga tampilan responsif. Gunakan overflow-x:auto untuk kode yang panjang, berikan jarak yang cukup, dan jangan membuat ukuran teks terlalu kecil.

Untuk tutorial yang sering menyediakan kode untuk disalin, tombol copy dapat menjadi tambahan yang berguna. Sementara itu, syntax highlighter dapat digunakan jika Anda membutuhkan tampilan kode yang lebih detail.

Yang paling penting, code box sebaiknya menjadi bagian dari penjelasan yang lengkap. Jelaskan fungsi kode, lokasi pemasangan, dan hasil yang diharapkan agar pembaca tidak hanya menyalin kode, tetapi juga memahami cara menggunakannya.