Tools untuk mengurai / parse kode HTML
 |
| Konverter HTML Converter Parser |
HTML Converter Parser Blogspot
Khususnya jika Anda mulai monetasi blog dengan Adsense atau iklan-iklan serupa, script iklan mesti diurai dahulu sebelum dimasukkan ke template blog. HTML Parser memungkinkan karakter entitas HTML secara otomatis terbaca dalam format XML. Dan, ini tidak terbatas mengubah script iklan, namun kode HTML apapun.
HTML Parser
Apa itu HTML Parser, dan apa fungsinya?. Parse berarti mengurai atau bisa juga mengubah. Kita perlu mengurai kode HTML agar tidak error saat dimasukkan dalam template Blogger yang berformat XML. Proses mem-parse HTML ke XML tidaklah mengubah keseluruhan kodenya. Hanya beberapa kode tertentu yang memungkinkan terjadinya error saat kita masukkannya ke dalam template Blogger atau Blogspot berformat XML.
Berikut ini adalah contoh kode HTML yang akan berubah ketika diurai menggunakan alat parse HTML:
Kode < akan berubah menjadi <
Kode > akan berubah menjadi >
Kode " akan berubah menjadi "
Kode ' akan berubah menjadi '
Kode & akan berubah menjadi &
Alat HTML Converter Parser
- Konversi
&menjadi& - Konversi
'menjadi' - Konversi
"menjadi" - Konversi
<menjadi< - Konversi
>menjadi>
Tutorial Membuat Parse HTML di Blogger
Untuk Membuat Konverter HTML Parser di blogger, caranya simple. Anda hanya perlu membuat halaman baru di blog. Ketika berada dalam antarmuka edit halaman, ganti Tampilan Menulis (compose) menjadi Tampilan HTML. Selanjutnya, salin script di bawah ini dan paste ke halaman posting. Kemudian Publikasikan.
<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;" class="ripplelink">Konversi</button><button onclick="cdClear();" class="ripplelink">Bersihkan</button></div><ul id='wrapin'><li><input checked="true" class="option-input checkbox" id="opt1" type="checkbox" />Konversi <code>&</code> menjadi <code>&amp;</code></li>
<li><input id="opt2" class="option-input checkbox" type="checkbox" />Konversi <code>'</code> menjadi <code>&#039;</code></li>
<li><input id="opt3" class="option-input checkbox" type="checkbox" />Konversi <code>"</code> menjadi <code>&quot;</code></li>
<li><input checked="true" class="option-input checkbox" id="opt4" type="checkbox" />Konversi <code><</code> menjadi <code>&lt;</code></li>
<li><input checked="true" class="option-input checkbox" id="opt5" type="checkbox" />Konversi <code>></code> menjadi <code>&gt;</code></li>
</ul>
<script type="text/javascript">
function cdClear(){var a=document.getElementById("codes");a.value="",a.focus(),document.getElementById("cvrt").disabled=!1}function cdConvert(){var a=document.getElementById("codes"),b=a.value,c=document.getElementById("opt1"),d=document.getElementById("opt2"),e=document.getElementById("opt3"),f=document.getElementById("opt4"),g=document.getElementById("opt5");b=b.replace(/\t/g," "),c.checked&&(b=b.replace(/&/g,"&")),d.checked&&(b=b.replace(/'/g,"'")),e.checked&&(b=b.replace(/"/g,""")),f.checked&&(b=b.replace(/</g,"<")),g.checked&&(b=b.replace(/>/g,">")),a.value=b,a.focus(),a.select()}
</script>
<div style='clear: both;'></div>
<style scoped="" type="text/css">
#main-wrapper{padding:0;width:100%;border:0}
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 rgba(0,0,0,0.08);width:68%;height:250px;margin:0 auto;display:block;background-color:#fff;color:#999;padding:15px;border-radius:3px;font-size:13px;font-family:monospace;transition:all .3s}
#codes:hover,#codes:focus{background-color:#fff;color:#222;border-color:rgba(0,0,0,0.2)}
.button-group{width:100%;max-width:78.5%;float:none;margin:0 auto 0;text-align:center}
button,button[disabled]:active{width:42.3%;border:none;padding:14px 12px;text-align:center;color:#fff;display:inline-block;white-space:nowrap;background-color:#3498db;cursor:pointer;font-size:13px;position:relative;top:-20px;margin:0 8px;letter-spacing:.5px;border-radius:3px;transition:all 0.2s}
button:hover,button:focus{background:#43a9ed;color:#fff}
button[disabled],button[disabled]:active{background:#43a9ed;color:#fff;}
#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;}
.post-body p{margin:0}
#blog1,#artikel,.blog-posts{background-position:center!important;}
#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{width:100%;max-width:68.5%;display:table;position:relative;margin:0 auto;font-size:13px}
.post-body ul#wrapin li {display:block;margin:0 auto;text-align:left;}
.post-body ul#wrapin br {display:none;}
.option-input{-webkit-appearance:none;-moz-appearance:none;-ms-appearance:none;-o-appearance:none;appearance:none;position:relative;right:0;bottom:0;left:0;height:16px;width:16px;transition:all 0.15s ease-out 0s;background:#f0f0f0;border:none;color:#fff;cursor:pointer;display:inline-block;margin-right:0.5rem;outline:none;position:relative;border-radius:10%;}
.option-input:hover{background:#eee}
.option-input:checked{background:#2ecc71}
.option-input:checked::before{height:16px;width:16px;position:absolute;content:'\f00c';font-family:fontawesome;display:inline-block;font-size:12.66667px;text-align:center;line-height:16px}
.option-input:checked::after{-webkit-animation:click-wave 0.65s;-moz-animation:click-wave 0.65s;animation:click-wave 0.65s;background:#40e0d0;content:'';display:block;position:relative;z-index:100}
.option-input.radio{border-radius:50%}
.option-input.radio::after{border-radius:50%}
</style>