Halo sobat blogger, kali ini admin mau berbagi script Tool Konversi Kode atau yang biasa disebut Parse HTML pada dasarnya memiliki fungsi yang sama dengan Ad Converter atau konversi kode iklan seperti Google Adsense. Tujuannya adalah untuk menulis suatu kode HTML atau Javascript, bukan membacanya sebagai kode. Tool ini sangat berguna dan wajib dimiliki oleh blogger yang berkecimpung di bagian Tutorial Web dan Edit Web seperti blog DesainKode ini. Selain dalam postingan, untuk menulis kode pada bagian komentar blog juga perlu di konversi sebelumnya.
Untuk membuatnya silahkan ikuti langkah langkah berikut ini;
1. Login dulu di blogger.com dengan akun masing masing2. Buat halaman baru pada page/ newpage
3. Ambil kode dibawah ini / copi kode;
<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:1px solid #ccc;width:68%;height:250px;margin:0 auto;display:block;background-color:#fafafa;color:#333;padding:15px;font:400 14px 'Courier New',Monospace;border-radius:4px}
.button-group{margin:0 auto 0;text-align:center}
button,button[disabled]:active{border:none;padding:5px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#0ea6d8;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:#0095c6;}
button[disabled],button[disabled]:active{background:#0095c6;}
#opt1,#opt2,#opt3,#opt4,#opt5{display:inline-block;margin:0 10px 0 0;vertical-align:middle;border:none;outline:none}
#outer-wrapper {margin:0 auto;text-align:left;float:none;background-position:center!important;}
#post-wrapper {width:100%;max-width:100%;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;}
#comments,#sidebar-wrapper,#menu-wrap {display:none;margin-top:0;margin:0;}
.post-inner {padding:0 0 0 0;margin:20px auto;}
.post-body ul#wrapin {display:block;position:relative;margin:30px auto 0 auto;}
.post-body ul#wrapin li {display:block;margin:0 auto;text-align:left;}
.post-body ul#wrapin br {display:none;}
</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>
<ul id="wrapin">
<li><br />
<input checked="true" id="opt1" type="checkbox" />Konversi <code>&</code> menjadi <code>&amp;</code><br />
</li>
<li><br />
<input id="opt2" type="checkbox" />Konversi <code>'</code> menjadi <code>&#039;</code><br />
</li>
<li><br />
<input id="opt3" type="checkbox" />Konversi <code>"</code> menjadi <code>&quot;</code><br />
</li>
<li><br />
<input checked="true" id="opt4" type="checkbox" />Konversi <code><</code> menjadi <code>&lt;</code><br />
</li>
<li><br />
<input checked="true" id="opt5" type="checkbox" />Konversi <code>></code> menjadi <code>&gt;</code><br />
</li>
</ul>
<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, "&");
if (opt2.checked) cv = cv.replace(/'/g, "'");
if (opt3.checked) cv = cv.replace(/"/g, """);
if (opt4.checked) cv = cv.replace(/</g, "<");
if (opt5.checked) cv = cv.replace(/>/g, ">");
ctarea.value = cv;
ctarea.focus();
ctarea.select();
};
</script><br />
<div style="clear: both;">
</div>
<div class="clear">
</div>
atau gunakan 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>&</code> menjadi <code>&amp;</code></li>
<li><input checked="true" id="opt2" type="checkbox" />Konversi <code><</code> menjadi <code>&lt;</code></li>
<li><input checked="true" id="opt3" type="checkbox" />Konversi <code>></code> menjadi <code>&gt;</code></li>
<li><input id="opt4" type="checkbox" />Konversi <code>"</code> menjadi <code>&quot;</code></li>
<li><input id="opt5" type="checkbox" />Konversi <code>'</code> menjadi <code>&#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, "&");
if (opt2.checked) cv = cv.replace(/</g, "<");
if (opt3.checked) cv = cv.replace(/>/g, ">");
if (opt4.checked) cv = cv.replace(/"/g, """);
if (opt5.checked) cv = cv.replace(/'/g, "'");
ctarea.value = cv;
ctarea.focus();
ctarea.select();
};
</script>
4. Lalu cara meletakkan kode tersebut pada page sobat bisa lihat dibawah ini.
Keterangan;
Dalam tutorial ini, kita akan membuat Tool Konversi Kode tersebut pada halaman statis blog. Beda dari yang biasa di jumpai, tool ini sudah dilengkapi dengan pilihan character yang ingin di konversi. Berikut ini karakter yang akan dikonversi :
< menjadi <
> menjadi >
" menjadi "
' menjadi '
& menjadi &
KUTUNGGU KOMENTAR SOBAT DISINI