Membuat Tag Pre Converter

Membuat Tag Pre Converter - Hai sobat Blogger kali ini saya akan membagikan sedikit tool yang berada di blog ini yaitu Tag Pre Converter.

Tool ini sangat cocok buat para sobat blogger yang suka berbagi tutorial blog, lebih tepatnya cocok buat sobat yang memakai Syntax Highlighter dengan input kode seperti <code>Kode Disini</code>.
Untuk menggunakanya masukan kode ini dipage blog.

1. Login Blogger
2. Masuk Page / Laman dan masukan kode ini di bagian HTML

<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;background-color:#f7f7f9;border:1px solid #ddd}
#codes{border:none;width:98%;height:200px;margin:0 auto;display:block;background-color:#F0F0F0;padding:5px;font:normal 12px 'Courier New',Monospace;border:1px solid #ccc}
#codes:focus{background-color:#FFF;color:#303030}
.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:#00aaff;background: linear-gradient(#00aaff,#0994d9); border-radius:2px 2px 2px 2px; cursor:pointer; font-family:Coda; font-size:14px; padding:3px 8px 1px; position:relative; text-shadow:0 1px 0 rgba(0,0,0,0.3); top:-1px; transition:none 0s ease 0s; border:1px solid #888;box-shadow: inset 0px 1px 0px rgba(255,255,255,0.3), 0px 1px 2px #bbb;}
button:active{background: linear-gradient(#0994d9,#00aaff)}
button[disabled],button[disabled]:active{background: #00aaff;top:0; box-shadow:inset 0 2px 0 rgba(255,255,255,0); }
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
</style><textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea>
<br />
<div class="button-group">
<button id="cvrt" onclick="cdConvert();this.disabled = true;">Konversi</button><button onclick="cdClear();">Bersihkan</button>
<br />
<div style="text-align: left;">
<br /></div>
</div>
<input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code>
<br />
<input id="opt2" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code>
<br />
<input id="opt3" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code>
<br />
<input checked="true" id="opt4" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code>
<br />
<input checked="true" id="opt5" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code>
<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(/&amp;/g, "&amp;amp;");
    if (opt2.checked) cv = cv.replace(/'/g, "&amp;#039;");
    if (opt3.checked) cv = cv.replace(/"/g, "&amp;quot;");
    if (opt4.checked) cv = cv.replace(/&lt;/g, "&amp;lt;");
    if (opt5.checked) cv = cv.replace(/&gt;/g, "&amp;gt;");
    if (cv.lastIndexOf('\n') != -1 || cv.length &gt; 40) {
        cv = cv.replace(/^/, "&lt;\pre\&gt;&lt;\code\&gt;");
cv = cv.replace(/$/, "&lt;/code&gt;&lt;/pre&gt;
");
}
else {
cv = cv.replace(/^/, "&lt;\code\&gt;");
cv = cv.replace(/$/, "&lt;/code&gt;");
}
ctarea.value = cv;
ctarea.focus();
ctarea.select();
};
</script>

3. Simpan dan lihat hasilnya!

Artikel ini berasal dari :
http://kang-ugnazi.blogspot.co.id/2015/08/membuat-tag-pre-converter.html

Suwandy

Add Comment

Bloggger Tutorial

Sabtu, 21 Mei 2016

Blog Baru

Membuat Tag Pre Converter

Membuat Tag Pre Converter

Related Posts

Tidak ada komentar