Cara Membuat Tools Parse HTML di Blogger

Selamat malam semuanya kembali lagi bersama saya mimin enalblogger, yang baik hati dan suka berbagi, kali ini saya akan membagikan cara memasang tools parse HTML atau alat konversi sendiri di blog, kamu dapat menentukan sendiri sesuka kamu dimana posisi yang tepat untuk tools ini.

Mungkin kamu sudah tahu apa fungsi dari tools yang akan kita buat ini, namun untuk yang belum tahu fungsi dari tools ini mimin akan sedikit menjelaskannya, Parse HTML merupakan alat yang dapat digunakan untuk menguraikan atau mengkonversi kode program, seperti HTML, Javascript, CSS, tujuannya adalah agar kode tersebut dapat dengan mudah terbaca oleh blog kita. Kenapa kita harus menggunakan alat parse HTML kenapa tidak langsung pasang saja kode tersebut ke blog? memang benar jika kita tidak menkonversi kode, maka itu jauh lebih cepat karena tidak membuang-buang waktu, kamu mungkin berpikir begitu tapi fungsi sebenarnya dari alat parse ini adalah untuk menghindari terjadinya error pada struktur kode blog ini, namun jika kita menggunakan alat parse HTML sebelum kode itu digunakan maka tidak akan terjadi error pada kode blog anda.

Alat parse HTML ini juga banyak digunakan oleh para blogger lebih khususnya blogger yang suka membagikan kode-kode dipostingan blog nya, seperti HTML, CSS dan Javascript, pastinya agar pembaca menggunakan parse HTML terlebih dahulu sebelum kode digunakan atau sebelum kode dipasang. saya pribadi juga menggunakan tools parse html ini bahkan saya memasang tools ini di bagian menu blog agar pembaca blog saya tidak perlu repot mencari parse HTML lain.

Sampai disitu sudah pahamkan fungsi dari alat parse HTML, gimana apakah kamu tertarik untuk memasang tool ini?. Baiklah jangan berlama-lama lagi, langsung saja kita simak caranya dibawah ini, cara memasang tools parse HTML di blog.

Cara Memasang Tools Parse HTML di Halaman Blogger

Cara memasangnya cukup mudah sekali, sobat EB hanya perlu menyalin sebuah kode yang saya bagikan dibawah ini, lalu pastekan di halaman statis blog pada bagian HTML jangan Compose agar kode ini berjalan dengan baik.

1. Seperti biasa silakan sobat login terlebih dahulu ke akun blogger masing-masing, lalu masuk ke Halaman > Buat Halaman Baru.

2. Setelah itu masuk ke halaman mode HTML bukan mode Compose hal ini sangat penting karena jika kamu memasang kode dibawah ini ke halaman Compose maka kode ini hanya menjadi tulisan biasa, selanjutnya kamu hanya perlu mempaste kode dibawh ini ke halaman HTML.

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

3. langkah terakhir silakan sobat save dengan memilih Publikasikan seperti saat sobat mempublish sebuah artikel, dan jangan lupa untuk mengisi judul "Parse HTML" atau bebas terserah sobat mau pakai judul apa.

Akhir Kata : 

Demikian tutorial singkat dari saya yaitu cara membuat tools parse HTML, gimana cukup mudah bukan? jika ada pertanyaan atau saran terkait artikel diatas silakan tuliskan dikolom komentar dibawah ini karena satu komentar sangatlah penting untuk perkembangan blog ini kedepannya. Terimakasih telah membaca (: