Cara Membuat Tools Parse HTML di Halaman Statis Blogger

Cara Membuat Tools Parse HTML di Halaman Statis Blogger

Tools Parse HTML, atau sebuah alat yang memang di khususkan untuk melakukan kegiatan konversi kode, misalnya seperti kode untuk memasang adsense ke website atau kode lainnya yang masih berhubungan dengan kode html. Pada umumnya tools seperti ini digunakan oleh para blogger yang memiliki website dengan konten tutorial seperti kami.

Untuk para blogger pemula seperti saya, pasti pernah mengalami hal saat menuliskan kode html ke dalam postingan, begitu disimpan kode tersebut hilang kok bisa ya? ya pasti bisa dong, karena sebelum publish artikel kalian diharuskan untuk parse kode tersebut agar bisa ditampilkan dengan sempurna. Jika kalian belum paham, silahkan baca artikel ini sampai akhir karena kami telah menyiapkan pembahasan serta cara pemasangannya.

Pembahasan

Tools Parse HTML merupakan sebuah alat blogging yang memungkinkan anda untuk melakukan konversi atau mengurai kode HTML menjadi character entities di HTML.

Lalu mengapa harus di parse terlebih dahulu sebelum di publikasikan? Hal ini dikarenakan template blogger yang masih menggunakan template dengan extensi XML (Entended Markup Language).

Jika di dalam penulisan artikel masih menggunakan kode seperti ini, maka gantilah kode tersebut menjadi


Ribet? gak kok, kalian gak perlu ganti semua kode itu secara manual, ada cara mudah yang harus kalian coba yaitu menggunakan tools yang kami sediakan di blog ini atau kalian buat sendiri.

Jika kalian ingin pasang di blog sendiri, silahkan ikuti cara pemasangannya dibawah ini agar tidak terjadi kesalahan pada tampilan atau fungsi tools nya.

Cara Pemasangan

  1. Login terlebih dahulu ke Blogger
  2. Silahkan membuat Halaman Baru, yang tersedia di menu Halaman pada dashboard. 
  3. Pilih metode penulisan HTML bukan Compose, dan letakkan kode berikut ini
    <div class="post-body entry-content" id="">
    
    <style scoped="" 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{border:1px solid #ccc;width:68%;height:250px;margin:0 auto;display:block;background-color:#fafafa;color:#333;padding:15px;font:400 14px 'Courier New',Monospace;border-radius:4px}
    .button-group{float:none;margin:0 auto 0;text-align:center}
    button,button[disabled]:active{border:none;padding:5px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#057B6F;cursor:pointer;font-family:'Open Sans',Arial,Sans-Serif; font-size:13px;position:relative;top:-1px;margin:0 10px;line-height:23px;border-radius:3px;transition:all 0.3s ease-in-out;}
    button:active{background:#057B6F;}
    button[disabled],button[disabled]:active{background:#057B6F;}
    #opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
    #outer-wrapper {margin:0 auto;text-align:left;float:none;background-position:center!important;}
    #post-wrapper {width:100%;max-width:100%;margin:0 auto;text-align:left;float:none;background-position:center!important;}
    .post-body,.post{background-position:center!important;}
    #blog1,#artikel,.blog-posts{background-position:center!important;}
    #comments,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;}
    .post-inner {padding:0 0 0 0;margin:20px auto;}
    .post-body ul#wrapin {display:block;position:relative;margin:30px auto 0 auto;}
    .post-body ul#wrapin li {display:block;margin:0 auto;text-align:left;}
    .post-body ul#wrapin br {display:none;}
    </style>
    <textarea id="codes" placeholder="Ketik/paste kode HTML disini lalu klik 'Konversi'" spellcheck="false"></textarea>
    
    
    <ul id="wrapin">
    <li><br>
    <input checked="true" id="opt1" type="checkbox">Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code><br>
    </li>
    <li><br>
    <input id="opt2" type="checkbox">Konversi <code>'</code> menjadi <code>&amp;#039;</code><br>
    </li>
    <li><br>
    <input id="opt3" type="checkbox">Konversi <code>"</code> menjadi <code>&amp;quot;</code><br>
    </li>
    <li><br>
    <input checked="true" id="opt4" type="checkbox">Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code><br>
    </li>
    <li><br>
    <input checked="true" id="opt5" type="checkbox">Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code><br>
    </li>
    </ul>
    <br>
    <div class="button-group"><button id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button><button onclick="cdClear();">Bersihkan</button>
    </div>
    
    
    <script type="text/javascript">
    function cdClear() {
        var wtarea = document.getElementById('codes');
        wtarea.value = '';
        wtarea.focus();
        document.getElementById('cvrt').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, "&#039;");
        if (opt3.checked) cv = cv.replace(/"/g, "&quot;");
        if (opt4.checked) cv = cv.replace(/</g, "&lt;");
        if (opt5.checked) cv = cv.replace(/>/g, "&gt;");
        ctarea.value = cv;
        ctarea.focus();
        ctarea.select();
    };
    </script><br>
    <div style="clear: both;"></div><p></p>
    <div class="clear"></div>
    </div>
  4. Publikasikan.
Sekarang anda sudah bisa menggunakan tools parse tersebut di blog anda sendiri jika sudah mengikuti tutorial diatas dengan benar. Jika ada tutorial dan pembahasan di artikel ini yang kurang dimengerti, boleh ditanyakan langsung di kolom komentar.

Apabila artikel ini bermanfaat silahkan bagikan ulang ke sosial media kalian agar lebih banyak yang paham dengan Tools Parse HTML. Mungkin sekian dulu yang bisa kami sampaikan, semoga bermanfaat.
Terima kasih

Fernand
Fernand Kecanduan berbagi ilmu!

Tidak ada komentar