Membuat Tools Encode HTML (unescape)

Encode adalah istilah yang berarti rahasia, rahasia memiliki definisi yaitu segala sesuatu yang sengaja disembunyikan tanpa ada satupun orang lain yang mengetahuinya. Jadi ketika kita akan membagikan atau publish project (script) yang kita buat alangkah baiknya melakukan encode terlebih dahulu.

Hal tersebut bertujuan agar orang lain tidak bisa menambah, mengurangi atau mengubah script yang kita buat tanpa seizin dari pembuatnya atau hak cipta. Jika ada yang berusaha untuk mengubahnya mereka akan kesulitan karena encrypt script ini mengubahnya menjadi abstrak.

Meskipun alat ini sudah tersedia banyak di internet, tidak ada salahnya jika kamu membuat alat encode sendiri dihalaman blog untuk menambah fitur navigasi agar para pengunjung semakin tertarik.

Klik button demo diatas untuk melihat tampilan detailnya. Jika Anda tertarik membuatnya, silahkan ikuti langkah-langkah berikut ini.

Cara Membuat Tool Encode HTML (unescape)

Buka dashboard blogger > halaman > buat halaman baru lalu salin kode script dibawah ini dan pastekan dalam tampilan html.

<style type='text/css'>
  .container {
}
.browser {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.browser .mantap{
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px   6px rgba(0,0,0,0.23);
  background-color: #d9d9d9;
  border-radius: 5px 5px 0 0;
  height: 2.5em;
}
button, button[disabled]:active {
    background-color: #464646;
    font: bold 11px Tahoma,Verdana,Arial,sans-serif;
    color: #FFF;
    border: medium none;
    border-radius: 3px;
    cursor: pointer;
    padding: 5px 10px;
}
.browser .mantap .controls {
  line-height: 1.25em;
  padding: 0.625em 0;
}
.browser .mantap .controls .btn {
    border: medium none;
    border-radius: 100%;
    display: block;
    float: left;
    height: auto;
    margin-left: 0.5em;
    outline: medium none;
    width: 0px;
    padding: 7px;
}
.browser .mantap .controls .btn.close {
  background-color: #e74c3c;
}
.browser .mantap .controls .btn.minimize {
  background-color: #f1c40f;
}
.browser .mantap .controls .btn.fullscreen {
  background-color: #2ecc71;
}
.browser .viewport {
  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px   6px rgba(0,0,0,0.23);
  background-color: #f5f5f5;
  border-radius: 0 0 5px 5px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  }
.tombol-konversi {
cursor: pointer;
    text-align: center;
    display: inline-block;
    color: #fff;
    font-size: 12px;
    margin: 0;
    padding: 12px;
    background-color: #0091ea;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.26);
    border-radius: 3px;
    border: 0;
    width: auto;}
.pageform {
    padding-right: 12px;
    padding-bottom: 12px;
    padding-left: 12px;}
  </style>  
<div class="container">
  <div class="browser">
    <div class="mantap">
      <div class="controls">
        <button class="btn close"></button>
        <button class="btn minimize"></button>
        <button class="btn fullscreen"></button>
      </div>
    </div>
    <div class="viewport">
     <p style="text-align: center;padding:12px;">
<form name="pageform" class="pageform" onsubmit="return doencrypt(this);">
<textarea class="husni-textareaa" id="husni-textareaa" cols="38" name="code" rows="11" placeholder="Paste text (script) disini ..." spellcheck="false" wrap="virtual"></textarea></p>
<span id="encrypted1"></span>
<input class="tombol-konversi" onclick="doencrypt(pageform);" type="submit" value="Encrypt">
<input class="tombol-konversi" onclick="javascript:eraseText();" type="button" value="Delete">
<input class="tombol-konversi" name="sac" onclick="sandc(pageform);" type="button" value="Select All">
     <p style="text-align: center;padding-top:12px;">
<textarea class="husni-textareaa" id="husnj-hasil" cols="38" readonly="readonly" name="ecode" rows="11" placeholder="Hasil Encrypt ..." spellcheck="false" wrap="virtual"></textarea></p>
      <script>
function doencrypt(a){return null==javascript?!1:""==a.code.value?(alert("Masukkan Script yang ingin di Encrypt!"),!1):(enctext=encrypt(a.code.value),codetocopy='\n',codetocopy+="<!-- Encrypt by media903.com-->\n",codetocopy+="document.write(unescape('"+enctext+"'));",codetocopy+="",a.ecode.value=codetocopy,a.sac.disabled=!1,!1)}function sandc(a){a.ecode.focus(),a.ecode.select(),copytext=a.ecode.createTextRange(),copytext.execCommand("Copy"),alert("Copied the Encrypted HTML Code to clipboard, you may now paste this into your website")}function encrypt(a){var c,b="";for(c=0;c<a.length;c++)b+="%"+hexfromdec(a.charCodeAt(c));return b}function hexfromdec(a){return a>65535?"err!":(first=Math.round(a/4096-.5),temp1=a-4096*first,second=Math.round(temp1/256-.5),temp2=temp1-256*second,third=Math.round(temp2/16-.5),fourth=temp2-16*third,""+getletter(third)+getletter(fourth))}function getletter(a){return a<10?a:10==a?"A":11==a?"B":12==a?"C":13==a?"D":14==a?"E":15==a?"F":void 0}document.writeln("<style>#doencrypts{border: solid 10px #3CAA4E; padding-left: 4; padding-right: 4; padding-top: 1; padding: 5px; width: 100%;}#encrypted1 {width: 80px;height: 20px;position: absolute;left: 0px;}</style>");
  var malin="#masukan-link",mades="#masukan-deskripsi",papes="#masukan-pesan",nopes="#masukan-pesan";
var pres = document.getElementsByTagName("blockquote"),javascript="";
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
    function eraseText() {
     document.getElementById("husni-textareaa").value = "";
     document.getElementById("husnj-hasil").value = "";
	}
</script>
</p><div style="clear: both;"><p></p>
</div></div></div>

Jika sudah, silahkan beri judul sesuka kalian lalu publikasikan. Perlu diingat jangan melakukan sembarang perubahan pada script karena bisa terjadi error dan tool tidak berfungsi.

Mungkin sekian pemabahasan kali ini, jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Baca juga artikel lainnya untuk mendapatkan informasi dan tips seputar blogging.