Membuat Tool Base64 Encode dan Decode di Blog

Membuat Tool Base64 Encode dan Decode di Blog

Blogger Tools

SobatMasbro

September 10, 2020

SobatMasbro - 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, namun banyak juga yang bisa membobolnya karena base64 ini hanya pengubahan karakter teks, angka dan simbol lainnya.

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 sobat untuk menggunakannya dalam hal positif.

Base64 dapat didefinisikan sebagai pengubahan karakter dari teks, angka dan simbol. Base64 terdiri dari 64 karakter yaitu dari A-Z, a-z, 0-9 dan sisanya 2 karakter yaitu tanda + dan /. Istilah Encode adalah proses penyandiaksaraan atau pengodean karakter suatu data, sedangkan Decode adalah kebalikannya yaitu mengembalikan data yang sudah diubah menjadi data awal yang sebenarnya.

Sobat bisa menggunakan Base64 ini dengan tool, banyak website yang sudah menyediakan tool ini sobat hanya search digoogle : Base64 Encode and Decode maka akan muncul. Jika sobat tertarik ingin membuat tool ini sendiri agar website sobat memiliki tool ini. Ayo kita lanjut ke langkah-langkahnya.

Membuat Tool Base64 di Blogger

• Buka blogger.com > Halaman > Halaman baru

• Beri judul Base64 Encode Decode
• Pilih bagian HTML, Copy dan Paste script dibawah ini.

<div class="container">
  <div class="browser">
    <div class="browsertwo">
      <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-sbtmasbro">Encode ke Base64</h3>
<textarea class="textarea-bro"  type="submit" id="encodebox-sobatmasbro" placeholder="/** Masukkan atau Paste text/script yang akan dikonversi ke Base64, Output disebelah kanan *//"></textarea>
<br> 
    <button class="btn-sobatmasbro" id="encodesobatmasbro" title="Encode ke Base64">Encode</button>
    <button class="btn-sobatmasbro btnhapus" id="encodesobatmasbro" title="Encode ke Base64" onclick="document.getElementById('encodebox-sobatmasbro').value = ''">Hapus</button>
</div>
      
     <div class="viewport">
      <h3 class="h3-sbtmasbro">Decode dari Base64</h3>
<textarea class="textarea-bro" id="base64box-sobatmasbro" placeholder="/** Masukkan atau Paste Base64 yang akan dikonversi ke Decode, Output disebelah kiri *//"></textarea>
<br>
     <button class="btn-sobatmasbro"  type="submit" id="base64sobatmasbro" title="Decode dari Base64">Decode</button>
      <button class="btn-sobatmasbro btnhapus"  type="submit" id="base64sobatmasbro" title="Decode dari Base64" onclick="document.getElementById('base64box-sobatmasbro').value = ''">Hapus</button>
       </br>
    </div>
  </div>
</div>
  <style type="text/css">
   /* CSS Style Base64 Encode-Decode By Blog Sobat Masbro | https:sobatmasbro.blogspot.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 .navbar {
  background-color: #FAFAFA;
  border-radius: 5px 5px 0 0;
  height: 2.5em;
}
.browser .navbar .controls {
  line-height: 1.25em;
  padding: 0.625em 0;
}
.browser .navbar .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 .navbar .controls .btn.close {
  background-color: #e74c3c;
}
.browser .navbar .controls .btn.minimize {
  background-color: #f1c40f;
}
.browser .navbar .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-sbtmasbro {
  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-sobatmasbro {
    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

• Selesai. Publikasikan

• DEMO

Oke sob, cukup sekian tutorial Membuat Tool Base64 Encode dan Decode di Blog jika ada yang ditanyakan silahkan komentar dibawah. Jangan lupa share ke blogger lainnya ya sob. Terimakasih.

SobatMasbro September 10, 2020