Cara Membuat Tools Untuk Parse HTML Keren Diblog

Tools parse ini akan sangat membantu kamu apabila blog kamu membahas tentang koding seperti tutorial blogging yang isinya penuh dengan kode-kode HTML
Cara Membuat Tools Untuk Parse HTML Diblog - Tools parse ini akan sangat membantu kamu apabila blog kamu membahas tentang koding seperti tutorial blogging yang isinya penuh dengan kode-kode HTML dan CSS. Kalau biasanya kamu menulis artikel berisi kode-kode HTML dengan bantuan website lain, kini kami bisa membuat tools parse itu sendiri dan memasangnya diblog kamu.

Jadi kamu gak perlu pergi jauh-jauh bolak-balik ke website tools parse HTML hanya untuk memparsekan kode. Di artikel kali ini saya akan beritahu bagaimana caranya membuat dan memasang tool parse HTML diblog. Tools ini adalah tools yang dibuat dan di desain oleh blognya arlinacode.com. 

Untuk cara pembuatannya ikuti langkah-langkah dibawah ini. 

Cara Membuat Tools Parse HTML Di Blog Blogger


Gambar Cara Membuat Tools Untuk Parse HTML Diblog
  1. Masuk ke dashboard blogger kamu.
  2. Kemudian buatlah postingan atau halaman statis baru untuk membuat tools ini. Saya sarankan pasang tools ini di halaman statis saja jangan di postingan. 
  3. Setelah masuk ke halaman atau postingan pindah ke mode HTML bukan Compose
  4. Lalu tambahkan kode dibawah ini ke dalam halaman tersebut.
    <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(&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>
    <script type="text/javascript">//<![CDATA[
    function downloadJSAtOnload(){var d=document.createElement("script");d.src="https://cdn.jsdelivr.net/gh/Arlina-Design/[email protected]/htmlparse.js",document.body.appendChild(d)}window.addEventListener?window.addEventListener("load",downloadJSAtOnload,!1):window.attachEvent?window.attachEvent("onload",downloadJSAtOnload):window.onload=downloadJSAtOnload;
    //]]></script>
  5. Kalau sudah klik publis dan lihat hasilnya.

Sampai disini kamu sudah berhasil memasang tools untuk parse HTML diblog kamu sendiri. Gampangkan? Untuk hasil dari tools tersebut bisa kamu lihat di halaman statis Tools Parse HTML

Itulah tutorial cara membuat dan memasang tools untuk parse kode HTML diblog yang bisa saya sampaikan. Kalau masih bingung atau tidak paham sama sekali, langsung saja tanyakan di kolom komentar.

Source :
https://www.arlinacode.com/2020/07/cara-memasang-tools-untuk-parse-html.html?m=1

There are many unique things in the world that you haven't seen

Tulis Komentar

1. Centang kotak "Notify Me" sebelum anda berkomentar.
2. Hindari berkomentar diluar pembahasan artikel diatas.
3. Dilarang memasukan link aktif!
4. Gunakan <i>comment</i> untuk menuliskan kode.
5. Gunakan <em> untuk menuliskan kode yang lebih panjang atau URL.
6. Jika ingin memasukan kode, parse terlebih dahulu (Terutama JavaScript dan HTML).
7. Dilarang mempromosikan produk atau situs apapun di kolom komentar!