Indonesia Website Awards

[Tutorial] Cara Memasang dan Membuat Tools Parse HTML, JAVASCRIPT

Cara Memasang dan Membuat Tools Parse HTML, JAVASCRIPT
Seotechman.com, Bogor 28/10/20. Pada peluang kali ini saya akan membagikan kiat tutorial cara memasang dan membuat sebuah alat atau tools parse HTML, JAVASCRIPT.

Tools ini berfungsi untuk memparse markup HTML dan JAVASCRIPT yang lazimnya dipakai untuk artikel-artikel yang berafiliasi dengan pengembangan web atau tips blogger seperti yang ada pada blog seotechman ini.

Baiklah, tanpa berlama-lama silahkan simak selanjutnya dibawah ini.

Cara Memasang dan Membuat Tools Parse HTML, JAVASCRIPT


Caranya cukup mudah, teman-teman cuma perlu menyalin semua isyarat di bawah ini di mana saja. Biasanya kalau di blog saya, saya pasang di halaman statis blog pada tab HTML (Bukan Compose).


<style scoped="" type="text/css">
#parser2position:relative;overflow:hidden #parser2 .btn,#parser2 .btn:activebackground-image:none #parser2 .btnfont-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:focusoutline:0 #parser2 .btn:focus,#parser2 .btn:hovercolor:#333;text-decoration:none;outline:0 #parser2 .btn:activeoutline: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-primarycolor:#fff;background:#3e51b5 #parser2 .btn-primary:focus,.button-group button:disabledcolor:#fff;background:#286090 #parser2 .btn-primary:active,#parser2 .btn-primary:hovercolor:#fff;opacity:.9 #parser2 .btn-dangercolor:#fff;background:#f39c12 #parser2 .btn-danger:focuscolor:#fff;opacity:.9 #parser2 .btn-danger:active,#parser2 .btn-danger:hovercolor:#fff;opacity:.9 #parser2 .btn-infocolor:#fff;background:#5bc0de #parser2 .btn-info:focuscolor:#fff;background:#31b0d5 #parser2 .btn-gosip:active,#parser2 .btn-info:hovercolor:#fff;background:#31b0d5 #parser2 .btn-xsfont-size:12px;line-height:1.5;border-radius:3px;padding:1px 5px #parser2 textarea#somewherebackground:#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:focusoutline:0 #parser2 .btn-smdisplay: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-xsfont-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) .collapsedisplay:none .alert-successcolor:#222;background:#fff .alertborder: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.closepadding:0;cursor:pointer;background:none;border:0;-webkit-appearance:none .closefloat:right;font-size:1.3rem;color:#0984e3;margin:1px 0 0 0 button.close:focusoutline:0 .close:hoveropacity:1!important #btnInfo h4margin:0;font-size:13px;line-height:2 #button-linkdisplay:none .clearclear:both;display:block;margin-bottom:2px .alert brdisplay: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(&quot;btnInfo&quot;).style.display = &quot;none&quot;;cdClear();' type='button'><span aria-hidden='true'>&#215;</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>

Setelah terpasang silakan sobat lihat alhasil. Berikut ini yakni teladan dari Tools Untuk Parse HTML

Result