Cara Membuat Tool Parse HTML di Blogger dengan Mudah

Membuat tool parse HTML di Blogger merupakan solusi praktis bagi para pengelola situs web dan pengembang yang ingin menampilkan kode HTML tanpa dieksekusi oleh browser. Tool ini berguna untuk mengonversi kode HTML menjadi entitas yang dapat ditampilkan secara aman dalam artikel atau postingan blog. Sehingga code yang di bagikan di artikel itu bisa di baca oleh pengguna.

Apa Itu Tool Parse HTML?

panduan lengkap cara membuat tool parsing di blogger - by otak cerdas

Cara Membuat Tool Parse HTML di Blogger dengan Mudah

Tool parse HTML adalah alat yang mengubah karakter khusus dalam kode HTML menjadi entitas yang dapat dibaca oleh browser sebagai teks, bukan sebagai instruksi pemrograman. Contohnya, tag <p> akan diubah menjadi <p>, sehingga tidak akan dikenali sebagai elemen HTML.

Manfaat Tool Parse HTML di Blogger

Tool parsing HTML memiliki berbagai manfaat, terutama bagi blogger, pengembang web, dan content creator yang sering membagikan kode pemrograman. Tentunya dengan memanfaatkan tool parsing ini semua pekerjaan akan menjadi mudah. Nah berikut adalah beberapa manfaat utamanya dari tool parsing:

1. Menghindari Eksekusi Kode HTML

Tanpa parsing, kode HTML yang ditampilkan di dalam artikel bisa dieksekusi oleh browser, sehingga tampilan halaman bisa berantakan atau tidak sesuai dengan yang diharapkan. Tool parsing membantu mengonversi kode menjadi format teks sehingga dapat ditampilkan dengan aman dan bisa di baca oleh pengguna.

2. Membantu Pengguna Memahami Kode

Tool ini berguna bagi blogger yang sering membagikan tutorial pemrograman atau tips seputar desain web. Dengan adanya tool parse HTML, pembaca dapat memahami kode secara jelas tanpa harus mengedit sumber halaman.

3. Mempermudah Proses Posting Kode

Bagi blogger yang sering membuat tutorial pemrograman, tool parsing HTML sangat penting agar kode yang dibagikan tetap terlihat sebagai teks, bukan sebagai elemen aktif dalam halaman. Ini membantu pembaca memahami struktur kode dengan lebih jelas. Dengan menggunakan tool ini, blogger tidak perlu melakukan konversi manual terhadap setiap karakter khusus dalam HTML, sehingga lebih hemat waktu dan tenaga.

Cara Membuat Tool Parse HTML di Blogger

Untuk membuat tool parsing ini pun juga sangat mudah, Anda hanya perlu menambahkan beberapa baris kode HTML dan JavaScript dalam halaman statis Blogger.

Langkah 1: Membuat Halaman Statis di Blogger

Masuk ke akun Blogger Anda.
Pilih menu Halaman > Halaman Baru.
Masukkan judul halaman, misalnya Tool Parse HTML.
Pastikan Anda memilih mode HTML saat memasukkan kode.

Langkah 2: Menambahkan Kode HTML dan JavaScript

Langkah selanjutnya silahkan anda salin dan tempel kode berikut ke dalam halaman yang telah dibuat:


<textarea id="codes" spellcheck="false"></textarea> <br />
<div class="button-group"><button id="convert" onclick="cdConvert();this.disabled = true;">Parse HTML code</button><button onclick="cdClear();">Bersihkan dulu</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 #CCCCCC;width:100%;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>

Langkah 3: Menyimpan dan Mempublikasikan Halaman

Setelah memasukkan kode di atas, klik Publikasikan untuk menyimpan halaman. Kini, halaman tersebut dapat digunakan sebagai alat untuk parsing kode HTML secara otomatis.

Untuk melihat seperti apa tampilanya dari kode tool parsing di atas, Nah berikut adalah tampilanya, sangat keren kan :

Kesimpulan

Dengan adanya tool parse HTML di Blogger, proses menampilkan kode dalam artikel menjadi lebih mudah dan aman. Alat ini memungkinkan blogger untuk menyajikan kode tanpa khawatir akan eksekusi otomatis oleh browser. Dengan mengikuti langkah-langkah di atas, Anda dapat membuat tool parse HTML sendiri tanpa perlu keahlian pemrograman yang kompleks. Selamat mencoba ya semoga berhasil.