Cara Membuat Tool Parse HTML Online Blogger

Daftar Isi: (toc)

Tangkapan Layar (Hasil Jadi)

- Sebagian besar blogger mesti pernah menggunakan tool html parser. Ketika ingin memasukkan kode html atau javascript ke dalam template blogger biasanya membutuhkan tool untuk mengkonversi menjadi kode XML.

style="display:block"
data-ad-client="ca-pub-3968788323447297"
data-ad-slot="3675022914"
data-ad-format="auto"
data-full-width-responsive="true">

HTML Parser Tools atau juga biasanya disebut Parse HTML merupakan sebuah tool yang digunakan untuk mengubah kode HTML atau Javascript menjadi kode XML yang kompatibel dengan template blog. Untuk menggunakan tool ini Anda bisa mencarinya dengan mudah di internet karena tool ini banyak tersedia secara online.

Sebenarnya cara kerja Tool ini hanya mengubah beberapa kode menjadi kode XML seperti kode berikut ini:

✔ Karakter '&' Menjadi '&amp'.

✔ Karakter '>' Menjadi '&gt'.

✔ Karakter '''' (single quote) Menjadi '&#039'.

✔ Karakter '""' (Double Quote) Menjadi '&quot'.

Tool Parse HTML juga bisa Anda buat sendiri di blog dengan cara membuat halaman statis terlebih dahulu. Jika Anda tertarik untuk membuatnya, berikut ini Cara Menambahkan Tool Untuk Parse HTML di Blog silahkan ikuti langkah-langkahnya.

Cara Menambahkan Tool Untuk Parse HTML di Blog

Pertama-tama, silahkan masuk ke halaman dasbor Blogger kemudian pilih menu "Halaman/Pages" lalu klik "Halaman Baru/New Page".

Tahap selanjutnya, silahkan pilih mode "HTML" kemudian masukkan kode dibawah ini

Kode:

<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/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>

Demo

Tahap terakhir, silahkan klik "Publikasikan/Publish" kemudian lihat hasilnya.

Mudah bukan? Itulah pembahasan mengenai Tips Trik Blog Untuk Membuat Tool Parse HTML Tips Trik Blog semoga bermanfaat untuk Anda. Apabila ada hal yang ingin ditanyakan, silahkan bertanya melalui kolom komentar dibawah ini yah.[source]

Find Out

Ikuti Gacerindo.com pada Aplikasi GOOGLE NEWS : FOLLOW (Dapatkan Berita Terupdate tentang Dunia Pendidikan dan Hiburan). Klik tanda ☆ (bintang) pada aplikasi GOOGLE NEWS.