Cara Membuat Tools Code Parser/Converter HTML

Cara Membuat Tools Code Parser/Converter HTML

Cara Membuat Tools Code Parser/Converter HTML - Code Parser atau Converter HTML merupakan sebuah tools yang berfungsi untuk menterjemahkan kode HTML ke dalam bentuk karakter unik tertentu, seperti tanda petik dua ("), ampersand (&), petik satu ('), tanda lebih kecil (<) dan lebih besar (>). Jadi, ketika sebuah kode HTML diurai melalui code parser, hasilnya akan seperti ini.
  • < akan diubah menjadi &lt;
  • " akan diubah menjadi &quot;
  • & akan diubah menjadi &amp;
  • ' akan diubah menjadi &#039;
  • > akan diubah menjadi &gt;
Biasanya tools ini digunakan para blogger untuk mengkonversi kode iklan adsense agar kompatibel dan muncul dengan semestinya. Kalau tidak di-parse, maka iklan tidak akan muncul. Memang sudah jadi keharusan. 

Selain itu, bagi blogger yang suka membagikan kode CSS, HTML atau Javasript di blog-nya perlu mem-parse kode yang dibagikan. Khususnya yang memakai pre code atau syntax highlighter. Sama seperti iklan adsense, kalau tidak di-parse tidak akan muncul dengan baik.
Nah, untuk itu kamu harus punya tools code parser/converter HTML sendiri di halaman blog kamu. Supaya memudahkan kamu jikalau ada kebutuhan untuk mem-parse, sehingga tidak perlu repot lagi mencari tools-nya di google. Pengunjung juga bisa terbantu dengan keberadaan tools ini di blog kamu.

Cara Membuat Tools Code Parser/Converter HTML

  • Pertama, buat terlebih dahulu sebuah page/halaman. Dengan cara klik menu Laman pada dasbor blogger. Kemudian klik Laman Baru untuk membuat tools.

Cara Membuat Tools Code Parser/Converter HTML
  • Setelah itu masuk ke mode HTML, kemudian copy kode dibawah ini lalu pastekan ke dalam halaman tersebut (ingat, dalam mode HTML!).
<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>


  • Kalau masih bingung mengenai caranya, lihat gambar berikut.

Cara Membuat Tools Code Parser/Converter HTML


  • Setelah itu, klik Publikasikan dan lihat hasilnya. 

Nah, halaman code parser sudah jadi. Selanjutnya kamu bisa menyesuaikan warna dan semacamnya dengan mengutak-atik CSS-nya. Mudah sekali kan?

6 Comments

thanxxx.... bermanfaatt

wah mantap.. bro cuman ilmu saya belum sampai ada belajar dasar css ngk ya bro.. masalhnya klau cuman copy pasti kurang ngjreng ya sapa tahu bisa jadi programer :-d

ini nih yang ane cari cari, makasi gan

Nice info gan. Sangat membantu

Keren sob., :) Bisa masang tool code parse sendiri.,


EmoticonEmoticon