Cara Memasang Tools Parse HTML di Blogspot

By /

tokoria.id – Mungkin sebagian dari sobat blogger belum tahu Cara Memasang Tools Parse HTML di Blogspot. Padahal tools parse HTML ini sangat berguna karena ketika sobat blogger ingin menyisipkan sebuah kode script di dalam postingan blognya, script tersebut harus di parse terlebih dahulu dan tentunya tools ini hadir untuk membantu memudahkan para sobat blogger sekalian.

Kita selaku blogger baru alias blogger recehanan harus paham betul penggunaan Tools Parse HTML ini. Apalagi bagi pengembang web seperti saya ini prosedur markup HTML yang di sajikan harus kelihatan rapi dan di pandang baik pada saat daftar google adsense.

Supaya lebih jelasnya kalian simak pengertian parse html tools dari beberapa penjelasan yang akan saya berikan di bawah ini !

Apa Itu Tools Parse HTML?

Tools Parse HTML adalah sejenis aplikasi yang sering dipakai oleh para blogger untuk mengkonversi kode-kode seperti HTML, CSS, JavaScript sebelum di tempel ke dalam postingan artikel blog atau WordPress.

Tujuannya supaya kode tersebut bisa tampil dengan sempurna. Lebih simpelnya adalah sebuah aplikasi. Nah, itulah pengertian tools HTML blogger.

Contoh Kode HTML Setelah di Coversi Menggunakan Tools Parse HTML

Simak contohnya di bawah ini, misalkan mimin ingin mengubah sebuah link tutorial untuk di posting ke dalam artikel. Maka mimin akan memparse kodenya menggunakan parse html blog.

<b><ahref="https://tokoria.id/"target="_blank">tokoria.idBlog</a></b>

Setelah diparse maka kode akan tampil seperti ini

&lt;b&gt;&lt;ahref=&quot;https://tokoria.id/&quot;target=&quot;_blank&quot;&gt;tokoria.idBlog&lt;/a&gt;&lt;/b&gt;

Terlihatkan perubahannya? jika tampilan kodenya sudah berubah maka kalian tinggal memasukan kode tersebut ke dalam artikel yang sedang kalian buat melalui “HTML” bukan lewat “Compose”.

Manfaat dan Fungsi Tools Parse HTML

Secara umum banyak blogger yang tidak menyadari bahwasanya penggunaan tools parse HTML sangat bermanfaat khususnya bagi para blogger yang ingin menyisipkan kode script ke dalam artikel

Biasanya pemakaian parse html tools, banyak digunakan oleh para blogger yang khusus membahas tentang tutorial blogger. Karena mereka harus menyisipkan kode-kode html head ke dalam postingan artikel.

Nah, lebih jelasnya simak beberapa fungsi atau manfaat yang anda dapatkan jika menggunakan Tools Parse HTML:

  • Mencegah terjadinya error pada tampilan kode script di artikel
  • Merapihkan tampilan kode script pada postingan artikel
  • Tidak perlu repot-repot mencari alat untuk parse html online di blog lain
  • Script Kode HTML menjadi mudah untuk dipahami
  • Konversi kode text html/CSS/javascript menjadi lebih mudah
  • Bisa di gunakan untuk parse kode Adsense dan lain sebagainya.

Cara Memasang Tools Parse HTML Di Blogspot

Jika kalian tertarik, silah kan pasang alat Tools Parse HTML-nya dengan mengikuti langkah-langkahnya di bawah ini:

  • Login Blogger, lalu buka dashbord blogger anda
  • Pilih menu “Halaman” atau “Pages“
  • Kemudian buatlah “HALAMAN BARU” sebelah kiri atas
  • Gunakan mode “Tampilan HTML” bukan “Tampilan Menulis” untuk menyimpan kodenya
  • Lalu, Copy Paste kode script di bawah ini, ambil scrypt nya dibawah 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:#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>

     

  • Jika sudah, klik “Simpan” Selesai.

PENTING !!!

Lakukan Parse HTML terlebih dahulu setiap sebelum menyimpan kode script ke dalam Syntax Highlighter artikel anda. Kalau tidak dilakukan kode script tidak akan muncul dalam postingan anda”.

Selain itu, untuk mempermudah mimin juga menyediakan aplikasi tools parse HTML yang bisa anda gunakan sewaktu-waktu tanpa harus memasang tools tersebut di blog yang anda miliki.

Penutup

Sampai di sini dulu pembahasan mengenai Cara Memasang Tools Parse HTML di Blogspot. Semoga bermanfaat dan selamat mencobanya. Ikuti tutorial berikutnya!.

Scroll to Top