Langkah Mudah Membuat Parse HTML

BLOG MOBILE




Balik lagi di BLOG MOBILE kali ini saya akan membuat parse HTML di blog.

Deskripsi Parse HTML



Sebelumnya saya jelaskan dulu apa itu Parse HTML ???
     Parse HTML adalah sebuah alat atau tool yang berguna untuk meng convert script HTML atau kode kode,istilah parse dalam bahasa inggris yang artinya MENGURAI jadi bisa di katakan Parse HTML itu menguraikan kode kode atau tanda tanda dalam bahasa pemograman menjadi kode entitas.
Jadi intinya Parse HTML bisa menguraikan kode kode.

Fungsi Parse HTML



Dengan meng Parse code juga berfungsi untuk menjaga tmpilan website agar tidak ERROR di browser lama selain itu juga membuat sebuh laman menjadi seo friendly.

  • Bisasanya Parse HTML di gunakan untuk menerapkan kode kode iklan agar bisa dapat di pasang di blog.
  • Parse HTML juga di terapkan untuk. Membuat kotak highlight/atau kotak script.

Mungkin sedikit mengerti kan tentang Parse HTML dan kegunaannya.

Nah jika anda ingin membuat atau membutuhkan Parse HTML anda bisa gunkan scrpit di bawah 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>
Kode script di atas bisa di diterapkan di postingan blog,di halaman statis atau di sidebar widget dan sudah valid HTML5.
Dan hasilnya seperti yang terlihat di bawah ini.

Jika ingin menerapkan di template AMP HTML silahkan anda hosting dulu script di bawah ini dan gunakan iframe untuk untuk menerapkannya.
<link href='https://fonts.googleapis.com/css?family=Roboto:100,200,300,400italic,400,500,500italic,700,700italic,900' rel='stylesheet' type='text/css'/>

<style>

body {

background-color:white;

margin:0;

padding:0;

color:#212121;font-family:Roboto,sans-serif;

}

.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">

function convert() {

var ele1 = document.getElementById("somewhere");

var replaced;

replaced = ele1.value;

replaced = replaced.replace(/&/ig, "&amp;");

replaced = replaced.replace(/</ig, "&lt;");

replaced = replaced.replace(/>/ig, "&gt;");

replaced = replaced.replace(/"/ig, "&quot;");

replaced = replaced.replace(/'/ig, "&#039;");

replaced = replaced.replace(/&#177;/ig, "&plusmn;");

replaced = replaced.replace(/&#169;/ig, "&copy;");

replaced = replaced.replace(/&#174;/ig, "&reg;");

replaced = replaced.replace(/ya'll/ig, "ya'll");

ele1.value = replaced;

	document.getElementById("button-link")

.style.display = "inline-block";

document.getElementById("btn_clear")

.style.display = "inline-block";

}

function cdClear() {

var wtarea = document.getElementById('somewhere');

wtarea.value = '';

document.getElementById("btnInfo")

.style.display = "none",document.getElementById("button-link")

.style.display = "none"

}

</script>

<script src='https://cdn.rawgit.com/zenorocha/clipboard.js/v1.5.16/dist/clipboard.min.js'></script>

<script>

//<![CDATA[

var clipboard = new Clipboard(".button-link");

clipboard.on("success", function (o) {

console.log(o), document.getElementById("btnInfo")

.style.display = "block", document.getElementById("somewhere")

.value = ""

}), clipboard.on("error", function (o) {

console.log(o)

});

//]]>

</script>

Cobtoh iframe
<amp-iframe width="700"
      height="900"
layout="responsive"      
sandbox="allow-scripts allow-same-origin allow-popups"
      frameborder="0"
      scrolling="no"
      src="URL DI SINI">
  </amp-iframe>




blog views
Reactions:
Donate via PayPal

You Might Also Like:

ADD A COMMENT WITH YOUR FACEBOOK PLEASE WAIT FOR FACEBOOK COMMENT WILL SOON OPEN

ADD A COMMENT WITH DISQUS HIDE COMMENT

Disqus Comments

ADD A COMMENT WITH GOOGLE PLUS HIDE COMMENT

google Comments

Hello, how may we help you? Just send us a message now to get assistance.

Facebook Messenger ×