Cara Membuat Tools Encoder Base64 di Halaman Statis Blogger

Pada kesempatan kali ini saya akan memberikan sebuah tutorial bagaimana Cara Membuat Tools Encoder Base64 Di Blogger. Tapi sebelum memasuki artikelnya saya akan memberitahukan apasih itu base64 Encoder.

Apa Itu base64 Encoder ?

Base64 Encoder adalah skema kode binari untuk teks serupa yang mewakili data binari dalam format rentetan ASCII dengan menerjemahkannya menjadi representasi radix-64. Istilah Base64 berasal dari pemindahan pengekodan kandungan MIME tertentu. Setiap digit Base64 mewakili 6 bit data. Oleh itu, tiga bait 8-bit (iaitu, sejumlah 24 bit) dapat diwakili oleh empat digit Base64 6-bit.


Base64 biasanya banyak digunakan oleh pereka web untuk menyulitkan kode ke dalam kode rawak atau binari dalam bentuk teks. Kemudian, pereka web, yang membuat template biasanya melindungi hak cipta (pembuat template) dengan menyulitkan kod "Redirect / Redirect" jika pada bila-bila masa hak cipta atau kredit templat dipadamkan, ia akan dipindahkan ke laman pembuatan template. Anda boleh menggunakan Base64 untuk melindungi kode anda.

Cara Membuat Tools Encoder Base64 Di Halaman Statis Blogger

1. Silahkan kamu login ke Blogger.com dengan menggunakan akun gmail kamu.
2. Masuk ke menu HALAMAN dan Buat Halaman Baru
3. Jangan lupa menambahkan Judul seperti "Encoder Base64" dan Masuk ke menu HTML.
4. Silahkan kamu paste kode dibawah ini dalam menu HTML bukan Compose.

<script type="text/javascript" src="https://code.jquery.com/jquery-1.9.1.js"></script>    
<script type="text/javascript" src="https://cdn.staticaly.com/gh/hilmay619/pribadi/f430da03/alertify.min.js"></script>    
<script type="text/javascript" src="https://cdn.staticaly.com/gh/hilmay619/pribadi/54b713e9/codecs.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">


<style type="text/css">

.ribbon {
    position: relative;
    z-index: 1;
    padding: 1em 2em;
}

.ribbon-tampilan {
    font-size: 120% !important;
    text-transform: uppercase;
    width: 60%;
    position: relative;
    background: #2980b9;
    color: #fff;
    text-align: center;
    padding: 1em 2em;
    margin: 2em auto 3em;
}

.ribbon-tampilan:before,.ribbon-tampilan:after {
    content: "";
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1.5em solid #2980b9;
    z-index: -1;
}

.ribbon-tampilan:before {
    left: -2em;
    border-right-width: 1.5em;
    border-left-color: transparent;
}

.ribbon-tampilan:after {
    right: -2em;
    border-left-width: 1.5em;
    border-right-color: transparent;
}

.ribbon-tampilan .ribbon-nama:before,.ribbon-tampilan .ribbon-nama:after {
    content: "";
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #2980b9 transparent transparent transparent;
    bottom: -1em;
}

.ribbon-tampilan .ribbon-nama:before {
    left: 0;
    border-width: 1em 0 0 1em;
}

.ribbon-tampilan .ribbon-nama:after {
    right: 0;
    border-width: 1em 1em 0 0;
}
    
 textarea {
    width: 94%;
    height: 300px;
    margin: 0 auto;
    display: block;
    background-color: #fff;
    padding: 20px;
    font: normal 13px 'Courier New',Monospace;
    border: 3px solid #2980b9;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,0.05);
    border-radius:8px;
    resize: none;
}

#belakang {
    background: #ecf0f1;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
}

.hasil {
    color: #fff;
    background: #2980b9;
    text-align: center;
    padding: 20px 40px 20px;
    margin: 20px;
    border-radius: 4px;
}

input[type="file" i] {
    width: 50%;
    color: #fff!important;
    height: 50px;
    font-size: 14px;
    font-weight: bold;
    background: #015c98;
    padding: 15px 25px;
    border-radius: 4px;
    border: none;
    outline: none;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16),0 2px 10px 0 rgba(0,0,0,0.12);
    cursor: pointer;
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    margin: 10px;
}

