Cara Memasang Tool Parse HTML Pada Blog

Cara Memasang Tool Parse HTML Pada Blog - Bagi teman-teman semua yang membutuhkan tool Parse HTML dan ingin memasang tool tersebut di blog masing-masing, silahkan ikuti beberapa langkah Cara Memasang Tool Parse HTML Pada Blog berikut ini.

Bagi teman-teman yang ingin melihat demo dari Parse HTML tersebut, silahkan klik tombol di bawah ini.

DEMO

1. Copykan kode di bawah ini ke dalam halaman posting atau Laman baru dalam mode Tab HTML (bukan Compose)

<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea>

<br />

<div class="gencet-group">

<gencet id="convert" onclick="cdConvert();this.disabled = true;">Konversi</gencet><gencet onclick="cdClear();">Bersihkan</gencet></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;}

.gencet-group{margin:0 auto 0;text-align:center}

gencet,gencet[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;}

gencet:active{background:#3f92e1;}

gencet[disabled],gencet[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>

2. Simpan dan lihat hasilnya.

Jika teman-teman masih kurang suka dengan tampilannya, silahkan untuk memodifikasinya sendiri sesuai dengan keinginan masing-masing.

Demikianlah Cara Memasang Tool Parse HTML Pada Blog tersebut. Semoga bisa bermanfaat untuk kita bersama.