Cara buat halaman tool parse html blogspot

Cua
23 Jun, 2023
Cara buat halaman tool parse html blogspot

Tool parse html blogspot - Cara buat halaman tool parse html blogspot ini sangat lah mudah, halaman parse ini sangat berguna untuk kalangan blogger yang ingin mengurai kode scriptnya untuk di tampilkan pada postingan. Apalagi jika blogger itu membahas tentang kode program lalu mau memperjelas kode script nya tersebut ke satu artikel, tentu alat parse ini berguna baginya.

Bukan hanya untuk artikel yang menunjukan script saja, tool ini juga dapat berguna untuk mengkompres iklan adsense sebelum di tambahkan ke template blog, tentu banyak sekali manfaat yang ada pada tool parse htlm ini. Kamu pun gak perlu lagi susah payah ke situs pihak ketiga untuk mengubah kode html ke xml yang kamu punya

Tool parse

Tool parse adalah alat yang mengubah kode html ke kode xml yang terlihat lebih sederhana. Sebenarnya alat ini hanya mengubah kode-kode di bawah dengan cara otomatis, berikut perubahan kodenya:

  • Kode < berubah menjadi  &lt;
  • Kode > berubah menjadi  &amp;
  • Kode ' berubah menjadi &#039;
  • Kode " berubah menjadi &quot;

Cara buat halaman tool parse html blogspot

Berikut cara buat halaman tool parse html di blogspot. Simak langkah-langkahnya:

  • Buka Dasbor Blogger kamu
  • Pada menu sebelah kiri pilih Halaman
  • Buat halam baru dengan klik tombol "+ Halaman Baru"
  • Jika kamu masih berada di mode "Tampilan menulis" ganti menjadi "Tampilan HTML"
  • Setelah di mode HTML salin kode script di bawah untu membuat tool parse html blogspot
  • Setelah selesai, tekan tombol panah di atas untuk publikasikan.

Script kode tool parse html blogspot

<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:#e1ed84;border:1px solid rgba(0,0,0,0.05);height:300px;width:100%;margin:0 0 10px;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111;border-radius:8px;padding:20px;transition:all .6s}
#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{border-color:rgba(0,0,0,0.15);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>
<br />
<div id="parser2"><textarea id="somewhere" placeholder="Write/paste the code here then click the Parse Code button"></textarea><br />
<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> <br />
<h4>Code copied to clipboard</h4></div><button class="btn btn-primary btn-sm btn-parse" onclick="convert();" type="button">Parse Code</button> <br />
<div class="clear"></div><button class="btn button-link btn-xs btn-info" data-clipboard-action="copy" data-clipboard-target="#somewhere" id="button-link" 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>

Ganti warna tampilan

Jika kurang keren kamu liat tampilan nya, kamu bisa mengganti kode warna nya di bagian-bagian berikut ini

Warna Latar belakang

#parser2 textarea#somewhere{background:#e1ed84;border:1px solid rgba(0,0,0,0.05);height:300px;width:100%;margin:0 0 10px;box-sizing:border-box;font-family:Consolas,Monaco,'Andale Mono',monospace;color:#111;border-radius:8px;padding:20px;transition:all .6s}

Warna Tombol Parse

#parser2 .btn-primary{color:#fff;background:#3e51b5}

Warna Tombol Clean

#parser2 .btn-danger{color:#fff;background:#f39c12}

Untuk melihat tampilan demo bisa chek di tombol di bawah

Demo Parse

Rangkuman

Dengan membuat halaman parse ini kamu akan sangat terbantu dalam menampilkan kode script di artikel blog kamu, dan juga tool parse ini bisa kamu pakai untuk parse kode script lain seperti kode adsese, tag manager google dan kode analytics google. Baca juga artile lain nya untuk keperluan blog kamu di blog ciacua ini.

Cua

Cua

Happy to write, play gaming, learn coding and learn everything that I read. Also always share knowledge.

Next Post Previous Post