.minify {
    width: 15%;
    margin: 2%;
}

.beautify {
    width: 15%;
}

button {
    color: #fff !important;
    height: 50px;
    font-weight: bold;
    outline: none;
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.16), 0 2px 10px 0 rgba(0,0,0,0.12);
    text-transform: uppercase;
}
    
.button-group {
    margin: 0 auto 0;
    text-align: center;
}

button,button[disabled]:active {
    border: none;
    padding: 5px 35px;
    text-align: center;
    display: inline-block;
    white-space: nowrap;
    background-color: #0ea6d8;
    cursor: pointer;
    font-family: 'Open Sans',Arial,Sans-Serif;
    font-size: 14px;
    position: relative;
    top: -1px;
    margin: 10px;
    line-height: 23px;
    border-radius: 4px;
    transition: all 0.3s ease-in-out;
}

button:hover {
    background: #034c64;
}

button[disabled],button[disabled]:active {
    background: #0095c6;
}

.belakang-upload {
    background: #2980b9;
    font-size: 16px;
    color: #fff;
    font-weight: bold;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 10px 20px;
    border: 1px solid rgba(0,0,0,0.05);
}

form {
    padding: 20px;
}

form label {
    display: inline-block;
    position: relative;
    cursor: pointer;
    line-height: 47px;
    vertical-align: top;
    font-weight: bold;
}

form .form-check {
    display: inline-block;
    position: relative;
    width: 50px;
    height: 25px;
}

form .form-check::before {
    content: "";
    display: inline-block;
    position: relative;
    width: 50px;
    height: 25px;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50px;
    -moz-border-radius: 30px;
}

form .form-radio {
    display: none;
}

form .form-radio + label {
    padding-left: 35px;
}

form .form-radio + label::before {
    content: "";
    position: absolute;
    left: 0;
    display: inline-block;
    width: 25px;
    height: 25px;
    background: #fff;
    margin-right: 5px;
    border: 1px solid #ddd;
    border-radius: 50%;
    -moz-border-radius: 50%;
    box-shadow: 2px 2px 2px #bbb;
    -moz-box-shadow: 2px 2px 2px #bbb;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -khtml-transition: 0.3s;
}

form .form-radio:checked + label::before {
    background: #34A8BF;
    border: 5px solid #fff;
    width: 17px;
    height: 17px;
}

form .form-check::after {
    content: "";
    display: inline-block;
    position: absolute;
    width: 21px;
    height: 21px;
    border-radius: 25px;
    -moz-border-radius: 25px;
    background: #b6b6b6;
    left: 3px;
    top: 3px;
    transition: 0.3s;
    -moz-transition: 0.3s;
    -webkit-transition: 0.3s;
    -khtml-transition: 0.3s;
}

form .form-check:checked::after {
    left: 27px;
    background: #1bc94d;
}

fieldset {
    display: block;
    -webkit-margin-start: 2px;
    -webkit-margin-end: 2px;
    -webkit-padding-before: 0.35em;
    -webkit-padding-start: 0.75em;
    -webkit-padding-end: 0.75em;
    -webkit-padding-after: 0.625em;
    min-width: -webkit-min-content;
    border: 2px solid aliceblue;
    border-radius: 4px;
}

legend {
    text-align: center;
    display: block;
    margin: 5px;
    font-weight: bold;
    -webkit-padding-start: 2px;
    -webkit-padding-end: 2px;
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
}

.opt1,.opt2,.opt3,.opt4,.opt5 {
    color: #fff!important;
    font-size: 14px;
    font-weight: bold;
    padding: 15px 25px;
    border-radius: 4px;
    border: none;
    outline: none;
    cursor: pointer;
    transition: all .4s ease-in-out;
    text-transform: uppercase;
    margin: 10px 5px 15px;
}

.belakang-memilih {
    margin: 10px auto;
    font-size: 15.5px;
    color: #fff;
    font-weight: bold;
    background: #2980b9;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    border: 1px solid rgba(0,0,0,0.05);
}

.belakang-memilih-2 {
    margin: 15px;
    background: #2980b9;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
}

.belakang-tombol {
    background: #015c98;
    position: relative;
    display: block;
    clear: both;
    border-radius: 5px;
    padding: 20px;
    border: 1px solid rgba(0,0,0,0.05);
}
    
