Cara membuat tool converter/parse html di blogspot.
Di era
digial ini, pasti kita tidak asing lagi dengan bahasa bahasa pemograman seperti
java,php,python,css dll. banyak situs situs yang menyediakan verbagai
pembelajaran tentang bahasa pemograman, contohnya seperti blog ini.
Nah, saat
ingin berbagi kode html/javascript pada
blog ataupun dalam project, terkadang kita akan bingung, kenapa kode yang di
tampilkan malah berupa outputnya. Padahal kita hanya ingin menampilkan source
codenya saja. Oleh karena itu supaya
bisa menampilkan source code, kode html/javascript perlu di parse agar terlihat
strukturnya.
Bagaimanacara memparse kode html?
Supaya
kita bisa menampilkan kode, kita perlu mengkoversi kode kode seperti
- · mengkonversi < menjadi <
- · mengonversi > menjadi >
- · mengkonversi " menjadi "
- · mengkonversi ' menjadi '
- · mengonversi & menjadi &
<html> </html>
akan berubamenjadi
<h ml> </h ml>
loh, kalau begitu lama dong?
Enggak juga kok, kita uga bisa meggunakan tool converter
html, atau bahkan membuatnya sendiri di blog kita masing masing. Kali ini
Ruangtek akan menjelaskan bagaimana cara membuat tool converter/parse html di blogspot.
1. Pastikan kalian telah
login ke akun google kalian.
2. Buka pada menu Halaman
lalu pilih halaman baru.
3. Pilih mode html bukan
compose. Karena kita disini akan menuliskan kode.
4. Nas setelah itu, copy
kode ini
<textarea id="codes" placeholder="Tulis/paste kode di sini lalu klik 'Konversi'" spellcheck="false"></textarea>
<br />
<div class="button-group">
<button id="convert" onclick="cdConvert();this.disabled = true;">Konversi</button><button onclick="cdClear();">Bersihkan</button></div>
<br />
<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>
Lalu
pastekan pada halaman yangkita buat tadi.
5. Setelah itu save dan
publikasikan post tadi.
Maka
hasilnya akan seperti tool converter html ini . Mudah bukan? Sekarang tingal
coba tool yang sudah kita buat. Bila masih ada kesulitan silahkan tanyakan di
komentar.
cara membuat tool converter html di blogspot
Reviewed by andri aditya
on
December 03, 2018
Rating:
Reviewed by andri aditya
on
December 03, 2018
Rating:
No comments: