Membuat Tools Encode & Decode base64

Membuat Tools Encode & Decode base64

Base64 merupakan sistem penguncian atau mengubah suatu bahasa program (encoding) menjadi huruf, angka dan simbol abstrak, yang bertujuan agar bahasa program tersebut tidak bisa diubah atau dimodifikasi oleh siapapun.

Base64 sering digunakan dalam isu hacking berbasis PHP ataupun HTML dan yang paling sering digunakan yaitu untuk dalam penggunaan theme, plugin atau template yang ilegal. Namun disini saya menyarankan kalian untuk menggunakannya dalam hal positif.

Meskipun tool ini sudah tersedia banyak di internet, tidak ada salahnyaa jika Anda membuat tool encode dan decode base64 sendiri untuk menambah fitur navigasi blog Anda agar para pengunjung semakin tertarik.

Demo

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

Cara Membuat Tool Encode & Decode base64

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

<div class="container">
  <div class="browser">
    <div class="atap">
      <div class="controls">
        <button class="btn close"></button>
        <button class="btn minimize"></button>
        <button class="btn fullscreen"> </button>
      </div>
    </div>
    <div class="viewport">
      <h3 class="h3-rekisptra">Encode Base64</h3>
<textarea class="textarea-bro" cols="71" id="encodebox-rekisptra" placeholder="Masukkan text (script) yang akan dikonversi ke Base64, Output disebelah kanan ..." row="11" type="submit"></textarea>
<br /> 
    <button class="btn-rekisptra" id="encoderekisptra" title="Encode Base64">Encode</button>
    <button class="btn-rekisptra btnhapus" id="encoderekisptra" onclick="document.getElementById('encodebox-rekisptra').value = ''" title="Encode Base64">Hapus</button>
</div>
      
     <div class="viewport">
      <h3 class="h3-rekisptra">Decode Base64</h3>
<textarea class="textarea-bro" cols="71" id="base64box-rekisptra" row="11" placeholder="Masukkan text Base64 yang akan dikonversi ke Decode, Output diatas ..."></textarea>
<br />
     <button class="btn-rekisptra" id="base64rekisptra" title="Decode Base64" type="submit">Decode</button>
      <button class="btn-rekisptra btnhapus" id="base64rekisptra" onclick="document.getElementById('base64box-rekisptra').value = ''" title="Decode Base64" type="submit">Hapus</button>
       
    </div>
  </div>
</div>
<style type="text/css">

   /* CSS Style Base64 Encode-Decode By Blog Media 903 | https://www.media903.com */

.container {
    align-items: center;
    display: flex;
    justify-content: center;
}
.browser {
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
      -ms-flex-direction: column;
          flex-direction: column;
}
.browser .atap {
  background-color: #FAFAFA;
  border-radius: 5px 5px 0 0;
  height: 2.5em;
}
.browser .atap .controls {
  line-height: 1.25em;
  padding: 0.625em 0;

}

.browser .atap .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 .atap .controls .btn.close {
  background-color: #e74c3c;
}
.browser .atap .controls .btn.minimize {
  background-color: #f1c40f;
}
.browser .atap .controls .btn.fullscreen {
  background-color: #2ecc71;
}
.browser .viewport {
  background-color: #f5f5f5;
  border-radius: 0 0 5px 5px;
  -webkit-box-flex: 1;
  -webkit-flex: 1;
      -ms-flex: 1;
          flex: 1;
  padding: 15px;
  text-align: center;
  float: left;
  }
  .h3-rekisptra {
  margin: 12px;
  font-family: 'arial';
  font-size: 18px;
}
.textarea-bro {
  border: 2px solid #3499dc;
  border-radius: 5px;
  width: 300px;
  height: 250px;
  padding: 10px;
  resize: none;
  outline: none;
}
.btn-rekisptra {
    margin: 12px;
    position: relative;
    display: inline-block;
    box-sizing: border-box;
    border: none;
    border-radius: 4px;
    padding: 12px;
    text-transform: uppercase;
    color: rgb(var(--pure-material-onprimary-rgb, 255, 255, 255));
    background-color: rgb(var(--pure-material-primary-rgb, 33, 150, 243));
    box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12);
    font-family: var(--pure-material-font, "Roboto", "Segoe UI", BlinkMacSystemFont, system-ui, -apple-system);
    font-weight: 500;
    outline: none;
    cursor: pointer;
    transition: box-shadow 0.2s;
}
.btnhapus {
  background-color : #F44336
}
</style>
<script src="https://raw.githack.com/OneTXz/Encode-Decode-Base64/Encode-Decode-Base64/encode-decode-base64.js"></script>
<script>/*<![CDATA[*/ function insertAfter(tbh,tgt) {var prt = tgt.parentNode; if (prt.lastChild == tgt) {prt.appendChild(tbh);} else {prt.insertBefore(tbh,tgt.nextSibling);}} var tgt = document.getElementById("postBody"); var midAd3 = document.getElementById("postRelated"); var showAd3 = tgt.getElementsByTagName("p"); if (showAd3.length > 0) {insertAfter(midAd3,showAd3[5]);}; /*]]>*/</script>
</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.

Demikian cara membuat tool encode dan decode base64 di halaman blogger. Jika ada yang ingin ditanyakan jangan ragu untuk menuliskannya pada kolom komentar. Baca juga artikel lainnya untuk mendapatkan tips seputar blogging.