Cara Mudah Membuat Tools Encode & Decode base64 di Blogger
Base64 adalah metode encoding yang mengubah teks atau script menjadi rangkaian karakter acak seperti huruf, angka, dan simbol. Tujuannya adalah untuk menyembunyikan struktur asli script agar tidak mudah diubah atau dimodifikasi oleh orang lain.
Encoding Base64 sering digunakan dalam berbagai konteks, mulai dari keamanan data, penyembunyian script, hingga pada penggunaan template ilegal. Namun, dalam tutorial ini saya menyarankan agar kamu menggunakannya secara positif, misalnya untuk melindungi karya pribadi seperti script HTML atau JavaScript.
Meski tools serupa sudah banyak tersedia di internet, tidak ada salahnya membuat tools Encode & Decode Base64 sendiri di blog kamu. Selain menambah fitur navigasi, hal ini juga bisa menarik pengunjung lebih banyak.
Klik button demo diatas untuk melihat tampilan detailnya. Jika Anda tertarik membuatnya, silahkan ikuti langkah-langkah berikut ini.
Langkah-langkah Membuat Tools 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>Catatan Penting
- Gunakan kode ini sebagaimana mestinya dan hindari penggunaan untuk hal negatif seperti menyembunyikan malware atau script ilegal.
- Jangan sembarangan mengubah struktur script jika kamu tidak memahami fungsinya, karena bisa menyebabkan tool tidak bekerja dengan baik.
Penutup
Itulah cara membuat tools Encode dan Decode Base64 sendiri di Blogger. Dengan alat ini, kamu bisa melindungi script dari manipulasi, atau sekadar memberikan fitur tambahan untuk pengunjung blog.
Jika ada pertanyaan, silakan tinggalkan komentar di bawah. Jangan lupa untuk membaca artikel lainnya seputar tutorial dan tips blogging!
Post a Comment