Konverter HTML Converter Parser

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.

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.

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 &#039
Kode & akan berubah menjadi &

Tools HTML Converter Parser

Tutorial

Cara membuat tools konverter HTML Parser di blogger, caranya simple. Anda hanya perlu membuat halaman baru di blog. Ikuti langkah-langkahnya sebagai berikut.

Kode Script Tools HTML Parse

Pertama masuk ke Dashboard Blogger
Kemudian buat halaman postingan
Dalam tampilan editor pos, klik ikon di kiri bawah nama judul.
Dua opsi akan muncul: 'Tampilan HTML' dan 'Tampilan menulis'
Pilih' Tampilan HTML '.
Copy paste kode script di bawah ini.
Terakhir. Pratinjau dan 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>&amp;</code> menjadi <code>&amp;amp;</code></li>
<li><input id="opt2" class="option-input checkbox" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#039;</code></li>
<li><input id="opt3" class="option-input checkbox" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code></li>
<li><input checked="true" class="option-input checkbox" id="opt4" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code></li>
<li><input checked="true" class="option-input checkbox" id="opt5" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;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,"&amp;")),d.checked&&(b=b.replace(/'/g,"&#039;")),e.checked&&(b=b.replace(/"/g,"&quot;")),f.checked&&(b=b.replace(/</g,"&lt;")),g.checked&&(b=b.replace(/>/g,"&gt;")),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>

Demikian semoga bermanfaat.

Go to Link

Sae Bloggers