Cara Membuat Tools Code Parser/Converter HTML

label
label
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?
loading...
Share This :

Related Post

avatar

thanxxx.... bermanfaatt

delete 1/4/17
avatar

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

delete 1/4/17
avatar
Bartolomeong person

Semoga membantu (o)

delete 1/4/17
avatar

ini nih yang ane cari cari, makasi gan

delete 2/4/17
avatar

Nice info gan. Sangat membantu

delete 2/4/17
avatar

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

delete 8/5/17



sentiment_satisfied Emoticon