/* CSS Demo Download Buttons */
.de-down {
    font-weight: bold;
    border-radius: 8px;
    background: #2980b9;
    list-style: none;
    text-align: center;
    margin: 10px!important;
    padding: 20px!important;
    font-size: 14px;
    clear: both;
    display: inline-block;
    text-decoration: none!important;
    color: #FFF!important;
}

.de-down ul {
    margin: 0;
    padding: 0;
}

.de-down li {
    display: inline;
    margin: 5px;
    padding: 0;
    list-style: none;
}

.demo {
    text-decoration: none;
    padding: 12px 15px!important;
    color: #fff!important;
    font-weight: 700;
    font-size: 14px;
    font-family: Open Sans,sans-serif;
    text-align: center;
    text-transform: uppercase;
    border-radius: 3px;
    opacity: .95;
    border: 0;
    letter-spacing: 2px;
    transition: all .2s ease-out;
}

.demo {
    background-color: #3498DB;
}

.download {
    background-color: #fff;
    padding: 12px 15px!important;
    color: #000!important;
    font-weight: 700;
    font-size: 14px;
    font-family: Open Sans,sans-serif;
    text-align: center;
    text-transform: uppercase;
    border-radius: 3px;
    opacity: .95;
    border: 0;
    letter-spacing: 2px;
    transition: all .2s ease-out;
}

.demo:hover {
    background-color: #015c98;
    color: #fff;
    border-bottom: 2px solid #fff;
    opacity: 1;
}


.demo:before {
    display: inline-block;
    font-weight: normal;
    vertical-align: top;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    line-height: 24px;
    font-family: fontawesome;
    transition: all 0.5s ease-out;
}

.download:before {
    content: '\f019';
    display: inline-block;
    font-weight: normal;
    vertical-align: top;
    margin-right: 10px;
    width: 16px;
    height: 16px;
    line-height: 24px;
    font-family: fontawesome;
    transition: all 0.5s ease-out;
}
    
.fileUpload {
    position: relative;
    overflow: hidden;
    margin: 10px;
}
.fileUpload input.upload {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    font-size: 20px;
    cursor: pointer;
    opacity: 0;
    filter: alpha(opacity=0);
}
    
.alertify,.alertify-show,.alertify-log {
    -webkit-transition: all 500ms cubic-bezier(0.175,0.885,0.320,1.275);
    -moz-transition: all 500ms cubic-bezier(0.175,0.885,0.320,1.275);
    -ms-transition: all 500ms cubic-bezier(0.175,0.885,0.320,1.275);
    -o-transition: all 500ms cubic-bezier(0.175,0.885,0.320,1.275);
    transition: all 500ms cubic-bezier(0.175,0.885,0.320,1.275);
    ;
}

.alertify-hide {
    -webkit-transition: all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);
    -moz-transition: all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);
    -ms-transition: all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);
    -o-transition: all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);
    transition: all 250ms cubic-bezier(0.600,-0.280,0.735,0.045);
    ;
}

.alertify-log-hide {
    -webkit-transition: all 500ms cubic-bezier(0.600,-0.280,0.735,0.045);
    -moz-transition: all 500ms cubic-bezier(0.600,-0.280,0.735,0.045);
    -ms-transition: all 500ms cubic-bezier(0.600,-0.280,0.735,0.045);
    -o-transition: all 500ms cubic-bezier(0.600,-0.280,0.735,0.045);
    transition: all 500ms cubic-bezier(0.600,-0.280,0.735,0.045);
    ;
}

.alertify-cover {
    position: fixed;
    z-index: 99999;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: white;
    filter: alpha(opacity=0);
    opacity: 0;
}

.alertify-cover-hidden {
    display: none;
}

.alertify {
    position: fixed;
    z-index: 99999;
    top: 50px;
    left: 50%;
    width: 550px;
    margin-left: -275px;
    opacity: 1;
}

.alertify-hidden {
    -webkit-transform: translate(0,-150px);
    -moz-transform: translate(0,-150px);
    -ms-transform: translate(0,-150px);
    -o-transform: translate(0,-150px);
    transform: translate(0,-150px);
    opacity: 0;
    display: none;
}

:root *>.alertify-hidden {
    display: block;
    visibility: hidden;
}

