Cara Memasang Parse HTML Tools Pada Blogger

Cara Memasang Parse HTML Tools Pada Blogger

RudiEtnovian.Com - Widget Parse HTML merupakan salah satu Tools wajib yang harus dimiliki oleh seorang blogger atau siapa saja yang bergelut di dunia kode-kode CSS, HTML, dan Coding-coding lainnya.

Bagi seorang blogger apalagi yang membuat konten tentang Tutorial Editing Blogger pasti akan sangat memerlukan Widget Parse HTML ini saat akan membuat postingan yang menampilkan kode-kode CSS dan kawan-kawan.

Karena kode-kode CSS, HTML dan sebagainya tersebut tidak bisa secara langsung dimuat dalam postingan, harus dikonversi terlebih dahulu agar bisa tampil di dalam postingan.

Berikut cara memasang Parse HTML Tools tersebut.

• Login ke akun Blogger.

• Masuk ke menu Postingan (jika ingin membuatnya di halaman postingan) atau pilih menu Halaman (jika ingin membuatnya di halaman statis).

• Silahkan copy kode HTML, CSS dan Javascript dibawah ini ke dalam halaman postingan atau halaman dalam tampilan HTML, jangan dalam tampilan menulis.

• Klik Publish dan Widget Parse HTML selesai dibuat.

<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea>

<br />

<div class="gencet-group">

<gencet id="convert" onclick="cdConvert();this.disabled = true;">Konversi</gencet><gencet onclick="cdClear();">Bersihkan</gencet></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;}

.gencet-group{margin:0 auto 0;text-align:center}

gencet,gencet[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;}

gencet:active{background:#3f92e1;}

gencet[disabled],gencet[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>

Demikianlah Tutorial Blogging kita kali ini. Apabila di dalam Tutorial Membuat Parse HTML Tools ini ada yang kurang jelas, silahkan untuk menanyakannya di kolom komentar.