Cara Membuat Tool Parse HTML Untuk Blog

Baca Juga

 - Parse HTML adalah sesuatu yang sudah jadi kebiasaan oleh para blogger. Parse HTML berfungsi untuk mengkonversi suatu kode HTML dengan tujuan di pasang di dalam blog. Biasanya mereka menggunakan Tool Parse HTML untuk memparse kode HTML Google Adsense.

Nah biasanya kita memparse kode HTML melalui situs atau website milik orang lain kan?. Apakan anda tidak ingin memiliki Tool Parse HTML sendiri?, Oke, jika anda menginginkan Tool Parse HTML milik anda sendiri. Kali ini saya akan membagikan Cara Membuat Tool Parse HTML Untuk Blog.

Cara Membuat Tool Parse HTML
1. Pertama, Masuk dahulu ke dashboard blogger anda.
2. Pilih Menu Halaman/Page (Biasanya ada di sebelah kiri layar)
3. Buat halaman baru dengan judul "Parse HTML" atau buatlah nama halaman sesuka anda.
4. Setelah selesai membuat judul. Ganti mode yang asalnya Compose menjadi HTML
5. Lalu paste kan kode di bawah ini.

<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Parse'" spellcheck="false"></textarea>
<br />
<div class="button-group">
<br />
<button id="convert" onclick="cdConvert();this.disabled = true;">Parse</button><button onclick="cdClear();">Clear</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: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>

6. Terakhir klik Simpan/Save.

DEMO

Demikian artikel dari saya tentang Cara Membuat Tool Parse HTML Untuk Blog, semoga bisa bermanfaat bagi anda semua. Jika ada pertanyaan atau pesan, tinggalkan di kolom komentar...