Membuat Parse HTML di blog

Parse HTML merupakan proses merubah karakter-karakter kode HTML tertentu dalam suatu script menjadi kode unik. Adapun fungsi Parse yaitu untuk mencegah tampilan error pada sebuah halam html yang dibuka melalui beberapa browser tertentu, dan kode html yang sudah di parse akan lebih SEO Friendly dan Valid html5.

Kode iklan yang diberikan oleh Google Adsence sebaiknya di Parse terlebih dulu agar kodenya sesuai atau dapat diterapkan pada template blog anda / agar terbaca oleh berbagai template yang berbeda-beda dengan struktur yang beragam.

Selain itu Parse HTML sering digunakan untuk menampilkan kode script html di postingan terbaca sebagai teks biasa. Sebagai contoh form (kotak) Parse HTML seperti di atas, itu merupakan hasil dari kode HTML yang tidak di Parse, sedangkan kode HTML yang berada di bawah merupakan kode html untuk membuat form Parse HTML yang sudah di Parse sehingga tampilnya kode html tersebut seperti teks biasa. Sobat bisa mencoba copy kode html di bawah dan paste di postingan blog sobat. Kemudian coba juga kode html di bawah lalu Parse dan copy paste ke postingan blog sobat, dan sobat bisa melihat perbedaan hasilnya.

Bagi sobat yang ingin membuat form Parse HTML di blog sobat, silahkan gunakan kode berikut di postingan blog sobat. sehingga dengan adanya Form Parse HTML di blog kita sendiri maka dalam membuat postingan untuk menampilkan kode script HTML agar pekerjaan saya bisa lebih cepat.

Masukan kode berikut pada postingan anda pada mode HTML bukan "Compose"

<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>
<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.statically.io/gh/KompiAjaib/kompi-js/master/copyclipboard_parse.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]>
</script>

Hasilnya bisa di lihat di Parse HTML

Sumber :