Cara Membuat dan Memasang Tools Parse Script di Blog

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?

SymbolEntity NameNumber Code
&&&
<&lt;&#060;
>&gt;&#062;
'&apos;&#039;
"&quot;&#034;

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:

Parse Script

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:

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.

6 komentar

  1. Mantap sekali
    1. Terima kasih
  2. Sukses selalu mas
    1. Terima kasih
  3. Terima kasih banyak ya
    1. Semoga bermanfaat mas