Cara Memasang Tool HTML Character Encoder di Blog Kamu

Updated: 26 Jul, 2025 • 0 • min read

Table of Contents

Ilustrasi: Tool HTML Character Encoder

Asik-Belajar - Jika kamu sering menulis tutorial HTML atau membagikan potongan kode di blog, kamu pasti tahu pentingnya mengubah karakter khusus seperti <, > dan & menjadi HTML entities.

Untuk memudahkan itu, kamu bisa memasang tool HTML Character Encoder langsung di halaman blog kamu sendiri. Dalam artikel ini, kita akan belajar bagaimana cara memasangnya, dan kamu bisa melihat demonya langsung di situs:

👉 https://asik-belajar.blogspot.com/p/encoder-html.html

📌 Apa Fungsi Tool HTML Character Encoder?

Tool ini berfungsi untuk:

Mengubah karakter seperti &, <, >, ", ' menjadi bentuk aman di HTML (&, <, dll).
Mencegah error saat menampilkan kode di blog.
Membantu blogger dan developer menulis artikel dengan elemen HTML tanpa merusak tampilan.

✨ Fitur Tool Ini

Teks input dan hasil output ditampilkan langsung.
Tampil rapi dan responsif di desktop maupun mobile.
Warna tetap konsisten: putih dan hitam, tidak terpengaruh tema gelap blogspot.
Tidak mengubah tampilan header, menu, atau layout blog kamu.

🛠️ Cara Memasang Tool di Blogspot

Ikuti langkah-langkah berikut:

Masuk ke Blogger
Buka blogger.com dan login ke blog kamu.
Buat Halaman Baru
- Pilih menu Halaman > Halaman Baru.
- Judul bebas, contoh: HTML Encoder Tool.
Masuk ke Mode HTML
Klik icon <> atau pilih HTML View agar kamu bisa memasukkan kode HTML langsung.

Tempelkan Kode Berikut
Salin dan tempel kode di bawah ini:

<!-- Kode Tool HTML Encoder - dari asik-belajar.blogspot.com -->
<div id="html-encoder-tool">
  <h2>HTML Character Encoder Tool</h2>

  <label for="inputText">Masukkan Teks:</label>
  <textarea id="inputText" placeholder="Masukkan teks yang ingin di-encode..."></textarea>

  <label for="outputText">Hasil Encode HTML:</label>
  <textarea id="outputText" readonly placeholder="Hasil encoding akan muncul di sini..."></textarea>

  <div class="footer">© 2025 AdinJava - Tool EnCoder HTML sederhana</div>
</div>

<style>
  #html-encoder-tool {
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
    background-color: white !important;
    color: black !important;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
    font-family: Arial, sans-serif;
  }

  #html-encoder-tool *,
  #html-encoder-tool textarea,
  #html-encoder-tool label,
  #html-encoder-tool h2 {
    color: black !important;
    background-color: white !important;
    box-sizing: border-box;
  }

  #html-encoder-tool h2 {
    text-align: center;
    margin-bottom: 15px;
  }

  #html-encoder-tool label {
    display: block;
    margin-bottom: 8px;
    font-weight: bold;
  }

  #html-encoder-tool textarea {
    width: 100%;
    height: 140px;
    padding: 10px;
    font-family: monospace;
    font-size: 16px;
    border-radius: 5px;
    border: 1px solid #ccc;
    resize: vertical;
    caret-color: black !important;
  }

  #html-encoder-tool textarea[readonly] {
    background-color: #eee !important;
  }

  #html-encoder-tool .footer {
    text-align: center;
    margin-top: 15px;
    font-size: 14px;
    color: #555 !important;
  }

  @media (max-width: 600px) {
    #html-encoder-tool textarea {
      font-size: 14px;
      height: 120px;
    }
  }
</style>

<script>
  function encodeHTML(str) {
    if (!str) return '';
    return str.replace(/&/g, '&amp;')
              .replace(/</g, '&lt;')
              .replace(/>/g, '&gt;')
              .replace(/"/g, '&quot;')
              .replace(/'/g, '&#39;');
  }

  const inputText = document.getElementById('inputText');
  const outputText = document.getElementById('outputText');

  inputText.addEventListener('input', () => {
    outputText.value = encodeHTML(inputText.value);
  });
</script>

Simpan & Publikasikan
Klik Publikasikan, dan kamu sekarang sudah punya halaman tool encoder sendiri!

📍 Demo dan Sumber Asli

Jika kamu ingin melihat tampilan tool ini secara langsung, kunjungi:
👉 https://asik-belajar.blogspot.com/p/encoder-html.html

Untuk keterangan lebih lanjut terkait encoder HTML ini silahkan buka di sini

👉 https://asik-belajar.blogspot.com/2010/02/html-character-encoder.html

🔁 Siap Dipakai dan Dibagikan

Kamu bisa membagikan halaman ini kepada teman blogger atau pengunjung yang butuh encode teks HTML untuk membuat artikel lebih aman dan rapi.

Butuh tambahan fitur seperti copy ke clipboard atau decode juga? Tinggal tinggalkan komentar atau kunjungi asik-belajar.blogspot.com untuk update dan versi lanjutan.

Asik belajar blog