Ini tampilannya Parse HTML yang akan kita buat:
ambyarblog |
Cara Membuat Tools untuk Parse HTML di Blog
Caranya cukup mudah, anda hanya perlu salin kode dibawah ini dimana saja. Biasanya saya pasang di postingan halaman statis blog pada tab HTML (bukan Compose).
<style scoped="" type="text/css">
#parser2{position:relative;overflow:hidden}
#parser2 .btn,#parser2 .btn:active{background-image:none}
#parser2 .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:0;border-radius:4px;cursor:pointer;transition:all .3s}
#parser2 .btn:active:focus,#parser2 .btn:focus{outline:0}
#parser2 .btn:focus,#parser2 .btn:hover{color:#333;text-decoration:none;outline:0}
#parser2 .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)}
#parser2 .btn-primary{color:#fff;background:#3e51b5}
#parser2 .btn-primary:focus,.button-group button:disabled{color:#fff;background:#286090}
#parser2 .btn-primary:active,#parser2 .btn-primary:hover{color:#fff;opacity:.9}
#parser2 .btn-danger{color:#fff;background:#f39c12}
#parser2 .btn-danger:focus{color:#fff;opacity:.9}
#parser2 .btn-danger:active,#parser2 .btn-danger:hover{color:#fff;opacity:.9}
#parser2 .btn-info{color:#fff;background:#5bc0de}
#parser2 .btn-info:focus{color:#fff;background:#31b0d5}
#parser2 .btn-info:active,#parser2 .btn-info:hover{color:#fff;background:#31b0d5}
#parser2 .btn-xs{font-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px}
#parser2 textarea#somewhere{background:#fef1c8;border:0;height:300px;width:100%;margin:0 0 10px;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111;border-radius:10px;box-shadow:inset 0 -5px 5px rgba(0,0,0,0.05);padding:20px}
#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{outline:0}
#parser2 .btn-sm{display:inline-block;font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:0 auto 10px auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}
#parser2 .btn-xs{font-size:13px;line-height:1.5;border-radius:5px;padding:12px;margin:auto;width:30%;box-shadow:0 3px 1.2rem -0.8rem rgba(0,0,0,0.8)}
.collapse{display:none}
.alert-success{color:#222;background:#fff}
.alert{border:0;padding:5px 15px;border-radius:10px;position:absolute;top:20px;right:20px;min-width:210px;color:#0984e3;font-size:13px;box-shadow:0 2px 4px 0 rgba(0,0,0,0.16)}
button.close{padding:0;cursor:pointer;background:none;border:0;-webkit-appearance:none}
.close{float:right;font-size:1.3rem;color:#0984e3;margin:1px 0 0 0}
button.close:focus{outline:0}
.close:hover{opacity:1!important}
#btnInfo h4{margin:0;font-size:13px;line-height:2}
#button-link{display:none}
.clear{clear:both;display:block;margin-bottom:2px}
.alert br{display:none}
</style>
<div id="parser2">
<textarea id="somewhere" placeholder='Write/paste the code here then click the Parse Code button'></textarea>
<div class='alert alert-success margin-bottom-20 collapse' id='btnInfo' role='alert'>
<button class='close close-copy' onclick='document.getElementById("btnInfo").style.display = "none";cdClear();' type='button'><span aria-hidden='true'>×</span></button>
<h4>Code copied to clipboard</h4>
</div>
<br/> <button onclick="convert();" class='btn btn-primary btn-sm btn-parse' type="button">Parse Code</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 code to clipboard</button> <button class='btn btn-danger btn-xs' id='btn_clear' onclick='cdClear();'>Clean</button>
</div>
<script type="text/javascript">//<![CDATA[
function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/Arlina-Design/redvision@master/htmlparse.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
//]]></script>
Setelah terpasang silahkan anda lihat hasilnya, apa sudah sesuai dengan gambar.Penutup
Itulah Cara Membuat Tools untuk Parse HTML di Blog. Sampai disini dulu, bila ada yang mau ditanyakan silahkan komen saja dibawah. Selamat mencoba, sekian dan terima kasih.Anda ingin membeli template LinkMagz dengan harga murah bisa melalui jasa saya, tinggal klik disini: LinkMagz.