.alertify-logs {
    position: fixed;
    z-index: 5000;
    bottom: 10px;
    right: 10px;
    width: 300px;
}

.alertify-logs-hidden {
    display: none;
}

.alertify-log {
    display: block;
    margin-top: 10px;
    position: relative;
    right: -300px;
    opacity: 0;
}

.alertify-log-show {
    right: 0;
    opacity: 1;
}

.alertify-log-hide {
    -webkit-transform: translate(300px,0);
    -moz-transform: translate(300px,0);
    -ms-transform: translate(300px,0);
    -o-transform: translate(300px,0);
    transform: translate(300px,0);
    opacity: 0;
}

.alertify-dialog {
    padding: 25px;
}

.alertify-resetFocus {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.alertify-inner {
    text-align: center;
}

.alertify-text {
    margin-bottom: 15px;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    font-size: 100%;
}

.alertify-buttons {
}

.alertify-button,.alertify-button:hover,.alertify-button:active,.alertify-button:visited {
    background: none;
    text-decoration: none;
    border: none;
    line-height: 1.5;
    font-size: 100%;
    display: inline-block;
    cursor: pointer;
    margin-left: 5px;
}

@media only screen and (max-width:680px) {
    .alertify,.alertify-logs {
        width: 90%;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
    }

    .alertify {
        left: 5%;
        margin: 0;
    }
}

.alertify,.alertify-log {
    font-family: sans-serif;
}

.alertify {
    background: #FFF;
    border: 10px solid #333;
    border: 10px solid rgba(0,0,0,.7);
    border-radius: 8px;
    box-shadow: 0 3px 3px rgba(0,0,0,.3);
    -webkit-background-clip: padding;
    -moz-background-clip: padding;
    background-clip: padding-box;
}

.alertify-text {
    border: 1px solid #CCC;
    padding: 10px;
    border-radius: 4px;
}

.alertify-button {
    border-radius: 4px;
    color: #FFF;
    font-weight: bold;
    padding: 6px 15px;
    text-decoration: none;
    text-shadow: 1px 1px 0 rgba(0,0,0,.5);
    box-shadow: inset 0 1px 0 0 rgba(255,255,255,.5);
    background-image: -webkit-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
    background-image: -moz-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
    background-image: -ms-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
    background-image: -o-linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
    background-image: linear-gradient(top,rgba(255,255,255,.3),rgba(255,255,255,0));
}

.alertify-button:hover,.alertify-button:focus {
    outline: none;
    background-image: -webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
    background-image: -moz-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
    background-image: -ms-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
    background-image: -o-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
    background-image: linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
}

.alertify-button:focus {
    box-shadow: 0 0 15px #2B72D5;
}

.alertify-button:active {
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,.15),0 1px 2px rgba(0,0,0,.05);
}

.alertify-button-cancel,.alertify-button-cancel:hover,.alertify-button-cancel:focus {
    background-color: #FE1A00;
    border: 1px solid #D83526;
}

.alertify-button-ok,.alertify-button-ok:hover,.alertify-button-ok:focus {
    background-color: #5CB811;
    border: 1px solid #3B7808;
}

.alertify-log {
    background: #1F1F1F;
    background: rgba(0,0,0,.9);
    padding: 15px;
    border-radius: 4px;
    color: #FFF;
    text-shadow: -1px -1px 0 rgba(0,0,0,.5);
}

.alertify-log-error {
    background: #FE1A00;
    background: rgba(254,26,0,.9);
}

.alertify-log-success {
    font-weight: bold;
    width: 400px;
    padding: 15px;
    right: 120px;
    background: #5CB811;
    background: rgba(92,184,17,.9);
} 
    
    </style>
    
    
<body>
    
<article>
<div class="ribbon">
<h1 class="ribbon-tampilan">
<strong class="ribbon-nama">BASE64 ENCODER</strong>
</h1>
</div>    
<div id="belakang">
            <div class="belakang-upload">
            BROWSE :
            <input type="file" id="fileToEncode" name="fileToEncode" onchange='$("#uploadFileInfo").html($(this).val().replace(/^.*\\/, ""))' />
        </div>
            
  <div class="hasil">
<span style="font-size: large;"><b> INPUT :</b></span>
        </div>
    <textarea placeholder="Paste your code here..." id="toEncode"  class="codec-input"></textarea>
    
<br />
    
    <div id="textOutputPanel">
  <div class="hasil">
<span style="font-size: large;"><b> RESULT :</b></span>
        </div>
    <textarea readonly id="htmlOutput" class="codec-output"></textarea>
    </div>
<div class="belakang-memilih"> 
<form action="">
<fieldset>
<legend>SELECTED</legend>
<input checked="checked" type="checkbox" id="generateTextRendition" class="opt1 form-check">
<label for="generateDownloadLink">AUTO GENERATE TEXT RENDITION</label>
    
<input type="checkbox" id="generateDownloadLink" class="opt2 form-check">
<label for="generateDownloadLink">AUTO GENERATE DOWNLOAD LINK</label>
    
<input type="checkbox" id="makeUrlSafe" checked="checked" class="opt3 form-check">
<label for="makeUrlSafe">USE URL-SAFE BASE64</label>
    
<input checked="checked" type="checkbox" id="useSimplifiedEncoding" class="opt4 form-check">
 <label for="useSimplifiedEncoding">USE SIMPLIFIED ENCODER</label>
    </fieldset>
    </form>    
 </div> 
 
<div style="display: none" id="fileOutputContainer">   
<div style="text-align: center;">
<ul class="de-down">
<li><a class="demo" href="#" id="fileOutputLink">DOWNLOAD</a></li>
    FILE NAME :
        <input class="download" type="text" id="filenameField" value="BASE64.txt" />
</ul>
</div>
    </div>
    
    
    
    <center>
    <div class="belakang-memilih-2">
       <div class="belakang-tombol">
<div class="button-group">
    <button onclick="return encode()">ENCODE</button>
    <button onclick="window.location.reload()">RELOAD</button>
    <button onclick="copyToClipboard();">COPY TO CLIPBOARD</button>
           </div> 
        </div>
        </div>
</center>
</div>
    
    </article> 
    
    
 <script type="text/javascript">
    function fetchEncoder() {
        let encoder;
        if ($('#useSimplifiedEncoding').is(':checked')) {
            encoder = new SimplifiedBase64Encoder();
        } else {
            encoder = new FullBase64Encoder();
        }

        if ($('#makeUrlSafe').is(':checked')) {
            encoder = new MakeUrlSafeTransformer(encoder);
        }

        return encoder;
    }

    function fetchOutput() {
        let fileOutput;
        if ($('#generateDownloadLink').is(':checked')) {
            fileOutput = new FileOutput('#fileOutputContainer', '#filenameField', '#fileOutputLink');
        } else {
            fileOutput = new InactiveFileOutput('#fileOutputContainer', '#filenameField', '#fileOutputLink');
        }

        let htmlOutput;
        if ($('#generateTextRendition').is(':checked')) {
            htmlOutput = new HtmlOutput('#htmlOutput', '#htmlOutput');
        } else {
            htmlOutput = new InactiveHtmlOutput('#htmlOutput', '#htmlOutput');
        }

        const container = new ContainerVisibilityOutput('#textOutputPanel')
        const output = new CompoundOutput(container, htmlOutput, fileOutput);

        return output;
    }

    function encode() {
        const fileInputElement = $('#fileToEncode').get(0);
        const fileInput = new BinaryFileInput(fileInputElement)
        const htmlInput = new HtmlInput('#toEncode');
        const input = new OneOrOtherInput(fileInput, htmlInput, function() { return fileInputElement.files.length == 1})

        const encoder = fetchEncoder();

        const output = fetchOutput();

        const action = new Action(input, encoder, output);
        action.act();
    }
     function copyToClipboard() {
  $("#htmlOutput").select();
  document.execCommand("copy");
alertify.success("YOUR CODE HAS BEEN SUCCESSFULLY COPIED");
}
</script>

5. Kalau sudah silahkan klik SIMPAN dan Selesai.

Bagaimana mudah bukan untuk tutorial Cara Membuat Tools Encoder Base64 Di Halaman Statis Blogger apabila kamu memiliki pertanyaan seputar blogger silahkan komen di kolom komentar dibawah artikel ini.
Tampilkan Komentar
Sembunyikan Komentar

0 Response to "Cara Membuat Tools Encoder Base64 di Halaman Statis Blogger"

Post a Comment

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar semua.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel