Tutorial Cara Membuat Alat Parse HTML atau HTML Converter

Bagi pengguna platform Blogger, memiliki blog yang dilengkapi alat-alat pendukung nge-blog bisa menjadi suatu keharusan. HTML Parser salah satunya. Banyak blogger telah memasang alat parse HTML di blog mereka dan umumnya siapapun bisa memakainya. Namun, pastinya Kamu juga ingin membuat HTML Parser sendiri, kan?

Lalu, bagaimana cara membuat alat Parse HTML di blog? caranya sangatlah mudah, namun bukankah Kamu juga harus tahu apa itu HTML Parser, dan apa fungsinya?. Parse berarti mengurai atau bisa juga mengubah. Kita perlu mengurai kode HTML agar tidak error saat dimasukkan dalam template Blogger yang berformat XML.

Khususnya jika Kamu mulai monetasi blog dengan Adsense atau iklan-iklan serupa, script iklan mesti diurai dahulu sebelum dimasukkan ke template blog. HTML Parser memungkinkan karakter entitas HTML secara otomatis terbaca dalam format XML. Dan, ini tidak terbatas mengubah script iklan, namun kode HTML apapun.

Tentu, proses mem-parse HTML ke XML tidaklah mengubah keseluruhan kodenya. Hanya beberapa kode tertentu yang memungkinkan terjadinya error saat kita masukkannya ke dalam template Blogger atau Blogspot berformat XML. Berikut ini adalah contoh kode HTML yang akan berubah ketika diurai menggunakan alat parse HTML:

• Kode < akan berubah menjadi &lt;
• Kode > akan berubah menjadi &gt;
• Kode " akan berubah menjadi &quot;
• Kode ' akan berubah menjadi &#039;
• Kode & akan berubah menjadi &amp;

Tutorial Cara Membuat Parse HTML di Blogger

Untuk membuat atau memasang HTML Parser di blogger, caranya simple. Kamu hanya perlu membuat halaman baru di blog. Ketika berada dalam antarmuka edit halaman, ganti Tampilan Menulis (compose) menjadi Tampilan HTML. Selanjutnya, salin script di bawah ini dan paste ke tempat posting, lalu klik Publikasikan (Publish).

<textarea id="codes" placeholder="Paste kodenya di sini, kemudian klik 'Parse Kode'. Jika ingin parse kode baru, klik dulu 'Hapus Kode'" spellcheck="false" style="resize:none"></textarea> 

<div class="button-group">
<button id="convert" onclick="cdConvert();this.disabled = true;">Parse Kode</button><button onclick="cdClear();">Hapus Kode</button></div>
<ul id='wrapin'>
 <li><input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code></li>
 <li><input checked="true" id="opt2" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code></li>
 <li><input checked="true" id="opt3" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code></li>
 <li><input id="opt4" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code></li>
 <li><input id="opt5" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code></li>
</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;
 width:100%;
 height:250px;
 margin:0 auto;
 display:block;
 background-color:#f5f8fa;
 color:#222;
 padding:20px;
 border-radius:20px;
}
.button-group{
 margin:10px;
 text-align:center;
}
button,button[disabled]:active{
 border: none;
 padding: 5px 12px;
 color: #fff;
 background-color: #068488;
 cursor: pointer;
 font-size: 13px;
 margin: 0 10px;
 line-height: 23px;
 border-radius: 20px;
 transition: all 0.3s ease-in-out;
}
button:active{
 background:#3f92e1;
}
button[disabled],button[disabled]:active{
 background:#3f92e1;
}
#opt1,#opt2,#opt3,#opt4,#opt5{
 display:inline-block;
 margin-right:10px;
 font-size:13px;
}
</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>

Demikianlah tutorial singkat mengenai cara membuat halaman HTML Parser di blog. Istilah lain untuk alat ini adalah HTML Converter atau HTML to XML Parser. Dengan memiliki alat ini, Kamu tidak perlu lagi mencari Parse HTML Online. Lebih dari itu, alat ini malah bisa bermanfaat bagi blogger lain yang belum memilikinya.