Cara Membuat Tools Parse HTML Responsif di Blogger

Cara Membuat Tools Parse HTML Responsif di Blogger - Alat parse HTML memang cukup penting bagi kalangan blogger (orang yang suka ngeblog). Tak jarang juga ada yang memasang alat parse HTML ini di dalam blognya terutama bagi yang memiliki blog niche blogging atau pun koding. Karena memang parse HTML online ini berhubungan dengan itu. Untuk membuat tools parse HTML online ini membutuhkan script parse yang harus di pasang di halaman statis. 

Jarang sekali ada yang memasang tools parse pada konten blog selain yang diterangkan di atas. Mungkin akan terlihat mubazir kan jika di pasang di blog dengan niche berita, kesehatan, pendidikan, atau bahkan agama. Pengunjung tidak akan terfokus kepada itu karena memang tujuan berkunjung ke blog berbeda.

Memang beberapa blogger memasang tools di dalam blognya seperti HTML converter, Color Palette, CSS Minifer, dan masih banyak lagi.

Lalu bagaimana cara membuat dan memasang alat parse html online ini di blog? Berikut artikel ini akan menjelaskan tutorial tentang itu.

Apa sebenarnya PARSE HTML itu?

Parse HTML adalah alat untuk menguraikan atau mengkonversi kode HTML menjadi karakter entitas HTML secara otomatis supaya terbaca dalam format XML. Kenapa harus di parse? Karena tema blogger ini menggunakan format XML. Sebenarnya ketika Kita mencoba memparse script HTML, tidak serta merta semua kode berubah (dikonversi). Hanya beberapa kode saja yang berubah, jika Kamu menuliskan kata atau kalimat yang dibungkus kode html tersebut maka kata tersebut tidak berubah.

Berikut beberapa contoh kode HTML yang berubah jika dikonversi menggunakan script HTML converter/parse.

• tanda < menjadi &lt;
• tanda > menjadi &gt;
• tanda " menjadi &quot;
• tanda ' menjadi &#039;
• tanda & menjadi &amp;

Biasanya orang menggunakan alat parse html ini untuk mengkonversi script html agar tidak terjadi eror ketika di pasang di blog. Selain itu, untuk memasang script iklan google adsense, Kita juga harus memparse kode adsense terlebih dahulu agar tidak terjadi eror dan iklan dapat tayang kecuali jika memasangnya di widget blog maka tidak perlu diparse terlebih dahulu.

Baca juga: http://www.rekblogging.com/2018/08/cara-membuat-tombol-show-hide.htmlCara Membuat Tombol Spoiler di Artikel.

Nah, berikut langkah-langkah memasang script untuk tools parse HTML yang responsive di blogger.

Cara Membuat Alat Parse HTML Online di Blog

1. Buka dashbor blogger mu terlebih dahulu.

2. Pilih menu "Halaman" atau "Pages".

3. Buat Halaman baru dengan mengklik tombol "New Page" di bagia atas.

4. Terdapat dua pilihan mode yaitu Compose dan HTML, jika ingin menuliskan paragraf pembuka silahkan pilih mode Compose terlebih dahulu, setelah itu pilih mode HTML untuk menaruh kode.

5. Copy lalu paste kan Script Kotak Parse HTML di bawah ini

<textarea id="codes" placeholder="Salin script di sini lalu klik 'Kuy Parse'. Untuk parse script baru, klik 'Bersihin dulu'" spellcheck="false"></textarea> 
<br />
<div class="button-group">
<center>
<span class="Apple-style-span" style="font-family: &quot;trebuchet ms&quot;; font-size: x-small; line-height: 20px;">Alat Parse HTML &nbsp;oleh &nbsp;<a href="http://www.rekblogging.com/" style="color: #2980b9; text-decoration: none;">rekblogging.com</a></span></center>
<button id="convert" onclick="cdConvert();this.disabled = true;">Kuy Parse</button><button onclick="cdClear();">Bersihin dulu</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 #CCCCCC;width:550px;height:250px;margin:0 auto;display:block;background-color:#f2f2f2;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 lalu lihat preview, jika sudah benar klik publish.

Catatan:
Kamu bisa memodifikasi tampilannya sesuai dengan tema blog Kamu, misalnya ukuran kotak untuk memparse scriptnya bisa diperbesar atau diperkecil.

Berikut ini tampilan screenshot alat parsenya.

Demikian tutorial untuk membuat tools online HTML converter di blog yang responsive. Paling tidak ini menjadi referensi bagi Kamu yang ingin memasang alat parse HTML di blog. Ada banyak sekali di internet yang memberikan script kotak parse dengan tampilan yang berbeda.

Bagi yang belum jelas mengenai tutorial di atas bisa disampaikan di kolom komentar. Mohon maaf apabila dalam menuliskan artikel ini banyak kesalahana atau membuat Kamu bosan. Jangan segan-segan untuk menyampaikan kritik dan saran agar rekblogging semakin berkualitas.


picture by rekblogging