Cara Membuat Halaman Parse HTML di Blog

Chat on Whatsapp

coba baca yang ini

Ada beberapa Aktifis pada dunia maya yang sampai sekarang masih kebingungan saat input kode HTML, CSS ataupun JavaScript kedalam template ataupun kedalam artikel, dan itu termasuk saya sendiri.

Karena pengalaman Kang Wira saat itu adalah ketika saya kebingungan untuk menyisipkan kode iklan kedalam template blog ini. Bukan Iklan yang saya lihat saat itu, tapi justru yang saya tampil itu adalah kode iklan yang saya sisipkan di template.

Pengertian Parse HTML

Apa sih pengertian Parse HTML sebenarnya ? Kata parse dalam Bahasa Inggris berarti mengurai.

Tapi menurut pendapat saya, Parse HTML itu adalah mengubah kode-kode atau tanda-tanda tertentu menjadi kode entitas (kode unik).

Kode-kode yang biasanya diubah yaitu tanda lebih kecil (<), petik dua ("), ampersand (&), petik satu ('), tanda lebih besar (>).

Kode-kode tersebut akan diubah menjadi kode-kode yang unik (kode entitas) seperti berikut ini.

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

Baca juga: Cara buat Halaman Recent Post By Label

Kenapa harus di Parse dulu ?

Dengan melakukan HTML Parsing, maka akan mencegah tampilan error di blog ketika dibuka di suatu web browser.

Hal ini biasa terjadi pada browser versi lama. Selain itu, mem-parse html dapat membuat kode html yang diparse menjadi lebih seo friendly dan valid html5 jika dibanding dengan yang belum diparse.

Lihat ilustrasi gambar dibawah ini.

Ilustrasi Gambar : Akibat Kode Iklan yang tidak di Parse

Sekarang saya anggap kamu sudah mengerti tentang Parse HTML, yaaa setidaknya sedikit mengerti daripada tidak sama sekali. hehehe..

Bagi teman-teman yang ingin mem-parse html bisa gunakan tools yang saya sediakan di menu bagian bawah pada halaman ini atau kamu bisa langsung klik link berikut ini :

http://www.kangwira.com/p/html-converter.html

Gambar 1: Tampilan Parse HTML Kang Wira

Cara menggunakan Tools Parse HTML diatas, bisa dikatakan sangat mudah dan simple, dibawah ini adalah cara menggunakan Tools Parse HTML, perhatikan gambar berikut ini:

Gambar 2 : Cara Parse Kode HTML

Hasilnya, teman-teman bisa lihat pada gambar di bawah ini.

Baca juga: Membuat Widget Pricing Table dengan PopUp

Gambar 3 : Hasil Kode Yang Sudah Di Parse

1. Tempelkan Kode HTML yang akan kamu Parse pada kolom yang disediakan (gambar 1)
2. Klik Tombol Parse (gambar 2)
3. Tidak sampai 1 Detik, kamu akan mendapatkan hasil kode yang sudah di Parse (gambar 3)

Cukup mudah bukan ? Nah apabila kamu mau mencoba untuk Memasang Tools Parse HTML ini didalam halaman statis blog kamu, kamu bisa ikuti langkah-langkahnya sebagai berikut ini :

• Masuk kedalam akun blogger kamu
• Buka Menu Laman
• Pilih Menu Laman Baru untuk Membuat Halaman Statis
• Buat dulu judulnya Parse HTML
• Lalu tempelkan Kode dibawah ini
• Publikasikan dan Lihat hasilnya

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

Bagaimana menurut kamu?

Cukup mudah bukan tutorial diatas mengenai Cara Membuat halaman Parse HTML di Blog sendiri ?

Jika artikel ini bermanfaat untuk kamu, jangan lupa untuk share artikel ini ya. Jangan lupa berikan komentar kamu dikolom artikel dibawah ini apabila ada pertanyaan tentang artikel ini.