Cara Membuat Tool Parse HTML Blogger
Artikel berikut saya akan sedikit berbagi cara bagaimana membuat Tool Parse HTML di blogger.
Tool Parse HTML adalah sebuah alat yang digunakan untuk mengurai atau mengkonversi kode pemrograman, seperti CSS, HTML, dan JavaScript untuk menghindari terjadinya error pada struktur blog yang dikarenakan terdapatnya lebih dari satu intruksi yang dilakukan secara bersamaan.
Jika Anda pengguna blogger dan sering menggunakan Tool Parse HTML, ada baiknya jika Anda memasangnya di blog atau pada halaman page blogger Anda sendiri.
Jika Anda tertarik ingin membuat dan memasangnya pada halaman blogger Anda, simak cara dan langkah - langkahnya berikut ini.
Membuat Tool Parse HTML Blogger
Berikut cara membuat tool parse HTML di halaman statis blogger. Langkah pertama yang harus Anda lakukan adalah sebagai berikut:
1. Masuk menu dashboard blog Anda
2. Pilih menu Halaman
3. Pilih Buat Halaman Baru (New Pages)
4. Kemudian masuk ke mode Edit HTML
5. Salin kode berikut ini, lalu pastekan pada halaman statis yang Anda buat sebelumnya.
<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>
6. Isi judul pada halaman Anda
7. Jika sudah publikasikan, selesai.
Itulah tutorial bagaimana cara membuat tool parse HTML blogger atau halaman statis blog. Semoga berguna dan bermanfaat dan selamat berkreasi.
