Cara Membuat Tools Parse Code HTML di Blogger Mudah dan Praktis

Daftar Isi

Membuat alat atau tools parse code HTML sendiri di platform Blogger sebetulnya sangat mudah. Anda tidak perlu memiliki keahlian koding tingkat lanjut karena prosesnya hanya mengandalkan penyalinan skrip sederhana ke halaman statis blogspot Anda.

Penerapan Tools Parse Code HTML di Blogspot - qowim.net

Apa itu Parse HTML dan Mengapa Penting?

Istilah parse awalnya berasal dari disiplin ilmu linguistik yang mengacu pada penguraian komponen bahasa. Dalam dunia komputer dan pemrograman, parse HTML berarti proses mengonversi karakter khusus pada kode script menjadi karakter entitas HTML (HTML entities) agar dapat ditampilkan sebagai teks biasa tanpa dieksekusi oleh peramban browser.

Ketika Anda menulis artikel tutorial koding atau modifikasi template Blogger, menyisipkan kode mentah secara langsung sering kali membuat tampilan postingan berantakan atau bahkan kodenya hilang. Di sinilah peran penting tools parse HTML untuk mengubah karakter simbol sebelum diterbitkan.

Contoh Konversi Karakter HTML:
1. Simbol karakter > dikonversi menjadi >
2. Simbol karakter < dikonversi menjadi &lt;
3. Tanda petik tunggal ' dikonversi menjadi &#039;
4. Tanda petik ganda " dikonversi menjadi &quot;
5. Simbol ampersand & dikonversi menjadi &amp;

Fasilitas pengonversi ini umumnya sangat dibutuhkan oleh situs dengan pembahasan seputar tutorial blogging, pemicu modifikasi CSS, hingga pembuatan script interaktif. Anda dapat melihat demo alat ini secara langsung melalui tautan di bawah ini:

Langkah-Langkah Membuat Tools Parse Code HTML di Blogger

Untuk memasang alat pengonversi kode ini ke dalam halaman statis Blogspot Anda, silakan ikuti panduan langkah demi langkah berikut ini:

1. Masuk ke dashboard utama Blogger Anda.

2. Pada menu navigasi sebelah kiri, pilih menu Halaman (Pages), lalu klik Buat Halaman Baru.

3. Ubah mode tampilan editor tulisan dari mode Tampilan Menulis (Compose) menjadi mode Tampilan HTML.

4. Salin seluruh skrip HTML dan JavaScript berikut, lalu tempelkan ke dalam editor halaman tersebut:

<script type="text/javascript">
function convert(){
  var ele1 = document.getElementById("somewhere");
  var replaced;
  replaced = ele1.value;
  replaced = replaced.replace(/&/ig, "&amp;");
  replaced = replaced.replace(/</ig, "&lt;");
  replaced = replaced.replace(/>/ig, "&gt;");
  replaced = replaced.replace(/"/ig, "&quot;");
  replaced = replaced.replace(/&#177;/ig, "&plusmn;");
  replaced = replaced.replace(/&#169;/ig, "&copy;");
  replaced = replaced.replace(/&#174;/ig, "&reg;");
  replaced = replaced.replace(/ya'll/ig, "ya'll");
  ele1.value = replaced;
}
</script>

<p>Silakan tempel kode HTML yang ingin Anda konversi ke dalam kotak di bawah ini, lalu klik tombol <strong>Parse HTML</strong>.</p>

<style>
.btn-parse {
  background-color: var(--color-scheme-bg, #3949AB);
  color: #ffffff;
  border: none;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  cursor: pointer;
  float: right;
  margin-top: 10px;
}
.btn-parse:hover {
  opacity: 0.9;
}
.parse-textarea {
  width: 100%;
  height: 250px;
  background-color: var(--lightest-grey, #f8f9fa);
  color: var(--dark-grey, #484f5b);
  border: 1px solid var(--light-grey, #e1e7ec);
  border-radius: 6px;
  padding: 10px;
  font-family: monospace;
  box-sizing: border-box;
}
</style>

<div style="margin: 20px 0; overflow: hidden;">
  <textarea id="somewhere" class="parse-textarea" placeholder="Tempelkan kode di sini..."></textarea>
  <input type="button" class="btn-parse" value="Parse HTML" onclick="convert();" />
</div>

5. Setelah menempelkan kode di atas, berikan judul halaman seperti Tools Parse HTML.

6. Tekan tombol Publikasikan untuk menyimpan halaman tersebut.

Kesimpulan

Dengan memiliki alat pengonversi kode mandiri di blogspot, Anda dapat dengan mudah mengelola artikel-artikel teknis tanpa khawatir terjadi galat tampilan. Selain mempermudah proses penulisan tutorial koding, ketersediaan alat ini pada halaman statis juga berpotensi meningkatkan jumlah kunjungan berulang serta memperbaiki retensi pembaca di situs Anda.