Cara Membuat HTML Converter Dengan Mudah

Hallo Blogger, pada kesempatan kali ini saya akan membahas bagaimana cara untuk membuat HTML Converter dengan mudah dan praktis.

Apa itu HTML Converter? Itu adalah sebuah metode yang dimana script html akan di konversi menjadi lebih kecil atau lebih ringan (menurut saya).

Biasanya ini digunaka untuk memparse code atau iklan yang akan di pasang di dalam postingan artikel yang sudah kita tulis, termasuk saya juga memasangnya yang di mana  di konversi terlebih dahulu untuk code iklannya.

Jika sobat ingin membuat HTML Converter-nya, maka berikut adalah cara atau tutorial pembuatannya :

1. Masuk pada menu Halaman > Buat Halaman Baru.

2. Kemudian copy code di bawah ini pada tab HTML.

<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea> <br/>
<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 <b>&</b> menjadi <b>&amp;amp;</b></li>
<li><input checked="true" id="opt2" type="checkbox" />Konversi <b><</b> menjadi <b>&amp;lt;</b></li>
<li><input checked="true" id="opt3" type="checkbox" />Konversi <b>></b> menjadi <b>&amp;gt;</b></code></li>
<li><input id="opt4" type="checkbox" />Konversi <b>"</b> menjadi <b>&amp;quot;</b></li>
<li><input id="opt5" type="checkbox" />Konversi <b>'</b> menjadi <b>&amp;#039;</b></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>

3. Simpan.

Rate this artikel