Cara Membuat dan Memasang Tools Parse Script di Blog

Cara Membuat dan Memasang Tools Parse Script di Blog

Ferisp.com - Bagi mereka yang berprofesi sebagai blogger atau ahli pemrograman, tools parse atau HTML parse menjadi salah satu tools yang sangat penting untuk digunakan. 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, kegiatan parse merupakan penguraian kode-kode atau script yang ingin ditampilkan ke dalam format teks atau tulisan. Dalam penguraian tersebut, script akan dimodifikasi sedemikian rupa agar bisa terbaca sebagai teks atau tulisan.

Biasanya, blogger dengan niche teknologi selalu menggunakan tools parse untuk melampirkan teks script ke dalam postingan. Seperti yang saya jelaskan tadi, script hanya akan terbaca sebagai teks apabila diurai atau diparse terlebih dahulu.

Selama ini, mungkin Anda hanya menggunakan situs Blogcrowds untuk mengurai script yang akan digunakan. Sekedar informasi, Anda juga bisa memasang tools parse sendiri di blog. Selain mudah digunakan, hasil urai yang diberikan juga sama persis dengan situs besar lainnya.

Nah, untuk pemasangan sendiri, silahkan ikuti langkah-langkah di bawah ini:

Cara Membuat dan Memasang Tools Parse Script di Blog

  • Masuk ke BLOGGER
  • Pilih menu HALAMAN
  • Pilih HALAMAN BARU
  • Berikan judul halaman sesuai dengan keinginan Anda
  • Pilih TAMPILAN HTML
  • Tempel ke dalam tampilan HTML halaman:
  • <h3>Selamat datang di Ferisp.com!</h3>
    <textarea id="codes" placeholder="Salin kode script Anda di sini..." spellcheck="false" style="height: 180px; margin: 0px; width: 760px;"></textarea><br />
    <div class="button-group">
    <button id="convert" onclick="cdConvert();this.disabled = true;"><b>Parse</b></button>
    <br />
    <br />
    <button onclick="cdClear();"><b>Clear</b></button></div>
    <br />
    <b>Catatan:</b><br />
    <span style="font-size: x-small;">Aktifkan semua kolom di bawah ini untuk hasil yang sempurna.</span><br />
    <br />
    <input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code><br />
    <input checked="true" id="opt2" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code><br />
    <input checked="true" id="opt3" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code><br />
    <input checked="true" id="opt4" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code><br />
    <input checked="true" id="opt5" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code>
    <br />
    <ul></ul>
    <style type="text/css">
    code{font-family:Consolas,Monaco,'Andale Mono','Courier New',Courier,Monospace;color:#2a5ead;font-size:13px;padding:2px 4px;color:#d14;}
    #codes{font:13px 'Courier New',Monospace;border:1px solid #e9e9e9;width:550px;height:250px;margin:0 auto;display:block;background-color:#f3f3f3;color:#333;padding:15px;}
    .button-group{margin:0 auto 0;text-align:center}
    button,button[disabled]:active{border: none;padding: 9px 72px;color: #fff;background-color: #0c1c2e;cursor: pointer;font-size: 17px;margin: 0 10px;line-height: 23px;border-radius: 3px;transition: all 0.3s ease-in-out;}
    button:active{background:#2fc8b4;}
    button[disabled],button[disabled]:active{background:#e9405c;}
    #opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin-right:10px;}
    </style>  <script type="text/javascript">
    function cdClear() {
        var wtarea = document.getElementById('codes');
        wtarea.value = '';
        wtarea.focus();
        document.getElementById('convert').disabled = false;
    }
    function cdConvert() {
        var ctarea = document.getElementById('codes'),
            cv = ctarea.value,
            opt1 = document.getElementById('opt1'),
            opt2 = document.getElementById('opt2'),
            opt3 = document.getElementById('opt3'),
            opt4 = document.getElementById('opt4'),
            opt5 = document.getElementById('opt5');
        cv = cv.replace(/t/g, "    ");
        if (opt1.checked) cv = cv.replace(/&/g, "&amp;");
        if (opt2.checked) cv = cv.replace(/</g, "&lt;");
        if (opt3.checked) cv = cv.replace(/>/g, "&gt;");
        if (opt4.checked) cv = cv.replace(/"/g, "&quot;");
        if (opt5.checked) cv = cv.replace(/'/g, "&#039;");
        ctarea.value = cv;
        ctarea.focus();
        ctarea.select();
    };
    </script>
  • Pilih PUBLIKASIKAN
  • Selesai.

Catatan

  1. Anda bisa mengedit script yang saya berikan sesuai dengan tampilan halaman yang Anda inginkan
  2. Ubah bagian yang telah ditandai dengan nama situs Anda.

Penasaran dengan hasilnya? Klik atau tekan demo berikut ini:

Penutup

Yang perlu Anda ingat, setiap ingin memasukkan script ke dalam bentuk teks atau tulisan, jangan lupa untuk melakukan parse terlebih dahulu. Setelah itu, lanjutkan dengan memasukkan script tersebut dengan awalan <pre><code> dan akhiran </code></pre> agar ditampilkan dengan syntax highlighter.