Cara Membuat Alat Parse HTML (HTML Converter) Di Blogger

Alat parse HTML atau yang biasa disebut sebagai Converter HTML merupakan sebuah alat khusus yang sering digunakan untuk melakukan konversi terhadap kode pemrograman, seperti HTML, CSS, atau Javascript.

Bagi para blogger sendiri tool parse HTML ini merupakan bagian yang cukup penting, terlebih lagi bagi mereka yang sering membagikan postingan berupa kode-kode pemrograman.

Tak hanya itu saja, bagi anda yang ingin menempatkan iklan Google Adsense kedalam blog, juga memerlukan tool parse HTML.

Oleh karena fungsinya yang cukup penting, tak jarang banyak blogger yang bersusah payah mencari tool ini di Google. Tapi tahukah anda bahwa saat ini anda bisa membuat alat parse HTML anda sendiri loh. Jadi anda tidak akan susah-susah lagi mencari tool ini di Google maupun di blog orang lain.

Untuk cara membuat alat parse HTML ini bisa dikatakan sangat mudah, anda hanya perlu membuka halaman kosong di blog anda, dan kemudian menambahkan beberapa kode saja. Nah untuk lebih jelasnya anda bisa memperhatikan cara pembuatan tool parse HTML berikut:

1. Masuk ke blogger
2. Pada dashboard pilih Halaman>>Halaman Baru
3. Masuk ke mode "HTML" (Bukan "Compose")
4. Lalu tambahkan kode berikut kedalam halaman tersebut

<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea> 
<div class="button-group">
<button id="convert" onclick="cdConvert();this.disabled = true;">Konversi</button><button onclick="cdClear();">Bersihkan</button></div>
<br />
<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;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: 5px 12px;color: #fff;background-color: #0ea6d8;cursor: pointer;font-size: 13px;margin: 0 10px;line-height: 23px;border-radius: 3px;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;}
</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>

5. Lakukan "Pratinjau" untuk mengetahui hasilnya
6. Jika sudah benar, silahkan klik "Publikasikan"

Bagaimana sobat, mudah sekali bukan? hanya dengan menambahkan script kode saja anda sudah bisa membuat alat parse HTML anda sendiri, jadi mulai sekarang anda bisa menggunakan alat parse HTML buatan anda sendiri ya.

Itu saja yang bisa saya sampaikan, semoga cara yang saya bagikan ini dapat bermanfaat ya. Akhir kata saya ucapkan terimakasih dan sampai jumpa.