Cara Memasang Tool HTML Character Decoder di Blog Kamu

Updated: 26 Jul, 2025 • 0 • min read

Table of Contents

Ilustrasi: Tool HTML Character Decoder

Asik-Belajar - Jika kamu sering menyalin kode dari internet, forum, atau CMS seperti WordPress, kamu pasti sering menjumpai karakter HTML yang masih ter-encode, seperti <div>, &, atau ". Nah, dengan HTML Character Decoder, kamu bisa dengan mudah mengubahnya kembali ke bentuk normal hanya dengan satu klik.

Artikel ini akan membahas cara memasang tool decoder HTML langsung di blog kamu, lengkap dengan tutorial dan kode siap pakai.

🔗 Referensi & Demo Encoder:

Encoder Tool: https://asik-belajar.blogspot.com/p/encoder-html.html
Artikel Terkait: https://asik-belajar.blogspot.com/2010/02/html-character-encoder.html

🧩 Apa Itu HTML Decoder?

HTML Decoder adalah alat untuk mengubah HTML entities (seperti <, >, &, dll) menjadi karakter aslinya (<, >, &, dll). Tool ini sangat membantu blogger, web developer, maupun penulis tutorial HTML agar kode yang ditampilkan bisa lebih jelas dan tidak membingungkan.

⚙️ Fitur Tool Ini

Real-time decoding: hasil langsung muncul saat mengetik.
Tampilan bersih dan mobile-friendly.
Warna teks dan background tidak terpengaruh tema dark blog.
Tidak mengubah tampilan menu, header, atau tema blog kamu.

🛠️ Cara Memasang Tool di Blogspot

Berikut ini langkah-langkahnya:

Masuk ke Blogger
Login ke blogger.com.
Buat Halaman Baru
- Masuk ke menu Halaman > Halaman Baru.
- Beri judul, misalnya: HTML Decoder Tool.
Pilih Mode HTML
Klik tombol <> untuk masuk ke tampilan HTML.

Tempelkan Kode Tool di Bawah Ini

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

  <label for="inputText">Masukkan Teks HTML Entities:</label>
  <textarea id="inputText" placeholder="Masukkan teks berisi &amp;, &lt;, &gt;, dll..."></textarea>

  <label for="outputText">Hasil Decode:</label>
  <textarea id="outputText" readonly placeholder="Hasil decode akan muncul di sini..."></textarea>

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

<style>
  #html-decoder-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;
    box-sizing: border-box;
  }

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

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

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

  #html-decoder-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-decoder-tool textarea[readonly] {
    background-color: #eee !important;
  }

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

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

<script>
  function decodeHTML(str) {
    if (!str) return '';
    const txt = document.createElement("textarea");
    txt.innerHTML = str;
    return txt.value;
  }

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

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

Simpan dan Publikasikan
Klik Publikasikan. Sekarang kamu punya halaman Decoder HTML sendiri!

💡 Contoh Penggunaan

Jika kamu memasukkan:

&lt;h1&gt;Judul Blog&lt;/h1&gt;

Hasil yang keluar:

<h1>Judul Blog</h1>

📎 Referensi dan Halaman Terkait

🔗 Tool Encoder HTML:
👉 https://asik-belajar.blogspot.com/p/encoder-html.html
📄 Artikel pembahasan:
👉 https://asik-belajar.blogspot.com/2010/02/html-character-encoder.html

🚀 Siap Digunakan & Dibagikan

Dengan memasang HTML Decoder ini di blog, kamu tidak hanya membantu dirimu sendiri, tapi juga pengunjung blog yang ingin menyalin atau membersihkan HTML hasil encode. Cocok untuk blog tutorial, developer, edukasi, dan lainnya.

Ingin fitur tambahan seperti tombol Copy, atau digabung dengan Encoder sekaligus? Tinggal hubungi atau kunjungi blog asik-belajar.blogspot.com untuk versi lanjutan!

Asik belajar blog