Cara Membuat dan Memasang Tools Parse Script di Blog

GEMA.MY.ID

Monday, September 7, 2020

Cara Membuat dan Memasang Tools Parse Script di Blog

Tools Parse Script - Bagi Anda yang berprofesi sebagai seorang ahli pemrograman, alat penguraian menjadi salah satu hal yang sangat penting untuk dimiliki. Namun sebelum melangkah lebih jauh, ada baiknya untuk mengetahui terlebih dahulu tentang pengertian parse itu sendiri.

Jika diartikan ke dalam bahasa Indonesia, kata parse berarti mengurai. Sesuai dengan artinya, parse adalah penguraian struktur kode yang ingin ditampilkan dalam format teks atau tulisan. Dalam penguraian tersebut, skrip akan dimodifikasi sedemikian rupa agar terbaca sebagai teks atau tulisan.

Halaman web dengan topik teknologi biasanya menggunakan alat ini untuk melampirkan teks skrip ke dalam postingan. Seperti yang saya jelaskan tadi, skrip hanya akan terbaca sebagai teks apabila diurai terlebih dahulu.

Rekomendasi: Cara Membuat Script Box Keren di Postingan Blog

Umumnya, ada lima jenis karakter yang akan berubah setelah diurai, apa saja itu?

Symbol	Entity Name	Number Code
&	&	&
<	<	<
>	>	>
'	'	'
"	"	"

Daripada ganti secara manual, mending pakai tools saja. Selain mudah, Anda juga tidak perlu repot kesana-sini hanya untuk mencari tools terkait. Berikut adalah tampilan lengkapnya setelah dipasang:

Cara Membuat dan Memasang Tools Parse skrip di Blog

Masuk ke BLOGGER
Pilih menu HALAMAN
Pilih HALAMAN BARU
Tempel di mode TAMPILAN HTML:

<!-- HTML -->
<textarea id="parse" spellcheck="false" placeholder="Tempel kode Anda di sini..." style="width:100%;height:250px;margin:0 auto;padding:15px"></textarea>
<br />
<div class="button-group">
  <button id="convert" onclick="cdConvert();this.disabled=true">
    <span style="font-family:'Noto Sans',sans-serif;font-size:15px">Parse</span>
  </button>
  <button onclick="cdClear()">
    <span style="font-family:'Noto Sans',sans-serif;font-size:15px">Hapus</span>
  </button>
</div>
<!-- End HTML -->

<!-- CSS -->
<style>
#parse{display:block;background-color:#fafafa;width:550px;height:250px;font:normal 14px "Fira Mono",monospace;margin:0 auto;box-shadow:0 0 8px 0 rgba(0,0,0,.08)}
.button-group{margin:20px auto 0;text-align:center}
button,button[disabled]:active{border:none;padding:15px 20px;color:#fff;background-color:#3b4252;cursor:pointer;margin:0 10px;line-height:23px;border-radius:3px;transition:all .3s ease-in-out}
button:active{background-color:#3b4252}
button[disabled],button[disabled]:active{background-color:#ed343a}
</style>
<!-- End CSS -->

<!-- JavaScript -->
<script>
function cdClear(){var wtarea=document.getElementById("parse");wtarea.value="";wtarea.focus();document.getElementById("convert").disabled=false}
function cdConvert(){var ctarea=document.getElementById("parse"),cv=ctarea.value
  cv=cv.replace(/&/g,"&amp;");
  cv=cv.replace(/</g,"&lt;");
  cv=cv.replace(/>/g,"&gt;");
  cv=cv.replace(/"/g,"&quot;");
  cv=cv.replace(/'/g,"&#039;");
  // Fungsi baru di sini
ctarea.value=cv;ctarea.focus();ctarea.select()}
</script>
<!-- End JavaScript -->

Pilih PUBLIKASIKAN
Selesai.

Untuk lebih jelasnya, silahkan membuka halaman di bawah ini untuk tampilan langsung:

Demo

Rekomendasi: Cara Memasang Widget Google Translate dengan Script CSS di Blog

Catatan

Pada halaman demo, saya sengaja menggunakan font Noto Sans dan Fira Mono. Untuk hal serupa, silahkan menambahakan data font berikut di atas ]]></b:skin>:

@font-face{font-family:"Noto Sans";font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/notosans/v14/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format("woff2")}
@font-face{font-family:"Fira Mono";font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/firamono/v9/N0bS2SlFPv1weGeLZDto1d3HnvfU.woff2) format("woff2")}

Untuk menambahkan fungsi baru, ubah dan tempel kode berikut pada bagian yang telah ditandai:

cv=cv.replace(/Input/g,"Output");

Penutup

Perlu diingat, setiap ingin memasukkan skrip ke dalam bentuk teks atau tulisan, jangan lupa untuk melakukan penguraian terlebih dahulu.

Setelah itu, lanjutkan dengan memasukkan skrip tersebut dengan awalan <pre><code> dan akhiran </code></pre> agar ditampilkan sebagai syntax highlighter. Contoh:

<pre><code>&lt;p&gt;Selamat datang di Ferisp.com.&lt;/p&gt;</code></pre>

Rekomendasi: Pentingnya Meta Tag dalam Optimasi SEO

Cukup sekian artikel tentang Cara Membuat dan Memasang Tools Parse Script di Blog ini, Terima kasih.

Cancel