Cara Membuat Website Tools HTML Parse Di Blogger

Blog Buttatoa | Membuat Website Tools HTML Parse - Saat mencari sebuah sumber data, cara halaman website disusun akan menjadi penentu seberapa cepat data dapat dikumpulkan. Misalnya, sebuah halaman website yang memiliki struktur yang begitu kompleks akan lebih sulit untuk di masuki sedangkan struktur yang sederhana atau pada dasarnya merupakan struktur bawaan/default ternyata lebih mudah untuk ddimasuki dan dilihat.

Sebagian besar pengembang website saat ini menggunakan HTML untuk membangun, mengatur, dan memformat halaman website mereka dan menyimpan konten di dalamnya. Hal ini menyebabkan adanya kenyamanan karena membuat pekerjaan menjadi lebih mudah bagi pengembang dan pengguna yang ingin mengorek sesuatu dari website tersebut.

Bila kalian mencari di Google, kalian akan banyak menemukan website yang menyediakan HTML Parse secara online. Namun, kalian juga dapat membuatnya sendiri dan menyediakannnya kedalam website kalian sendiri.

Apa Itu HTML Parse?

HTML Parse adalah Tools yang berfungsi untuk mengurai adsense, chitika, adbrite, dan kode HTML apa pun ke dalam kode XML yang kompatibel dengan semua template blogger atau sistem blog lainnya.

HTML Parse dapat didefinisikan sebagai aplikasi, yang dapat mengedit file HTML untuk memparse markup HTML yang umumnya dipakai atau digunakan pada postingan yang memiliki hubungan dengan pengembangan suatu website yang sering menggunakan coding html.

Tools ini memungkinkan seorang blogger dapat dengan mudah menyisipkan kode atau script kedalam postingan blognya tanpa harus menghilangkan sedikitpun bagian dari kode script HTML yang hendak ditampilkan nantinya. Berikut beberapa contoh kode HTML yang telah mengalami konversi:

• <style> menjadi &lt;style&gt; 
• ]]></b:skin> menjadi ]]&gt;&lt;/b:skin&gt;
• </body> menjadi &lt;/body&gt;

Biasanya tools Parse HTML ini seringkali digunakan oleh website yang membahas seputar tutorial blogging seperti Blog Buttatoa ini yang sedikit membahas tentang redesign template blogger👀karena membutuhkan banyak kode yang akan disisipkan pada artikel di dalam Syntax Highlighter dengan tujuan agar pengunjung dapat dengan mudah menemukan kode yang sedang dicarinya.

Cara Membuat HTML Parse

Untuk membuat tools HTML Parse ini, caranya cukup mudah, kalian ikuti langkah-langkah dibawah ini:

1. Pertama, kalian menuju ke Dashboard Blogger, lalu pilih Page (halamanan) dan buat halaman baru

2. Selanjutnya kalian copy pastekan script HTML Parse dibawah ini. Sebelumnya kalian ubah terlebih dahulu halaman tersebut kedalam mode HTML.

<style scoped="" type="text/css">
.breadcrumbs{display:none}
h1.post-title{text-align:center}
#sidebar-wrapper{display:none}
#wrapper{justify-content: center}
#parser2{background:rgba(120, 142, 174, 0.11);position:relative;display:block;clear:both;padding:20px;border-radius:5px;border:1px solid #f46013;}
#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:13px;font-weight:bold;line-height:1.5;border-radius:50px;padding:1px 5px}
#parser2 textarea#somewhere{background-color: rgba(191, 186, 186, 0.15);border:1px solid #f46013;height:300px;width:100%;margin:0 0 10px;box-sizing:border-box;font: normal 14px 'Courier New',Monospace;color:var(--bs-body-color);padding:20px;border-radius:15px;}
#parser2 textarea#somewhere:active,#parser2 textarea#somewhere:focus{outline:0.01px;box-shadow:0 0 3px #FF8C00;-webkit-box-shadow:0 0 3px #FF8C00;-moz-box-shadow:0 0 3px #FF8C00}
#parser2 .btn-sm{display:inline-block;font-size:13px;font-weight:bold; line-height:1.5;border-radius:50px;padding:10px;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;font-weight:bold;line-height:1.5;border-radius:50px;padding:10px;margin:0 0 15px;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{background: linear-gradient(to bottom, #0033cc 0%, #993300 100%);padding:5px 15px;border-radius:50px;position:absolute;top:20px;right:20px;min-width:180px;color: #fff;font-family: Google Sans;}
button.close{padding:0;cursor:pointer;background:none;border:0;-webkit-appearance:none}
.close{float:right;font-size:1.5rem;color:#fff;margin:-3px 0px 0px 10px}
button.close:focus{outline:0}
.close:hover{opacity:1!important}
#btnInfo h7{margin:0;font-size:12px;font-weight:bold;line-height:2}
#button-link{display:none}
.clear{clear:both;display:block;margin-bottom:2px}
.alert br{display:none}
</style>
  
</p><div id="parser2">
<textarea id="somewhere" placeholder="Tulis atau Paste kode yang ingin di parse di sini, lalu klik tombol Parse Code dibawah..!!!"></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">×</span></button> 
<h7>Kode berhasil di copy</h7>
</div>
<br /> <button class="btn btn-primary btn-sm btn-parse" onclick="convert();" type="button">Parse Code</button> 
<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</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><p></p>

3. Klik Publikasikan, lalu lihat hasilnya dan sekalian kalian coba test.

 

Cek Demo Click here

Nah, itu diatas cara membuat website tools HTML Parse di Blogger. Kalian juga bisa melihat cara membuat HTML Endcode di postingan lainnya. Semoga bermanfaat, Wassalam.

Share :