--> Skip to main content

Cara Membuat Tool Parse HTML dan Kode Postingan

Tool parse HTML biasanya kita gunakan untuk memparse kode iklan, css, js atau kode lainnya yang biasa digunakan blog. Pada artikel kali ini saya akan membuatkan tutorial bagaimana cara untuk membuat tool parse tersebut. Sekaligus cara untuk membuat form parse kode postingan blog yang otomatis menambahkan tag pre code.

Untuk demonya silahkan coba pada link tools parse html dan kode postingan yang telah saya buat.

Tools ini sudah dilengkapi dengan tombol untuk menghapus dan mengcopy otomatis. Terimakasih kepada mas Adhy yang telah membagikan kode untuk membuat tools ini.

Buat kamu yang ingin membuat tool tersebut, silahkan ikuti langkah-langkahnya berikut ini.

Blog Non AMP

Copy kode berikut di postingan kamu dalam mode html (bukan compose). Kamu bisa juga menambahkan teks sebelum kode ini sebagai penjelasan.

Kode parse HTML

<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;white-space:pre-wrap;}
#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;z-index:2}
.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,#btn_clear{display:none}
.btn-reset{padding:0;border:0;background:0 0;position:absolute;top:10px;right:15px;color:#ddd;font-size:34px;font-weight:lighter;cursor:pointer;line-height:1;display:none;z-index:1}
.btn-reset:hover{color:#555}
.btn-reset:focus{outline:0}
.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">×</span></button>
<h4>Codes copied to clipboard!</h4>
</div>
<br />
<button class="btn btn-primary btn-sm btn-parse" onclick="convert();" type="button">Parse Codes</button>
<div class="clear"></div>
<button class="btn button-link btn-xs btn-info" data-clipboard-action="copy" data-clipboard-target="#somewhere" id="button-link" type="submit">Copy codes to clipboard!</button> <button class="btn btn-danger btn-xs" id="btn_clear" onclick="cdClear();">Bersihkan</button>
</div>

Parse kode postingan 

Copy kode berikut untuk membuat tool parse kode postingan:

.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;white-space:pre-wrap;}
#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;z-index:2}
.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,#btn_clear{display:none}
.btn-reset{padding:0;border:0;background:0 0;position:absolute;top:10px;right:15px;color:#ddd;font-size:34px;font-weight:lighter;cursor:pointer;line-height:1;display:none;z-index:1}
.btn-reset:hover{color:#555}
.btn-reset:focus{outline:0}
.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' onfocusin="focusFunction()"></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 class='btn-reset' id='btn-reset' onclick='cdClear2();'>&times;</button>
      <br/>
<button onclick="convert();textareaReplaceLineBreaks('#somewhere');" 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(/&#177;/ig, "&plusmn;");
    replaced = replaced.replace(/&#169;/ig, "&copy;");
    replaced = replaced.replace(/&#174;/ig, "&reg;");
    replaced = replaced.replace(/ya'll/ig, "ya'll");
    replaced = replaced.replace(/^/, "<pre><code>");
    replaced = replaced.replace(/$/, "</code></pre>");
    replaced = replaced.replace(/  /g, "&nbsp; ");
    replaced = replaced.replace(/(\r\n|\n)/g, "<br />\r\n")
    ele1.value = replaced;
document.getElementById("button-link")
        .style.display = "inline-block";
    document.getElementById("btn_clear")
        .style.display = "inline-block";
document.getElementById("btn-reset")
        .style.display = "none";
}
function cdClear() {
  var wtarea = document.getElementById('somewhere');
  wtarea.value = '';
  document.getElementById("btnInfo")
        .style.display = "none",document.getElementById("button-link")
        .style.display = "none",document.getElementById("btn_clear")
        .style.display = "none"
}
function cdClear2() {
  var wtarea = document.getElementById('somewhere');
  wtarea.value = '';
  document.getElementById("btn-reset")
        .style.display = "none";
}
function focusFunction() {
    document.getElementById("btn-reset").style.display = "block";
}
</script>
<script src='https://cdn.statically.io/gh/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("button-link")
        .style.display = "none", document.getElementById("btn-reset")
        .style.display = "none", document.getElementById("somewhere")
        .value = ""
}), clipboard.on("error", function (o) {
    console.log(o)
});
//]]>
</script>

Perbedaan kode pertama dengan kedua ini hanyalah terletak pada scriptnya saja. Ada penambahan tag pre code secara otomatis dan juga tag <br/>. Pada intinya css kedua kode tersebut sama.

Blog AMP

Untuk blog AMP kita bisa memanfaatkan iframe. Kita terlebih dahulu copy kode di atas dengan format html. Kemudian upload ke github dan gunakan cdn statically untuk urlnya. Setelah itu barulah bisa dipanggil dengan iframe di blog AMP.

Jika Anda tidak ingin ribet silahkan gunakan kode berikut ini.

Parse html

<amp-iframe height="350"
      layout="fixed-height"
      sandbox="allow-scripts allow-same-origin allow-popups"
      frameborder="0"
      src="https://cdn.statically.io/gh/tedieka/JS-parse/main/parsehtml.html">
  </amp-iframe>

Parse kode postingan

<amp-iframe frameborder="0" height="350" layout="fixed-height" sandbox="allow-scripts allow-same-origin allow-popups" src="https://cdn.statically.io/gh/tedieka/JS-parse/main/parsecode.html">
  </amp-iframe>

Kode di atas tidak hanya bisa di letakkan di postingan blog saja, melainkan bisa juga ditempatkan di widget blog. Tergantung dimana kamu akan meletakkan tools tersebut.

Newest Post
Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar
Tutup Komentar

Coba aplikasi TipsdanTrik.web.id

Tambahkan aplikasi TipsdanTrik di smartphone tanpa install, buka TipsdanTrik dengan browser Chrome di smartphone. Kemudian klik ikon 3 titikdi browser dan pilih "Tambahkan ke layar utama". Selanjutnya klik aplikasi TipsdanTrik dari layar utama smartphone Anda.