Cara Membuat Halaman Parse HTML Pada Blog dengan Mudah

---

B

agi Blogger, keberadaan parsing tools dirasa sangat berguna, terutama untuk membantu menyisipkan kode script HTML pada postingan atau artikel di situs.

Apa itu Parse HTML

Parse HTML adalah alat untuk mengurai kode HTML secara otomatis atau mengubahnya menjadi entitas HTML sehingga kode tetap dapat ditampilkan sepenuhnya tanpa menghilangkan elemen kode skrip HTML apa pun untuk ditampilkan.

Berikut adalah beberapa contoh kode HTML yang telah diubah oleh alat parsing:

Atribut > menjadi >
Atribut < menjadi &gt;
Atribut ' menjadi &#039;
Atribut " menjadi &quot;
Atribut & menjadi &amp;

Biasanya, alat parsing ini banyak digunakan oleh situs web yang memiliki niche dalam tutorial blogging dan coding.Hal ini bukannya tidak masuk

akal, karena kita tahu bahwa website dengan tutorial coding seringkali harus memasukkan banyak kode ke dalam artikel,jadi sebelum memasukkan kode script ke dalam artikel, keberadaan alat parsing pasti diperlukan untuk mengubah kode script.

Pada prinsipnya, bagi kita yang suka menyisipkan kode script di artikel, sangat berguna untuk menggunakan alat parsing ini, karena mencegah

kesalahan atau kesalahan yang dapat menyebabkan beberapa kode tidak ditampilkan.

Padahal keberadaan parsing tool ini diyakini bermanfaat bagi sebagian Blogger. Namun pada kenyataannya banyak situs yang tidak dilengkapi dengan

parsing tools, dan pada kenyataannya kita jarang menemukan tool ini setiap kali kita mengunjungi suatu situs.

Mungkin mereka para blogger lebih suka menggunakan parsing tools yang ada di situs lain karena dianggap tidak rumit.

Entah kenapa, sebenarnya kita bisa dengan mudah membuat alat parsing di situs kita sendiri sehingga kita tidak perlu repot mencari alat parsing di situs lain. Bukankah itu lebih menyenangkan bagi kita?

Cara membuat alat parsing HTML online di blog:


1. Mulailah dengan membuka dasbor Blogger Anda.

2. Selanjutnya pilih menu Pages atau Halaman.

3. Selanjutnya buat halaman baru dengan mengklik tombol "Halaman Baru" di bagian atas.

4. Akan ada dua pilihan mode, Compose dan HTML. Jika Anda ingin menulis paragraf pembuka, silakan pilih mode Compose terlebih dahulu, lalu pilih mode HTML untuk meletakkan kode.

5. Kemudian salin dan tempel kode skrip alat parsing 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. Terakhir, klik Simpan dan langsung menguji apakah alat pengurai HTML Anda berfungsi. Jika langkah Anda benar, alat pengurai HTML ini akan bekerja dengan sempurna dalam waktu singkat

Catatan:

Anda dapat memodifikasi tampilan secara independen dari parse HTML, misalnya Anda dapat mengubah tema atau ukuran kotak parse HTML sesuai keinginan Anda.

Demikian tutorial "Cara membuat parse HTML pada blog dengan mudah". Jika Anda memiliki pertanyaan tentang artikel ini, jangan ragu untuk menghubungi saya. Semoga membantu, terima kasih.

Keyword

HTML Parse, Parse HTML. Parsing HTML, Generate Code HTML