Cara Menciptakan Halaman Parse Html Di Blog

Minggu, 03 Februari 2013

Ada beberapa Aktifis pada dunia maya yang hingga kini masih kebingungan ketika input aba-aba HTML, CSS ataupun JavaScript kedalam template ataupun kedalam artikel, dan itu termasuk saya sendiri.

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

Pengertian Parse HTML

Apa sih pengertian Parse HTML bersama-sama ? Kata parse dalam Bahasa Inggris berarti mengurai.

Tapi berdasarkan pendapat saya, Parse HTML itu yakni mengubah kode-kode atau gejala tertentu menjadi aba-aba 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) ibarat 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 melaksanakan 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 sanggup menciptakan aba-aba html yang diparse menjadi lebih seo friendly dan valid html5 kalau dibanding dengan yang belum diparse.

Lihat ilustrasi gambar dibawah ini.

Ilustrasi Gambar : Akibat Kode Iklan yang tidak di Parse

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

Bagi teman-teman yang ingin mem-parse html sanggup gunakan tools yang saya sediakan di sajian bab bawah pada halaman ini atau kau sanggup eksklusif klik link berikut ini :

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

Gambar 1: Tampilan Parse HTML Kang Wira

Cara memakai Tools Parse HTML diatas, sanggup dikatakan sangat gampang dan simple, dibawah ini yakni cara memakai Tools Parse HTML, perhatikan gambar berikut ini:

Gambar 2 : Cara Parse Kode HTML

Hasilnya, teman-teman sanggup 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 kau Parse pada kolom yang disediakan (gambar 1)
2. Klik Tombol Parse (gambar 2)
3. Tidak hingga 1 Detik, kau akan mendapat hasil aba-aba yang sudah di Parse (gambar 3)

Cukup gampang bukan ? Nah apabila kau mau mencoba untuk Memasang Tools Parse HTML ini didalam halaman statis blog kamu, kau sanggup 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 aba-aba di sini kemudian 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 berdasarkan kamu?

Cukup gampang 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 kau dikolom artikel dibawah ini apabila ada pertanyaan wacana artikel ini.

Share This :