Inilah cara Bikin Box Kode HTML Keren di Blogger (Gampang Banget!)

Hai, parabloger! Pernah nggak sih pengen nampilin kode HTML di artikel kamu, tapi bingung bagaimana caranya biar gak rumit dan mudah dibaca? Nah, di tutorial kali ini, kita bakal belajar cara membuatkotakHTML keren di Blogger. Dijamin kode kamu jadi lebih terstruktur dan mudah dicopy sama pembaca. Yuk, simak!

Lihat pratinjau

Kenapa Sih Harus Pake Box Kode?

• Lebih Rapi:Kode kamu jadi nggak nyampur sama teks artikel.

• Gampang Dibaca:Pakehurufkhusus buat kode bikin lebih jelas.

• Gampang Dicopy:pembaca bisa langsungsalin-tempelkode tanpa ribet.

• Keterampilan Profesional:Blog kamu jadi keliatan lebih keren dan terpercaya.

Cara Bikin Box Kode HTML di Blogger:

Ada beberapa cara untuk membuatkotakkode HTML di Blogger. Kita bakal bahas yang paling mudah dan paling umum dipake:

Cara 1: Pake Tag<sebelum>dan<kode>(Cara Dasar)

Ini cara paling sederhana, tapi hasilnya lumayan lah buat pemula.

1. Buka Editor Artikel di Blogger:Berbikinimempostingbaru atau editmempostingyang sudah ada.

2. Pilih Mode "Tampilan HTML":Di editor, biasanya ada dua mode: "Compose View" (buat nulis biasa) dan "HTML View" (buat ngedit kode HTML). Pilih yang "Tampilan HTML".

3. Masukkan Kode Berikut:

      <pre><code>
[Kode HTML kamu di sini]
</code></pre>

    

Gunakan kode dengan hati-hati .Bahasa Indonesia: Html

1. Ganti[Kode HTML Anda di sini]sama kode HTML yang ingin kamu tampilkan.

2. Klik "Publikasikan" atau "perbarui":Buat itu hasilnya.

Contoh:

      
<pre><code>
<h1>Halo Dunia!</h1>
<p>Ini adalah contoh paragraf.</p>
</code></pre>

    

Gunakan kode dengan hati-hati .Bahasa Indonesia: Html

Kekurangan Cara Ini:

• Tampilannya standar banget, gak bisa dikustomisasi.

• Tidak ada tombolmenyalin.

Cara 2: Pake CSS Biar Lebih Keren (Agak Ribet, Tapi Worth It!)

Kalo kamu taukotakkode kamu lebih keren, kamu bisa menambahkan CSS (Cascading Style Sheets).

1. Buka "Tema" di Dasbor Blogger:Di menu sebelah kiri, klik "Tema".

2. Klik "Sesuaikan" (Customize):Pada tema yang kamu pakai, klik tombol "Sesuaikan".

3. Klik "Lanjutan" (Lanjutan):Di menu "Sesuaikan", klik "Lanjutan".

4. Tambahkan CSS Berikut di Bagian "Tambahkan CSS":

      
pre {
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  padding: 10px;
  overflow: auto;
  font-family: Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
}

code {
  background-color: transparent;
  padding: 0;
  border: none;
}
    

Gunakan kode dengan hati-hati .Bahasa Inggris

1. Klik "Simpan" :Buat perubahan CSS.

2. Ulangi Langkah 1-5 pada Cara 1:Buat nampilin kode di artikel kamu.

Penjelasan CSS:

• warna latar belakang: Warna latar belakangkotak.

• berbatasan: Garis tepikotak.

• lapisan: Jarak antara kode yang samakotak.

• luapan: otomatis: Biarbilah gulirmuncul kalo kodenya panjang.

• keluarga font:Jenishurufyang dipake buat kode (Consolas itu bagus buat kode).

• ukuran font: Ukuranhuruf.

• tinggi garis: Jarak antar baris.

Kekurangan Cara Ini:

• Tidak ada tombolmenyalin.

• Harus mengedit tema CSS.

Cara 3: Pake Javascript Buat Tambahin Tombol Copy (Paling Keren!)

Nah, kalau kamu tahukotakkode kamu ada tombolmenyalin-nya, kamu harus pake Javascript.

1. Tambahkan CSS di Tema (Sama Kayak Cara 2):Ikutin langkah 1-5 di Cara 2 buat tambahin CSS berikut:

      
.code-box {
  position: relative;
  background-color: #f4f4f4;
  border: 1px solid #ddd;
  padding: 10px;
  overflow: auto;
  font-family: Consolas, monospace;
  font-size: 14px;
  line-height: 1.5;
}

.code-box pre {
  margin: 0;
}

.code-box button {
  position: absolute;
  top: 5px;
  right: 5px;
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 12px;
  cursor: pointer;
}
    

Gunakan kode dengan hati-hati .Bahasa Inggris

1. Tambahkan Javascript di Bawah Tag<tubuh>:

   • Di dasbor Blogger, klik "Tema".

   • Klik "Edit HTML" (Edit HTML).

   • Cari tag<tubuh>. Biasanya ada di deket awal kode HTML.

   • Tempel kode Javascript berikut tepat di bawah tag <body>:

      
<script>
function copyCode(element) {
  var code = element.querySelector("pre code").innerText;
  navigator.clipboard.writeText(code);
  alert("Kode berhasil dicopy!");
}
</script>

    

Use code with caution.Html

1. Simpan Tema: Klik ikon "Simpan" (ikon disket) di pojok kanan atas.

2. Masukkan Kode HTML di Artikel Kamu:

      
<div class="code-box">
  <button onclick="copyCode(this.parentNode)">Copy</button>
  <pre><code>
[Kode HTML kamu di sini]
  </code></pre>
</div>
    

Use code with caution.Html

1. Ganti [Kode HTML kamu di sini] sama kode HTML yang pengen kamu tampilin.

2. Klik "Publikasikan" atau "Perbarui": Buat liat hasilnya.

Penjelasan Javascript:

• copyCode(element): Fungsi Javascript buat copy kode.

• navigator.clipboard.writeText(code): Buat copy kode ke clipboard.

• alert("Kode berhasil dicopy!"): Buat nampilin pesan kalo kode udah berhasil dicopy.

Kelebihan Cara Ini:

• Tampilannya keren (bisa dikustomisasi pake CSS).

• Ada tombol copy.

Kekurangan Cara Ini:

• Agak ribet karena harus nambahin Javascript.

Kesimpulan:

Sekarang kamu udah tau gimana caranya bikin box kode HTML keren di Blogger. Pilih cara yang paling sesuai sama kemampuan dan kebutuhan kamu. Jangan takut buat bereksperimen sama CSS buat bikin box kode kamu makin unik. Selamat mencoba!