Cara Membuat Tool Parse Html Sendiri

Bagi teman-teman yang menginginkan pasang tool parse sendiri pada blogspot. Dapat membuatnya sendiri dalam blog anda.Kode yang anda paste begitu saja di blog akan menjadi kode yang terpasang dan aktif di blog, bukan kode yang tertampilkan pada postingan blog. Oleh karena itu kode tersebut harus di-parsing terlebih dahulu. Beberapa website yang menyediakan tool parse-html/html-parser/parsing-html/html-entities yang saya rasa sudah familiar di kalangan blogger yakni seperti Centricle dan Blogcrowds. Namun tentu saja cara tersebut tidak sebegitu ringkas jika anda memiliki sendiri tool tersebut yang terpasang di blog.

Sebelum membuat posting ini saya sempatkan untuk googling sejenak mencari cara memasang tool html parser di blog. Saya temukan beberapa cara yang menyediakan hal tersebut, namun terdapat link yang menuju pada website lain pada kode yang ditemukan. Hal ini tentunya mengurangi daya tarik bagi sebagian blogger.

Atas dasar tersebutlah kali ini saya akan berbagi bagaimana membuat tool parsing html dengan menggunakan kode javascript sederhana. Berikut adalah tool html parser yang saya buat. Anda pun dapat memanfaatkan tool dibawah ini untuk menampilkan kode html di blog Anda. (tool dibawah bukan iframe dari website lain)

Blogger Tutorial

Oke tanpa basa-basi lagi mari langsung kita simak bagaimana cara pembuatannya!

Sebelum anda beranjak ke bagian 'kode tinggal copas pasang', alangkah baiknya jika anda mengetahui cara kerja kode tersebut sehingga anda pun akan memahami kode tersebut. Cara kerja tool html-parser tersebut yakni berbasiskan pada kode javascript sederhana yang memuat fungsi replace pada kode-kode tertentu. Javascript tersebut akan mereplace kode < " & \' > menjadi &lt; &quot; &amp; &#039; &gt;

Mari kita lihat sejenak contoh yang saya ambil dari website pembelajaran kode pemrograman website TIZAG

JAVASCRIPT CODE
<script type="text/javascript">
var visitorName = "Chuck";
var myOldString = "Hello username! I hope you enjoy your stay username.";
var myNewString = myOldString.replace("username", visitorName);

document.write("Old string = " + myOldString);
document.write("<br />New string = " + myNewString);

</script>

HASIL REPLACE
Old string = Hello username! I hope you enjoy your stay username.
New string = Hello Chuck! I hope you enjoy your stay username.

Dengan melihat contoh sederhana kode diatas saya harap anda dapat mengerti dengan mudah. Baik sekarang langsung saja saya bagikan kode javascript yang memuat tool parsing html.

CODE JAVASCRIPT TOOL HTML-PARSER

<div style="text-align: center; width: 100%;">
<div style="margin: 0 auto; padding: 0; width: 100%;">
<div id="mainDiv" style="padding: 2px 0;">
<textarea cols="21" id="tarea" onfocus="code_check();" rows="10" style="font-size: 12px; height: 80%; width: 92%;"></textarea>
<div style="margin: 0 auto; padding: 5px 0; width: 95%;">
<button onclick="code_convert();" style="margin-right: 5px;" type="button">Konvert</button>
<button onclick="code_clear();" style="margin-left: 5px;" type="button">Hapus</button> </div>
</div>
</div>
</div>
<script>
function code_check(){
var focuscheck=document.getElementById('tarea');if(focuscheck.value.indexOf('Pastekan Disini Kode yang Akan Anda Pasang pada Postingan Blog')>0)focuscheck.value='';}
function code_clear(){
var wtarea=document.getElementById('tarea');wtarea.value='';}
function code_convert(){
var ctarea=document.getElementById('tarea');var toConvert=ctarea.value;
var toConvert=toConvert.replace(/&/g,"&amp;");
var toConvert=toConvert.replace(/'/g,"&#039;");
var toConvert=toConvert.replace(/"/g,"&quot;");
var toConvert=toConvert.replace(/</g,"&lt;");
var toConvert=toConvert.replace(/>/g,"&gt;");
ctarea.value=toConvert;ctarea.focus();ctarea.select();};
var x=document.getElementById('tarea');x.value='\nPastekan Disini Kode yang Akan Anda Pasang pada Postingan Blog\n\nTool ini Meng-konversi Kode sbb:\n < " & \' >\nmenjadi\n &lt; &quot; &amp; &#039; &gt;\n\nCreated by 4softcomputer.blogspot.com';x.rows=gr;
</script>

Hasilnya seperti ini :

Silahkan copy-paste kode diatas pada blog atau website. Anda dapat meletakkannya pada bagian widget ataupun pada satu halaman tersendiri. silahkan Ganti dengan alamat blog anda sendiri

Semoga postingan saya kali ini bermanfaat. Bagi yang tidak sabar untuk mencobanya di blog/website masing-masing, segeralah mencobanya!