Cara Membuat Halaman Tools Parse HTML Converter

Sebenarnya tutorial kali ini gak penting-penting amat sih :v. tapi siapa tau ada yang belum mengetahuinya. Bagi para blogger tool HTML converter ini memang tool yang cukup penting, apalgi blog dengan niche kode-kode pemograman. kode pemograman yang mereka bagikan tentunya tidak langsung mereka posting kedalam artikelnya untuk itu mereka harus parse atau di konversi terlebih dahulu ke dalam tools ini. Dan tak hanya itu tools ini sering digunakan para blogger untuk mengkonversi iklan Google Adsense untuk di tempatkan di dalam blog.

Cara membuat tools ini pun bisa dibilang sangat mudah, kita hanya perlu membuat halaman kosong di blog kita. dan menambahkan beberapa kode didalamnya. Untuk lebih jelasnya langsung saja lihat Cara Membuat Halaman Tools Parse HTML Converter pada Blog

Baca Juga : Cara Membuat Halaman Syntax Highlighter

Cara Mudah Membuat Halaman Tools Parse HTML Converter Di Blogger

1. Masuk akun Blogger
2. Selanjutnya, Klik Halaman -> Halaman Baru pada Dashboard
3. Pilih Mode HTML
4. Tambahkan Kode dibawah ini ke dalam halaman tersebut

<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea> 
<div class="button-group">
<button id="convert" onclick="cdConvert();this.disabled = true;">Konversi</button><button onclick="cdClear();">Bersihkan</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 #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: 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>

5. Sangat disarankan untuk melihat Pratinjau terlebih dahulu sebelum mempublikasikannya.

Baca Juga : Cara Menemukan Teman Blogger Satu Kota Dengan Mudah

Lalu bagaimana cara menggunakan tools parse html ini?
Jika tools parse ini hanya digunakan untuk diri sendiri anda tidak perlu membuat menu parse HTML ini dan anda hanya cukup membuka pada menu halaman tadi. Tapi jika tools parse ini dimaksudkan untuk di gunakan orang lain, anda harus membuat halaman statis parse HTML tersebut  Caranya,

• Klik Halaman di Dhasboar blogger anda
• Lihat Halaman Parse yang dibuat tadi
• Copy Link Halaman Parse
• Lalu Pilih Tema yang ada di Dhasboard blog anda
• Edit HTML
• Tambahkan Halaman Statis Untuk Parse HTML (Letaknya terserah kalian mau ditempatkan dimana)
• Simpan Tema, Selesai
• Tools Parse HTML anda bisa digunakan orang lain juga

Silahkan Lihat Hasilnya -> HTML Converter

Bagaimana sangat mudah bukan Cara Membuat Halaman Tools Parse HTML Converter di blog sendiri? Setelah memuatnya, kita bisa menggunakannya untuk kode html yang akan d post dalam artikel kita. bahkan tools ini bisa digunakan orang lain. Semoga Bermanfaat (EP)