Cara Membuat Tools Parse HTML di Blogger

Cara Membuat Tools Parse HTML di Blogger - Alat parse HTML memang lumayan penting untuk kalangan blogger .

Tak jarang pun ada yang memasang perangkat parse HTML ini di dalam blognya terutama untuk yang mempunyai blog niche blogging atau juga koding. Karena memang parse HTML online ini bersangkutan dengan itu. Untuk menciptakan tools parse HTML online ini memerlukan script parse yang mesti di pasang di halaman statis.


Jarang sekali terdapat yang memasang tools parse pada konten blog di samping yang dijelaskan di atas. Mungkin bakal terlihat mubazir kan andai di pasang di blog dengan niche berita, kesehatan, pendidikan, atau bahkan agama. Pengunjung tidak bakal terfokus kepada tersebut karena memang tujuan berangjangsana ke blog berbeda.

Memang sejumlah blogger memasang tools di dalam blognya laksana HTML converter, Color Palette, CSS Minifer, dan masih tidak sedikit lagi.
Lalu bagaimana teknik membuat dan memasang perangkat parse html online ini di blog? Berikut tulisan ini akan menyatakan tutorial mengenai itu.

Cara Membuat Tools Parse HTML di Blogger

1. Buka dashbor blogger.
2. Pilih menu "Halaman" atau "Pages".
3. Buat Halaman baru dengan mengklik tombol "New Page" di bagia atas.
4. Terdapat dua opsi mode yakni Compose dan HTML, bila hendak menyebutkan paragraf pendahuluan silahkan pilih mode Compose terlebih dahulu, setelah tersebut pilih mode HTML untuk membubuhkan kode.
5. Copy kemudian paste Script Kotak Parse HTML di bawah ini

<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>

6. Save kemudian lihat preview, andai sudah benar klik publish.


Catatan:
Kamu dapat memodifikasi tampilannya cocok dengan tema blog Kamu, contohnya ukuran kotak guna memparse scriptnya dapat diperbesar atau diperkecil.

Demikian Cara Membuat Tools Parse HTML di Blogger Paling tidak ini menjadi referensi untuk Kamu yang hendak memasang perangkat parse HTML di blog. Ada tidak sedikit sekali di internet yang menyerahkan script kotak parse dengan tampilan yang berbeda.