Cara Membuat Tools Encode HTML (Unescape) Sendiri di Blogger

Menambahkan fitur alat bantu (tools) seperti HTML Encoder pada blog bisa menjadi nilai tambah yang membuat blog kamu terlihat lebih profesional. Tools ini berguna untuk mengubah script HTML menjadi bentuk terenkripsi agar tidak mudah diubah, disalin, atau disalahgunakan oleh pihak lain.

Apa Itu Encode HTML?

Encode atau enkripsi HTML adalah proses mengubah teks biasa menjadi bentuk kode yang sulit dibaca, biasanya digunakan untuk menyembunyikan struktur asli kode HTML atau JavaScript. Dengan cara ini, script kamu akan lebih aman dari modifikasi yang tidak diinginkan.

Meskipun banyak tools seperti ini tersedia secara online, membuat tools versi sendiri di blog bisa meningkatkan interaksi pengguna dan SEO, serta menunjukkan profesionalisme kamu sebagai blogger.

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

Langkah-langkah Membuat Tool Encode HTML di Blog

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>

Catatan

• Jangan ubah struktur utama script jika kamu belum paham JavaScript, karena kesalahan kecil bisa membuat tools tidak berjalan.
• Kamu bisa menyesuaikan teks watermark, nama situs, atau styling sesuai dengan branding blog kamu.

Penutup

Dengan membuat tool encode HTML sendiri di blog, kamu tidak hanya menjaga keamanan script milikmu, tapi juga memberikan nilai tambah dan fitur bermanfaat bagi pengunjung. Jika ada yang ingin ditanyakan, silakan tulis di kolom komentar. Jangan lupa baca artikel lainnya seputar tips blogging hanya di blog ini.