Cara Membuat Halaman Parse HTML Sendiri di Blogspot

Apa itu Parse HTML?

Parse HTML, kata parse dalam Bahasa Inggris berarti mengurai. Dari definisi tersebut Parse HTML adalah mengubah kode-kode atau tanda-tanda tertentu menjadi kode entitas (kode unik). Kode-kode yang biasanya diubah yaitu ‘tanda lebih kecil’ (<), ‘petik dua’ ("), ‘ampersand’ (&), ‘petik satu’ ('), ‘tanda lebih besar’ (>). Kode-kode tersebut akan diubah menjadi kode-kode yang unik (kode entitas) seperti berikut ini:

& diganti dengan &
< diganti dengan <
> diganti dengan >
" diganti dengan "
' diganti dengan '


Apa Fungsi Parse HTML?

Melakukan parse html ini bukanlah tanpa alasan. Melakukan parse HTML merupakan cara yang harus dilakukan supaya web tidak error saat dibuka melalui browser. Selain itu parse html dilakukan dengan tujuan supaya kode html lebih SEO Friendly dan juga valid HTML5.

Sebenarnya parse HTML tidak hanya berlaku untuk kode iklan saja. Semua kode HTML bisa di parse terlebih dahulu supaya tidak error saat ditampilkan di browser.

Cara Membuat Halaman Parse HTML sendiri di Blogger:

Caranya sangat mudah untuk membuat suatu halaman Blogger yang berfungsi sebagai halaman untuk memparse kode seperti yang dijelaskan sebelumnya. Hanya dengan 2 langkah, halaman parse anda langsung jadi dan siap digunakan. Langsung saja langkahnya yaitu:

1. Masuk ke dashboard blog anda. Buat halaman (static page) baru dengan memilih menu "Halaman" dan klik Halaman Baru. Pilih mode HTML dan paste kode dibawah ini:

<div style="text-align: center;">
<b><span style="font-size: large;">PARSE</span></b></div>
<!--more--><br />
<textarea id="codes" placeholder="Tulis/salin kode anda di sini kemudian pilih 'Parse'" spellcheck="false" style="height: 450px; margin: 0px; width: 100%;"></textarea>
</br>
<div class="button-group">
<button id="convert" onclick="cdConvert();this.disabled = true;">Parse</button></br></br><button onclick="cdClear();">Clear</button></div>
</br>
<input checked="true" id="opt1" type="checkbox" /><code>&amp;</code> diganti dengan <code>&amp;amp;</code>
</br>
<input checked="true" id="opt2" type="checkbox" /><code>&lt;</code> diganti dengan <code>&amp;lt;</code>
</br>
<input checked="true" id="opt3" type="checkbox" /><code>&gt;</code> diganti dengan <code>&amp;gt;</code>
</br>
<input checked="true" id="opt4" type="checkbox" /><code>"</code> diganti dengan <code>&amp;quot;</code>
</br>
<input id="opt5" type="checkbox" /><code>'</code> diganti dengan <code>&amp;#039;</code>
</br>
</br>
<ul></ul>
<style type="text/css">
code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;}
#codes{font:13px 'Courier New',Monospace;border:1px solid #e9e9e9;width:550px;height:250px;margin:0 auto;display:block;background-color:#f3f3f3;color:#333;padding:15px;}
.button-group{margin:0 auto 0;text-align:center}
button,button[disabled]:active{border: none;padding: 9px 72px;color: #fff;background-color: #cf0202;cursor: pointer;font-size: 17px;margin: 0 10px;line-height: 23px;border-radius: 3px;transition: all 0.3s ease-in-out;}
button:active{background:#cf0202;}
button[disabled],button[disabled]:active{background:#e9405c;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin-right:10px;}
</style>  <script type="text/javascript">
function cdClear() {
    var wtarea = document.getElementById('codes');
    wtarea.value = '';
    wtarea.focus();
    document.getElementById('convert').disabled = false;
}
function cdConvert() {
    var ctarea = document.getElementById('codes'),
        cv = ctarea.value,
        opt1 = document.getElementById('opt1'),
        opt2 = document.getElementById('opt2'),
        opt3 = document.getElementById('opt3'),
        opt4 = document.getElementById('opt4'),
        opt5 = document.getElementById('opt5');
    cv = cv.replace(/\t/g, "    ");
    if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
    if (opt2.checked) cv = cv.replace(/</g, "&lt;");
    if (opt3.checked) cv = cv.replace(/>/g, "&gt;");
    if (opt4.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt5.checked) cv = cv.replace(/'/g, "&#039;");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>

2. Publikasikan dan lihat hasilnya.

• Demo

Sekian tentang parse HTML, fungsinya dan cara membuat di Blog sendiri.