Cara Membuat Tools HTML Parse di Halaman Statis Style 2

Cara Membuat Tools HTML Parse di Halaman Statis Style 2

Cara Membuat Tools Parse HTML di Halaman Statis Style 2
Sempetin.my.id - Jika anda seorang blogger pasti pernah menemukan masalah dengan penulisan di kode HTML pada artikel, yang dimana kode nya tersebut tidak muncul sesuai yang kita tuliskan.

Hal ini biasa dialami oleh seorang blogger pemula yang belum mengetahui bahwa kode HTML harus di parse dahulu jika ingin ditampilkan di halaman artikel. Nah, pada postingan kali ini admin telah merangkum tentang apa itu HTML Parse dan juga kegunaannya.

Sebenarnya bukan hanya penulisan kode HTML pada artikel yang harus di parse, tetapi penulisan kode HTML iklan Google Adsense pun harus kita parse terlebih dahulu sebelum di tampilkan. Hal ini juga perlu kita lakukan agar iklan dapat di tampilkan dengan sempurna.

Pembahasan

Tools Parse HTML merupakan sebuah alat untuk mengkonversi atau mengurai kode HTML menjadi character entities di HTML.

Lalu mengapa harus di parse terlebih dahulu jika kita ingin publikasikan? Hal ini perlu dikarenakan platform blogger masih menggunakan extensi XML (Extended Markup Language).

Cek artikel yang anda tulis, apabila menemukan kode HTML seperti berikut, silahkan ganti
Diatas adalah contoh apabila anda menggunakan cara manual yang membutuhkan ketelitian dan menyita banyak waktu. Ada juga cara yang lebih mudah yaitu dengan menggunakan halaman alat Parse HTML yang telah kami sediakan.

Jika ingin pasang tools ini di halaman statis blog anda sendiri, tentu bisa. Ikuti tutorial berikut agar tidak error pada tampilan maupun fungsinya.

Cara Pemasangan

  1. Silahkan login terlebih dahulu ke Blogger
  2. Lalu buat pergi ke Halaman > buat Halaman Baru
  3. Pilih metode penulisan HTML bukan Compose, kemudian letakkan kode berikut ini.
    <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:#087E72}
    #parser2 .btn-primary:focus,.button-group button:disabled{color:#fff;background:#07645A}
    #parser2 .btn-primary:active,#parser2 .btn-primary:hover{color:#fff;opacity:.9}
    #parser2 .btn-danger{float:right;color:#fff;background:#b32d00}
    #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:#fefefe;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 or paste the code HTML 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> <button class='btn btn-danger btn-xs' id='btn_clear' onclick='cdClear();'>Clean</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</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>
    Anda bebas untuk redesign tampilan tools tersebut, kreasikan sesuai keinginan.
  4. Publikasikan.
Apabila anda menerapkan tutorial diatas dengan benar bisa dipastikan tools tersebut bisa langsung anda digunakan.

Penutup

Jika kurang jelas, atau kurang paham bisa anda tanyakan melalui kolom komentar yang tersedia dibawah artikel ini, sebisa mungkin akan kami balas jika tidak ada kesibukan.

Mungkin sekian dulu artikel yang dapat kami berikan, semoga bermanfaat dan jangan lupa untuk share jika dirasa bermanfaat.
Terima kasih

Fernand
Fernand Kecanduan berbagi ilmu!

Tidak ada komentar