Lompat ke konten Lompat ke sidebar Lompat ke footer

Cara Membuat Tools Parse HTML di Blogger

Dengan hadirnya tools parse HTML ini pastinya sangat bermanfaat bagi seorang blogger dengan niche koding maupun blogging. Pasalnya, tools ini memungkinkan seorang blogger dalam menyisipkan kode Script di dalam postingan blog agar tampilan template tidak saling bertabrakan dengan kode lainnya. Sebab itulah tools ini dicari-cari oleh banyak kalangan. 

Parse HTML sendiri adalah sebuah tools yang digunakan dalam mengkonversi sebuah kode menjadi entitas HTML secara otomatis dengan tujuan agar kode tetap ditampilkan secara lengkap tanpa harus menghilangkan salah satu elemen kode script HTML yang hendak ditampilkan nantinya. Berikut ini akan saya bagikan beberapa contoh kode HTML yang telah dikonversi:

  • Atribut > menjadi >
  • Atribut < menjadi &gt
  • Atribut menjadi &#039;
  • Atribut menjadi &quot;
  • Atribut & menjadi &amp;

Biasanya tools Parse HTML ini seringkali digunakan oleh situs yang membahas seputar tutorial blogging seperti koding. Hal ini memang bukan tanpa alasan lantaran situs yang mengulas artikel terkait dengan koding membutuhkan banyak kode yang akan disisipkan pada artikel di dalam Syntax Highlighter. Tujuannya sangat mudah, agar memudahkan pembaca menemukan kode yang sedang dicari-cari.

Meski keberadaan tools Parse HTML ini dianggap bermanfaat bagi seorang blogger, namun banyak dari mereka yang menggunakan situs pihak ketiga seperti htmlparse.com dan lain sebagainya. Padaha mereka sendiri bisa menerapkannya pada situs blog pribadi, sehingga tidak perlu repot-repot untuk mengunjungi website lain dalam mengkonversi kode.

Cara Membuat Tools Parse HTML di Blogger

Download

Berikut ini saya akan memberikan tutorial terkait dengan cara membuat tools Parse HTML di blogger yang dapat Anda terapkan pada situs masing-masing. Tampilan dari Tools Parse HTML ini juga sudah sangat responsive yang dapat dibuka dari berbagai perangkat seperti Laptop, PC, Android, iOS, Tablet dan masih banyak lagi.

  1. Silahkan buka dashboard Anda terlebih dahulu.
  2. Selanjutnya Anda pilih menu “Halaman”.
  3. Lalu silahkan klik “+ HALAMAN BARU” dan beri nama “Parse HTML”.
  4. Kemudian Anda rubah mode “Tampilan Menulis” menjadi “Tampilan HTML”.
  5. Setelah itu copy kode yang sudah saya berikan di bawah ini di halaman tersebut.
  6. <textarea id="codes" spellcheck="false"></textarea> 
    <br />
    <div class="button-group">
    <center>
    <span class="Apple-style-span" style="font-family: &quot;trebuchet ms&quot;; font-size: x-small; line-height: 20px;">Tools Parse HTML &nbsp;oleh &nbsp;<a href="http://www.mahes.web.id/" style="color: #2980b9; text-decoration: none;">mahes.web.id</a></span></center>
    <button id="convert" onclick="cdConvert();this.disabled = true;">Yuk Parse</button><button onclick="cdClear();">Bersihin dulu</button></div>
    <br />
    <ul id="wrapin">
    <li><input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code></li>
    <li><input checked="true" id="opt2" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code></li>
    <li><input checked="true" id="opt3" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code></li>
    <li><input id="opt4" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code></li>
    <li><input id="opt5" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code></li>
    </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 #CCCCCC;width:550px;height:250px;margin:0 auto;display:block;background-color:#f2f2f2;color:#333;padding:15px;}
    .button-group{margin:0 auto 0;text-align:center}
    button,button[disabled]:active{border: none;padding: 5px 12px;color: #fff;background-color: #0ea6d8;cursor: pointer;font-size: 13px;margin: 0 10px;line-height: 23px;border-radius: 3px;transition: all 0.3s ease-in-out;}
    button:active{background:#3f92e1;}
    button[disabled],button[disabled]:active{background:#3f92e1;}
    #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>
    
  7. Nantinya Anda bisa klik “Pratinjau” untuk melihat hasilnya atau langsung saja klik “Publikasikan”.
  8. Jika sudah di publikasikan, maka alangkah baiknya Anda mencoba tools tersebut apakah bekerja dengan baik atau tidak.
  9. Selesai.

Anda juga dapat memodifikasi tampilan tools Parse HTML di atas sesuai dengan selera masing-masing, contohnya seperti merubah warna tombol, warna tema, ukuran box tools dan lain sebagainya. Bahkan, bisa Anda rombak secara menyeluruh asalkan sudah paham dengan koding.

Demikianlah tutorial kali ini tentang cara membuat tools Parse HTML di blogger yang dapat Anda terapkan. Jika ada pertanyaan terkait dengan artikel kali ini, silahkan ajukan pertanyaan di kolom komentar yang sudah disediakan. Selamat mencoba!

Posting Komentar untuk "Cara Membuat Tools Parse HTML di Blogger"

X