Membuat Konversi Kode Pada Blog

Selamat siang semua, kali ini saya akan membuat sebuah artikel yang lumayan sangat dibutuhkan didalam dunia blogging dan ini berkaitan dengan sebuah source kode juga dan langsung saja yuk simak artikelnya.  Konversi Kode adalah sebuah tempat dimana kita mengetahui sebuah kode yang dibuat dalam bahasa coding dan diterjemahkan dengan apa yang dimaksudkan dengan kode-kode tersebut.

Jadi ibaratkan seperti kita memberikan kode-kode dan nantinya akan menghasilkan sesuatu contohnya kita memukul teman kita dengan keras otomatis jika temanmu itu akan membalasnya dengan pukulan keras juga itu ibarat kecilnya hehe.

Jadi terkadang seorang blogger harus membuat kode-kode dalam pengeditan tema, pembuatan artikel dan lainnya disini saya akan memudahkan anda untuk membuat konversi kode dalam sebuah laman blog anda. Caranya sebagai berikut :

Pertama anda masuk dashboard blogger anda

Kemudian pilih menu laman disamping bawah

Lalu buat laman baru dan pilih Buat, dan pilih tab HTML kemudian pastekan kode dibawah ini :

<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>
<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> 

Sedikit tambahan saja. Jika anda perlu ingin mengedit atau merubahnya pada bagian Width:550px untuk lebarnya Height:250px untuk tingginya anda tinggal sesuaikan saja. Saya kira cukup untuk bagian itu saja pengeditannya ya.

Jika sudah anda tinggal publish saja dan lihat hasilnya.

Untuk contohnya anda bisa lihat pada blog ini.

Demo

Terima kasih anda telah membaca artikel Membuat Konversi Kode Pada Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: