Tool Unparse HTML

Basa-basi

Hai, Sobat. Pada postingan kali ini, saya ingin memberikan tool unparse html keren yang bisa Sobat pakai.

Tool ini merupakan modifikasi dari tool konversi html yang beberapa hari lalu saya upload. Tool ini pun bisa kita gunakan untuk mengkonversi balik (unparse) html menjadi normal kembali. Sebab itulah fungsinya.

Bagi Sobat yang belum kenal banget dengan istilah unparse, berikut ini akan dijelaskan secara singkat.

Apa sih unparse html

Kata unparse html merupakan gabungan dari dua kata, yaitu un dan parse.

un artinya tidak, dan parse artinya mengurai. Sehingga, secara bahasa, unparse memiliki makna tidak mengurai.

Wkwkwk

Tak apalah kita tak tau arti unparse secara jelasnya. Sebab itu tidak terlalu penting. Melainkan yang harus kita pahami ialah maksud dari unparse html.

Unparse html sendiri, sejujurnya tidak akan kita pahami sebelum mengetahui maksud parse html. Oleh karena itu kita singgung dulu makna parse html.

Parse html ialah mengubah entity kode html menjadi bentuk lainnya. Misalnya gini.

Kita punya kode html  tool unparse html . Kode tersebut ketika kita letakkan di kode editor atau di mode html pada Blogger, lalu kita jalankan atau diposting, maka yang muncul ialah tulisan tool unparse html yang bentuknya miring.

Lantas bagaimana caranya agar tulisan  dan bisa muncul ketika dijalankan?

Caranya ialah dengan mengubah tanda < pada kode html tersebut menjadi <. Sehingga kode tersebut tidak dibaca sebagai kode html, melainkan dibaca sebagai teks biasa.

Oleh sebab itu, jika kita ingin menampilkan tulisan tool unparse html , maka kita harus menuliskannya seperti ini:
 tool unparse html >/i>

Atau seperti ini
 tool unparse html

Hal ini sangat berguna sekali bagi Sobat Blogger yang pada blognya membahas tentang kode html. Sebab dengan adanya ini, maka kode html bisa ditampilkan ke blog.

Nah, berbeda dengan unparse html. Jika parse menginginkan agar kode tidak dibaca sebagai kode, maka unparse membuat kode yang tadinya tidak terbaca sebagai kode, menjadi bisa dibaca sebagai kode html.

Untuk itu, pada kasus di atas tadi, unparse akan berfungsi mengubah tool unparse html atau  tool unparse html  menjadi  tool unparse html . Sehingganya, kode pun akan berfungsi sebagaimana mestinya.

Ya ... begitulah kira-kira. Sobat pasti sudah paham mengenai ini.

Cara memasang tool unparse html di Blogger

Cara memasang tool unparse HTML si Blogger tidak terlalu ribet, Sobat. Sebab kita cukup menambahkan kode ini ke halaman tertentu.

Langkah-langkahnya ialah berikut ini:
1. Masuk ke dashboard Blogger Sobat
2. Masuk ke menu halaman
3. Buat Entri
4. Pastekan kode ini di mode html ( bukan di mode compose)


<div id="boxkonversi">
<textarea id="tekskode" placeholder="Silakan masukkan kode yang ingin Sobat konversi" requirement="Silahkan di isi" spellcheck="false"></textarea> 
<div class="button-group">
<br>
<button onclick="kοnversi()">Ubah</button> 
<button onclick="hapus();">Hapus</button>
<button onclick="pilih();">Salin</button>

<div id="opt" >
<div id="judul" >Pilih kode mana yang ingin Sobat ubah</div>
<input id="opt1"  type="checkbox" >ubah <code>&amp;amp;</code> menjadi <code>&amp;</code>
<br>
<input id="opt2" type="checkbox">ubah <code>&amp;#39;</code> menjadi <code>'</code>
<br>
<input id="optd2" type="checkbox">ubah <code>&amp;#039;</code> menjadi <code>'</code>
<br>
<input id="opt3"  type="checkbox">ubah <code>&amp;quot;</code> menjadi <code>"</code>
<br>
<input id="opt4"  type="checkbox">ubah <code>&amp;lt;</code> menjadi <code>&lt;</code>
<br>
<input id="opt5"  type="checkbox" checked="checked" >ubah <code>&amp;gt;</code> menjadi <code>&gt;</code>
</div>
</div>
</div>

<style type="text/css">
#judul{
border-radius:8px;
padding:5px;
color:#373136;
text-align:center;
margin-bottom:10px;
background-color:#fff;
}
#boxkonversi textarea{
   width:95%;
   height:240px;
   margin:0 auto;
   display:block;
   background-color:#373136!important;
   padding:10px 2%;
   font-family:monospace;
   font-size:90%;
   border-radius:5px 5px 0 0;
   resize:none;
   outline:none;
   color:white!important;
}

::-webkit-input-placeholder {color: #fff;}
::-moz-placeholder {color: #fff;}
::-ms-input-placeholder {color: #fff;}
::placeholder {color: #efefef;font-family:monospace;font-size:120%!important;}

#boxkonversi {
width:100%!important;
}
#boxkonversi .button-group{
   float:none;
 background-color:#373136!important;
   text-align:center;
   padding:20px 20px 40px 20px;
   margin-top:-50px;
   border-top:5px double #fff;
   border-radius:0px 50px 5px 5px;
}

.button-group button{
   cursor:pointer;
   background-color:rgba(233,233,233,.1);
   text-align:center;
   color:white;
   display:inline-block;
   padding:8px 16px;
   font-size:14px;
   font-weight:400;
   line-height:1.471;
   border-radius:3px;
   margin:0 5px;
   border:0;
   box-shadow:0 2px 3px rgba(0,0,0,0.06),0 2px 3px rgba(0,0,0,0.1);
   transition:all .5s
}
#opt input{
   -webkit-appearance:none;
   -moz-appearance:none;
   -ms-appearance:none;
   -o-appearance:none;
   appearance:none;
   position:relative;
   height:15px;
   width:15px;
   transition:all 0.15s ease-out 0s;
   background:transparent;
   border:1px solid #fff;
   cursor:pointer;
   display:inline-block;
   margin-right:2rem;
   outline:none;
   transform:translateX(0px);
   position:relative;
   padding:0
}

#opt input:checked{
border:0;
   background:transparent;
   animation:rubberBand 1s
}

#opt input:checked::before{position:absolute;content:'';background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9,20.42L2.79,14.21L5.62,11.38L9,14.77L18.88,4.88L21.71,7.71L9,20.42Z' fill='%23fff'/%3E%3C/svg%3E");
width:20px;height:20px;display:inline-block}
button:hover,button:active{
outline:none;
box-shadow:0 10px 21px rgba(0,0,0,0.15),0 6px 6px rgba(0,0,0,0.12)
}
#opt code{
border:1px solid rgba(233,233,233,.1);
font-weight:bold;
background-color:transparent;
   color:#ffffff;
   border-radius:2px;
   padding:4px;
}

#opt1,#opt2,#opt3,#opt4,#opt5,#optd2{
   display:inline-block;
   margin:0px 20px;
   align:left;
   vertical-align:middle;
   border:none;
   outline:none
}
#opt{
margin-top:20px;
text-align:left;
color:#eee;
}

</style>

<script type="text/javascript">
/*copyleft hasanaskari.xyz*/
let a = document.getElementById('tekskode');
function hapus() {
 b=a.value=""
}
function kοnversi() {
    let b = a.value,
        c = document.getElementById('opt1'),
        d = document.getElementById('opt2'),
        d2 = document.getElementById('optd2'),
        e = document.getElementById('opt3'),
        f = document.getElementById('opt4'),
        g = document.getElementById('opt5');
        
    b = b.replace(/\t/g, "    ");
    if (c.checked) b = b.replace(/&amp;/g, "&");
    if (d.checked){ b = b.replace(/&#39;/g, "'")};
    if (d2.checked){ b = b.replace(/&#039;/g, "'")};
    if (e.checked) b = b.replace(/&quot;/g, "\"");
    if (f.checked) b = b.replace(/&lt;/g, "<");
    if (g.checked) b = b.replace(/&gt;/g, ">");
    a.value = b;
};

function pilih(){
 a.select();
 a.setSelectionRange(0, 99999)
 document.execCommand("copy");
 hapus();
 alert("Teks sudah disalin" );
}
</script>

5. Posting

Mudah bukan?

Untuk previewnya ada di sini:

Tool unparse html

Tool tersebut sengaja dibuat agak beda warna dan style ceklisnya supaya tool di blog ini keliatan lebih keren sedikit. Berbeda sedikit ngga jadi masalah ya. Yang penting toolnya berfungsi dengan baik.

Adapun bagi sobat yang ingin mengganti warnanya. Cukup ganti kode #373136 menjadi kode yang Sobat mau. Cari saja kodenya di dalam tag <style>…</style>.