Monday, July 18, 2016

Cara Membuat Halaman Parse HTML di Blog

Chat on Whatsapp

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.

Cara Membuat Halaman Parse HTML di Blog

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 : Proteksi Blog dari CTRL + U

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 :
Tampilan Parse HTML Kang Wira
Gambar 1: Tampilan Parse HTML Kang Wira
Baca juga: Cara Menampilkan Widget Random Post

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



Hasil Kode Yang Sudah Di Parse
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

Baca juga: Cara Menghilangkan Gambar Obeng dan Tang

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


DMCA.com Protection Status

Previous
Next Post »

KASIH KOMENTAR DISINI

BLOGGER
DISQUS
Pilih System Komentar

No comments