Jika kamu seorang Blogger dan publisher Google Adsense, tentu kamu sudah tidak asing dengan istilah 'Parse HTML' karena mungkin hal ini sudah sering kamu lakukan untuk memasang iklan di blog mu ataupun mengoptimalkan template blog.

Namun, bila kamu masih tergolong baru dengan dunia blog ataupun baru saja berhasil menjadi seorang publisher Google Adsense, mungkin kamu masih bingung tentang apa sebenarnya Parse HTML itu. Untuk menjawab kebingunganmu, coba simak artikel berikut ini.

Penjelasan Dan Cara Membuat Alat Parse HTML Untuk Blog

Apa itu Parse HTML?

Parse HTML merupakan sebuah upaya untuk mengurai kode-kode HTML menjadi entitas karakter di HTML sehingga dapat dimengerti.

Spoiler: Contoh Parse HTML

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

Fungsi Parse HTML

Parse HTML sendiri biasa dilakukan oleh para Blogger terhadap kode-kode seperti script iklan Adsense dan lain sebagainya yang akan dipasang di template Blogger. Hal ini dikarenakan template Blogger merupakan file XML (Extended Markup Language) yang hanya dapat membaca bila kode tersebut telah di parse sebelumnya. 

Cara Melakukan Parse HTML

Untuk kamu yang ingin melakukan Parse HTML, kamu dapat melakukannya dengan menggunakan alat Parse HTML milik Gubuk Pintar.

Cara Membuat Alat Parse HTML Sendiri

Bila kamu ingin memiliki alat Parse HTML sendiri seperti milik di Gubuk Pintar, kamu dapat memilikinya dengan cara berikut ini.

• Buat sebuah halaman/post baru
• Pilih metode penulisan HTML

• Copy kode berikut ini

<style scoped="">
.btn,.btn:active{background-image:none}
.btn{font-weight:400;padding:6px 12px;margin-bottom:5px;font-size:14px;line-height:1.42857143;text-align:center;white-space:nowrap;-ms-touch-action:manipulation;touch-action:manipulation;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;border:1px solid transparent;border-radius:4px;cursor:pointer}
.btn:active:focus,.btn:focus{outline:0}
.btn:focus,.btn:hover{color:#333;text-decoration:none;outline:0}
.btn:active{outline:0;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px rgba(0,0,0,.125)}
.btn-primary{color:#fff!important;background-color:#337ab7;border-color:#2e6da4}
.btn-primary:focus,.button-group button:disabled{color:#fff;background-color:#286090;border-color:#122b40}
.btn-primary:active,.btn-primary:hover{color:#fff;background-color:#286090;border-color:#204d74}
.btn-danger{color:#fff!important;background-color:#d9534f;border-color:#d43f3a}
.btn-danger:focus{color:#fff;background-color:#c9302c;border-color:#761c19}
.btn-danger:active,.btn-danger:hover{color:#fff;background-color:#c9302c;border-color:#ac2925}
.btn-info{color:#fff!important;background-color:#5bc0de;border-color:#46b8da}
.btn-info:focus{color:#fff;background-color:#31b0d5;border-color:#1b6d85}
.btn-info:active,.btn-info:hover{color:#fff;background-color:#31b0d5;border-color:#269abc}
.btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
#parser2 textarea#somewhere{background:#f8f8f8;border:1px solid #ccc;height:300px;width:100%;padding:10px;margin:0 0 10px;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111}
#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{border:2px solid #e8554e;outline:0}
.btn-sm{font-size:12px;line-height:1.5;border-radius:3px;padding:5px 10px}
.btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
.collapse{display:none}
#parser2{position:relative}
.alert-success{color:#3c763d;background-color:#dff0d8;border-color:#d6e9c6}
.alert{padding:15px;border:1px solid transparent;border-radius:4px;position:absolute;top:10px;right:10px;min-width:230px} button.close{padding:0;cursor:pointer;background:0 0;border:0;-webkit-appearance:none;line-height:1}
.close{float:right;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.2}
button.close:focus{outline:0}
.close:hover{opacity:1!important}
#btnInfo h4{margin:0}
#button-link{display:none}
.clear{clear:both;display:block;margin-bottom:2px;}
</style>
<div id="parser2">
<textarea id="somewhere" placeholder='Tulis/paste kode di sini lalu klik tombol Parse Codes'></textarea>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>
<button class='close close-copy' onclick='document.getElementById(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();' type='button'><span aria-hidden='true'>&#215;</span></button>
<h4>Codes copied to clipboard!</h4>
</div>
<br/>
<button onclick="convert();" class='btn btn-primary btn-sm btn-parse' type="button">Parse Codes</button>
<div class="clear"></div>
<button class='btn button-link btn-xs btn-info' id='button-link' data-clipboard-action='copy' data-clipboard-target='#somewhere' type='submit'>Copy codes to clipboard!</button> <button class='btn btn-danger btn-xs' id='btn_clear' onclick='cdClear();'>Bersihkan</button>
</div>
<script type="text/javascript">
//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.rawgit.com/KompiAjaib/kompi-js/084f0a35/copyclipboard_parse.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

• Publikasikan halaman/post tersebut agar alat Parse HTML mu dapat mulai digunakan

Dilansir dari blog Kompiajaib, Alat Parse HTML ini sudah valid HTML5 yang merupakan versi terbaru dan alat Parse HTML ini juga dapat kamu letakan di widget atau sidebar blog mu agar memudahkan pengunjung untuk menggunakannya.

***

Bila memiliki pertanyaan seputar penjelasan dan cara membuat alat Parse HTML untuk blog, silahkan tulis dikolom komentar ya.

Baca juga: