CARA MEMBUAT TAG PRE CONVERTER

Hai sobat, ane hadir lagi di kehidupan sobat. Tag pre converter ini berguna untuk memudahkan sobat untuk menulis tag pre atau code pada artikel. Ok langsung aja sob.............

1. Buka blogger.com
2. Pilih opsi Laman terus Buat Laman Baru
3. Copy kode ini dan masukkan di post editor yang HTML jangan Compose

Tool di bawah ini berguna untuk memudahkan Anda menulis tag <code>code</code> atau <code>pre</code> pada artikel. Simpan kode kemudian klik Konversi, copy hasilnya di post editor Anda pada mode HTML (bukan Compose)
<br />
<br />
<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:none;width:98%;height:200px;margin:0 auto;display:block;background-color:#444;padding:10px;font:normal 12px 'Courier New',Monospace;}
#codes:focus{background-color:#333;color:#eee;border:none;}
.button-group{margin:0 auto 0;text-align:center}
button,button[disabled]:active{text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#444;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:#fff}
button[disabled],button[disabled]:active{background:#fafafa;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
#outer-wrapper {width:100%;max-width:1000px;margin:0 auto;padding:0;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:1000px;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;}
.banner,#comments,#sidebar-wrapper,#header-wrapper,#menu-wrapper {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
</style><br />
<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea><br />
<br />
<div class="button-group"><button id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button><button onclick="cdClear();">Bersihkan</button></div><input checked="true" id="opt1" type="checkbox" />Konversi <code>&</code> menjadi <code>&amp;amp;</code><br />
<br />
<input id="opt2" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code><br />
<br />
<input id="opt3" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code><br />
<br />
<input checked="true" id="opt4" type="checkbox" />Konversi <code>&lt</code> menjadi <code>&amp;lt;</code><br />
<br />
<input checked="true" id="opt5" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code><br />
<br />
<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>

<div style='clear: both;'>
</div>

4. Beri judul "Tag Pre Converter", lalu klik publikasikan

• Demo

Subscribe to receive free email updates: