Notifikasi
Tidak ada notifikasi baru.
Beranda Blogger

(Simple) Cara Membuat Tools Parse HTML di Blogger

Tedi Setiawan
Tedi Setiawan
---
Daftar Isi
Cara Membuat Tools Parse HTML di Blogger,
Cara Membuat Tools Parse HTML sangat mudah, sudah saya siapkan Tutorial Cara Membuat Parse HTML nya di bawah.

Untuk para blogger pasti ga asing dengan yang namanya Parse HTML ini, karena Parse HTML ini berguna untuk menyisipkan Kode Script HTML di dalam halaman atau di postingan Blogger.

Apa itu Parse HTML

Parse HTML adalah sebuah tools yang di gunakan untuk mengkonversikan suatu kode HTML, agar kode HTML bisa di tampilkan secara lengkap tanpa menghilangkan salah satu element dari Script Kode HTML tersebut.

Karakter Yang Di Convert Parse HTML

Tools Parse HTML ini bisa mengkonversikan seperti atribut di bawah ini
Atribut > diganti dengan <
Atribut < diganti dengan >
Atribut ' diganti dengan '
Atribut " diganti dengan "
Atribut & diganti dengan &
Dan ada beberapa karakter lainnya.

Biasanya Tools Parse HTML ini di gunakan Para Blogger yang membuat niche seputar tutorial blogging dan coding.
Apa jadinya jika se orang blogger tidak menggunakan Tools Parse HTML ini, pastinya akan kesulitan untuk si pembaca artikel untuk mengcopas suatu script tersebut.

Jika blogger tersebut tidak menggunakan Tools Parse HTML dia harus menyiapkan suatu file yang nanti akan di download oleh si pembaca artikel tersebut, namun pada dasarnya orang indonesia itu pengen dengan cara yang simple yaitu dengan cara copy paste dan saya pun telah Menerapkan Tools Parse HTML di blog saya.

Cara Membuat Tools Parse HTML

  1. Login ke Dashboard Blogger
  2. Klik halaman, Lalu buat Halaman Baru
  3. Pastikan mode penulisan di HTML <>, bukan compose
  4. Selanjutnya copy, paste kode di bawah ini
Saya telah menyiapkan 2 Tampilan Tools Parse HTML ini,

Script Tools Parse HTML Simple

    
     <textarea id="codes" placeholder="Masukan Script Yang Ingin Di Parse'" spellcheck="false"></textarea> 
<br />
<div class="button-group">
<center>
<span class="Apple-style-span" style="font-family: &quot;trebuchet ms&quot;; font-size: x-small; line-height: 20px;">Alat Parse HTML &nbsp;oleh &nbsp;<a href="http://sitedayexe.id/" style="color: #2980b9; text-decoration: none;">SITEDAYEXE</a></span></center>
<button id="convert" onclick="cdConvert();this.disabled = true;">Kuy Parse</button><button onclick="cdClear();">Bersihin dulu</button></div>
<br />
<ul id="wrapin">
<li><input checked="true" id="opt1" type="checkbox" />Konversi <code>&amp;</code> menjadi <code>&amp;amp;</code></li>
<li><input checked="true" id="opt2" type="checkbox" />Konversi <code>&lt;</code> menjadi <code>&amp;lt;</code></li>
<li><input checked="true" id="opt3" type="checkbox" />Konversi <code>&gt;</code> menjadi <code>&amp;gt;</code></li>
<li><input id="opt4" type="checkbox" />Konversi <code>"</code> menjadi <code>&amp;quot;</code></li>
<li><input id="opt5" type="checkbox" />Konversi <code>'</code> menjadi <code>&amp;#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 #CCCCCC;width:550px;height:250px;margin:0 auto;display:block;background-color:#f2f2f2;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, "&amp;");
    if (opt2.checked) cv = cv.replace(/</g, "&lt;");
    if (opt3.checked) cv = cv.replace(/>/g, "&gt;");
    if (opt4.checked) cv = cv.replace(/"/g, "&quot;");
    if (opt5.checked) cv = cv.replace(/'/g, "&#039;");
    ctarea.value = cv;
    ctarea.focus();
    ctarea.select();
};
</script>

Script Tools Parse HTML Modern

    
<style type="text/css">
.parseUnparse{align-items:center;display:flex;justify-content:center}
.ctd-bt{margin: 0.5rem 0 1rem;width: -webkit-fill-available;justify-content:space-between;}
.ctd-bt,.ctd-bt-kiri,.ctd-bt-kanan{display:inline-flex;}
.ctd-pu{border-radius:0 0 5px 5px;-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;text-align:center}
.ctd-puA{width:-webkit-fill-available;height:200px;padding:1rem;border:0;box-shadow:inset 0 0 5px 1px rgba(0,0,0,.05);border-radius:.5rem;resize:none;color:gray;background:#fafafa;}
.ctd-btP,.ctd-btU,.ctd-btR,.ctd-btC{color:#fff!important;font-weight:700;background:#07ACEC;padding:1rem;border-radius:.25rem;border:none;outline:0;box-shadow:0 2px 5px 0 rgba(0,0,0,.16),0 2px 10px 0 rgba(0,0,0,.12);transition:all .4s ease-in-out;text-transform:uppercase;margin:0 .25rem;cursor: pointer;}
.ctd-btP span, .ctd-btU span, .ctd-btR span, .ctd-btC span{align-self:center}
</style>
<div class="parseUnparse">
  <div class="ctd-pu">
    <textarea class="ctd-puA" id="ctd-boxPU" placeholder="&lt;!- Input kode yang akan di-Parse atau di-Unparse -&gt;"></textarea>
    <div class="ctd-bt">
      <div class="ctd-bt-kiri">
        <div class="ctd-btP" id="ctdP-HTML" onclick="convert();" type="button"><span>Parse</span></div>
        <div class="ctd-btU" id="ctdU-HTML" onclick="convert();" type="button"><span>Unparse</span></div>
      </div>
      <div class="ctd-bt-kanan">
        <div class="ctd-btR" onclick="document.getElementById('ctd-boxPU').value = '', document.getElementById('ctd-boxO').value = ''" type="button"><svg preserveaspectratio="xMidYMid meet" style="height: 20px; vertical-align: -0.125rem; width: 20px;" viewbox="0 0 24 24"><path d="M2.586 15.408l4.299 4.299a.996.996 0 0 0 .707.293h12.001v-2h-6.958l7.222-7.222c.78-.779.78-2.049 0-2.828L14.906 3a2.003 2.003 0 0 0-2.828 0l-4.75 4.749l-4.754 4.843a2.007 2.007 0 0 0 .012 2.816zM13.492 4.414l4.95 4.95l-2.586 2.586L10.906 7l2.586-2.586zM8.749 9.156l.743-.742l4.95 4.95l-4.557 4.557a1.026 1.026 0 0 0-.069.079h-1.81l-4.005-4.007l4.748-4.837z" fill="currentColor"></path></svg></div>
        <div class="ctd-btC" onclick="cpO()" type="button"><svg preserveaspectratio="xMidYMid meet" style="height: 20px; vertical-align: -0.125rem; width: 20px;" viewbox="0 0 24 24"><path d="M20 2H10c-1.103 0-2 .897-2 2v4H4c-1.103 0-2 .897-2 2v10c0 1.103.897 2 2 2h10c1.103 0 2-.897 2-2v-4h4c1.103 0 2-.897 2-2V4c0-1.103-.897-2-2-2zM4 20V10h10l.002 10H4zm16-6h-4v-4c0-1.103-.897-2-2-2h-4V4h10v10z" fill="currentColor"></path></svg></div>
      </div>
    </div>
    <textarea class="ctd-puA" id="ctd-boxO" placeholder="&lt;!- Output kode... -&gt;" readonly=""></textarea>
  </div>
</div>
<script type="text/javascript">
  function encodeString(e){return e.replace(/&/g,"&amp;").replace(/"/g,"&quot;").replace(/'/g,"&#039;").replace(/</g,"&lt;").replace(/>/g,"&gt;").replace(/¡/g,"&iexcl;").replace(/¢/g,"&cent;").replace(/£/g,"&pound;").replace(/¤/g,"&curren;").replace(/¥/g,"&yen;").replace(/¦/g,"&brvbar;").replace(/§/g,"&sect;").replace(/¨/g,"&uml;").replace(/©/g,"&copy;").replace(/ª/g,"&ordf;").replace(/«/g,"&laquo;").replace(/¬/g,"&not;").replace(/®/g,"&reg;").replace(/¯/g,"&macr;").replace(/°/g,"&deg;").replace(/±/g,"&plusmn;").replace(/²/g,"&sup2;").replace(/³/g,"&sup3;").replace(/´/g,"&acute;").replace(/µ/g,"&micro;").replace(/¶/g,"&para;").replace(/·/g,"&middot;").replace(/¸/g,"&cedil;").replace(/¹/g,"&sup1;").replace(/º/g,"&ordm;").replace(/»/g,"&raquo;").replace(/¼/g,"&frac14;").replace(/½/g,"&frac12;").replace(/¾/g,"&frac34;").replace(/¿/g,"&iquest;").replace(/×/g,"&times;").replace(/÷/g,"&divide;").replace(/À/g,"&Agrave;").replace(/Á/g,"&Aacute;").replace(/Â/g,"&Acirc;").replace(/Ã/g,"&Atilde;").replace(/Ä/g,"&Auml;").replace(/Å/g,"&Aring;").replace(/Æ/g,"&AElig;").replace(/Ç/g,"&Ccedil;").replace(/È/g,"&Egrave;").replace(/É/g,"&Eacute;").replace(/Ê/g,"&Ecirc;").replace(/Ë/g,"&Euml;").replace(/Ì/g,"&Igrave;").replace(/Í/g,"&Iacute;").replace(/Î/g,"&Icirc;").replace(/Ï/g,"&Iuml;").replace(/Ð/g,"&ETH;").replace(/Ñ/g,"&Ntilde;").replace(/Ò/g,"&Ograve;").replace(/Ó/g,"&Oacute;").replace(/Ô/g,"&Ocirc;").replace(/Õ/g,"&Otilde;").replace(/Ö/g,"&Ouml;").replace(/Ø/g,"&Oslash;").replace(/Ù/g,"&Ugrave;").replace(/Ú/g,"&Uacute;").replace(/Û/g,"&Ucirc;").replace(/Ü/g,"&Uuml;").replace(/Ý/g,"&Yacute;").replace(/Þ/g,"&THORN;").replace(/ß/g,"&szlig;").replace(/à/g,"&agrave;").replace(/á/g,"&aacute;").replace(/â/g,"&acirc;").replace(/ã/g,"&atilde;").replace(/ä/g,"&auml;").replace(/å/g,"&aring;").replace(/æ/g,"&aelig;").replace(/ç/g,"&ccedil;").replace(/è/g,"&egrave;").replace(/é/g,"&eacute;").replace(/ê/g,"&ecirc;").replace(/ë/g,"&euml;").replace(/ì/g,"&igrave;").replace(/í/g,"&iacute;").replace(/î/g,"&icirc;").replace(/ï/g,"&iuml;").replace(/ð/g,"&eth;").replace(/ñ/g,"&ntilde;").replace(/ò/g,"&ograve;").replace(/ó/g,"&oacute;").replace(/ô/g,"&ocirc;").replace(/õ/g,"&otilde;").replace(/ö/g,"&ouml;").replace(/ø/g,"&oslash;").replace(/ù/g,"&ugrave;").replace(/ú/g,"&uacute;").replace(/û/g,"&ucirc;").replace(/ü/g,"&uuml;").replace(/ý/g,"&yacute;").replace(/þ/g,"&thorn;").replace(/ÿ/g,"&yuml;")}function decodeString(e){return e.replace(/&quot;/g,'"').replace(/&#039;/g,"'").replace(/&lt;/g,"<").replace(/&gt;/g,">").replace(/&iexcl;/g,"¡").replace(/&cent;/g,"¢").replace(/&pound;/g,"£").replace(/&curren;/g,"¤").replace(/&yen;/g,"¥").replace(/&brvbar;/g,"¦").replace(/&sect;/g,"§").replace(/&uml;/g,"¨").replace(/&copy;/g,"©").replace(/&ordf;/g,"ª").replace(/&laquo;/g,"«").replace(/&not;/g,"¬").replace(/&reg;/g,"®").replace(/&macr;/g,"¯").replace(/&deg;/g,"°").replace(/&plusmn;/g,"±").replace(/&sup2;/g,"²").replace(/&sup3;/g,"³").replace(/&acute;/g,"´").replace(/&micro;/g,"µ").replace(/&para;/g,"¶").replace(/&middot;/g,"·").replace(/&cedil;/g,"¸").replace(/&sup1;/g,"¹").replace(/&ordm;/g,"º").replace(/&raquo;/g,"»").replace(/&frac14;/g,"¼").replace(/&frac12;/g,"½").replace(/&frac34;/g,"¾").replace(/&iquest;/g,"¿").replace(/&times;/g,"×").replace(/&divide;/g,"÷").replace(/&Agrave;/g,"À").replace(/&Aacute;/g,"Á").replace(/&Acirc;/g,"Â").replace(/&Atilde;/g,"Ã").replace(/&Auml;/g,"Ä").replace(/&Aring;/g,"Å").replace(/&AElig;/g,"Æ").replace(/&Ccedil;/g,"Ç").replace(/&Egrave;/g,"È").replace(/&Eacute;/g,"É").replace(/&Ecirc;/g,"Ê").replace(/&Euml;/g,"Ë").replace(/&Igrave;/g,"Ì").replace(/&Iacute;/g,"Í").replace(/&Icirc;/g,"Î").replace(/&Iuml;/g,"Ï").replace(/&ETH;/g,"Ð").replace(/&Ntilde;/g,"Ñ").replace(/&Ograve;/g,"Ò").replace(/&Oacute;/g,"Ó").replace(/&Ocirc;/g,"Ô").replace(/&Otilde;/g,"Õ").replace(/&Ouml;/g,"Ö").replace(/&Oslash;/g,"Ø").replace(/&Ugrave;/g,"Ù").replace(/&Uacute;/g,"Ú").replace(/&Ucirc;/g,"Û").replace(/&Uuml;/g,"Ü").replace(/&Yacute;/g,"Ý").replace(/&THORN;/g,"Þ").replace(/&szlig;/g,"ß").replace(/&agrave;/g,"à").replace(/&aacute;/g,"á").replace(/&acirc;/g,"â").replace(/&atilde;/g,"ã").replace(/&auml;/g,"ä").replace(/&aring;/g,"å").replace(/&aelig;/g,"æ").replace(/&ccedil;/g,"ç").replace(/&egrave;/g,"è").replace(/&eacute;/g,"é").replace(/&ecirc;/g,"ê").replace(/&euml;/g,"ë").replace(/&igrave;/g,"ì").replace(/&iacute;/g,"í").replace(/&icirc;/g,"î").replace(/&iuml;/g,"ï").replace(/&eth;/g,"ð").replace(/&ntilde;/g,"ñ").replace(/&ograve;/g,"ò").replace(/&oacute;/g,"ó").replace(/&ocirc;/g,"ô").replace(/&otilde;/g,"õ").replace(/&ouml;/g,"ö").replace(/&oslash;/g,"ø").replace(/&ugrave;/g,"ù").replace(/&uacute;/g,"ú").replace(/&ucirc;/g,"û").replace(/&uuml;/g,"ü").replace(/&yacute;/g,"ý").replace(/&thorn;/g,"þ").replace(/&yuml;/g,"ÿ").replace(/&amp;/g,"&")}function cpO(){var e=document.getElementById("ctd-boxO");e.select(),e.setSelectionRange(0,99999),document.execCommand("copy")}var encode=document.getElementById("ctdP-HTML"),decode=document.getElementById("ctdU-HTML"),input=document.getElementById("ctd-boxPU"),output=document.getElementById("ctd-boxO");encode.addEventListener("click",function(){output.value=encodeString(input.value)}),decode.addEventListener("click",function(){output.value=decodeString(input.value)});
</script>

Setelah memasukan script di atas silahkan klik Simpan, Lalu coba anda tes apakah Tools Parse HTML yang anda buat bisa bekerja, harusnya jika mengikuti langkah langkah di atas bisa di pastikan tools parse dapat di gunakan.

Penutup

Saya akhiri tutorial Cara Membuat Tools Parse HTML di Blogspot, semoga dapat bermanfaat bagi banyak orang, jika ada pertanyaan seputar artikel ini anda bisa berkomentar di bawah dengan tutur kata yang baik, saya pasti akan membalasnya. Terima Kasih.
Blogger
Tedi Setiawan
Tedi Setiawan
"Newbie Ethical Hacking, Programmer"