Cara Membuat HTML Parse atau Code Converter

Apa itu Parse HTML ?

Parse HTML adalah salah satu tools/alat yang digunakanan untuk  mengkonversi kode, seperti kode iklan atau seperti kode yang akan dibagikan. Tujuannya adalah untuk menulis suatu kode HTML atau JavaScript, bukan membacanya sebagai kode. Tool ini sangat berguna dan wajib dimiliki oleh para blogger yang berkecimpung di bagian Tutorial Web dan Edit Web seperti blog Technology For Future ini. Biasanya kode yang di parse adalah iklan atau kode yang nantinya akan tampil di dalam postingan, baik di atas, di tengah maupun di bawah postingan, Selain dalam postingan , untuk menulis kode pada bagian komentar blog juga perlu di konversi sebelumnya.

Baca juga : Code Converter HTML parse

Kode-kode yang biasanya diubah yaitu:

• Konversi & menjadi &
• Konversi < menjadi <
• Konversi > menjadi >
• Konversi " menjadi "
• Konversi ' menjadi '

Bagi yang belum mengerti penggunaan Tool Konversi Parse HTML, lihatlah contohnya di bawah ini:

Contoh Tanpa Parse

Contoh saat menulisakan kode di mode HTML(bukan composed), apabila tidak di konversi maka hasilnya akan tampak seperti di bawah ini,blog akan membacanya sebagai kode HTML biasa

Contoh Setelah di Parse

Contoh saat menulisakan kode di mode HTML(bukan composed), jika sudah di konversi di alat konversi maka hasilnya akan seperti di bawah ini.

Hasil akhir setelah di parse 

Untuk demo HTML Parse Tool nya klik tombol di  bawah ini atau cari di kolom komentar.

Demo
Klik Disini

Untuk membuatnya kalian bisa mengikuti langkah langkah di bawah ini:

1. Buka menu Pos / Laman Entri/ Laman baru 

2. Copy lalu Paste kode ini di laman/entri pada mode HTML (bukan compose)

<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea> 
<div class="button-group">
<button id="convert" onclick="cdConvert();">Konversi</button><button onclick="cdClear();">Bersihkan</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;border:1px solid #e9e9e9;width:600px;height:300px;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> 

Note : Untuk mengatur lebar tool ganti kode width:600px sedangkan untuk mengatur tinggi ganti kode height:300px

3. Publikasikan dan lihat hasil akhirnya


Sekian artikel saya kali ini tentang "Cara Membuat HTML Parse atau Code Converter"
Semoga ilmu yang saya miliki bisa membantu kalian yang membaca :D

Sumber :http://searfind.blogspot.co.id/   

Sumber :http://desainkode.blogspot.co.id/

Sumber :http://bungfrangki.com/

Diupload pada : Selasa, 19 Juli 2016

• Tweet
• Share
• Share
• Share
• Share

Tentang AdminTechnology For Future

Biasa dipanggil Radit. Masih bersekolah di SMPN 9 Denpasar. Memiliki kreatifitas dan waktu yang terbatas

Related Post