Cara Memasang Tools Password Generator di Blog

 Halo teman-teman, pada kesempatan kali ini admin esp.my.id akan memberi tutorial kepada kalian semua Cara Membuat Tools Password Generator di Blog. 

Password Generator adalah salah satu tools website yang sangat berguna untuk memudahkan siapapun dalam mengisi password atau kata sandi. 

Adapun cara kerja tools ini dengan menampilkan daftar karakter secara acak menggunakan JavaScript. 

Tools kali ini juga bisa di kustomisasi dengan menentukan panjang dari karakter, penggunaan huruf besar/kapital dan huruf kecil, angka, serta simbol untuk membuat password. 

Untuk lihat selengkapnya, silahkan kalian membuka link di bawah ini untuk melihat demo tampilannya. 

Demo

Selain autentikasi 2 faktor, pemilihan karakter pada password memang sangatlah penting untuk di perhatikan. 

Semakin susah karakter yang dibuat, semakin kuat juga kualitas password yang dihasilkan. 

Hal tersebut tentu dapat mengurangi resiko pencurian data oleh hacker atau cracker. 

Ada beberapa langkah yang sangat penting dan perlu diperhatikan saat membuat password loh, diantaranya yaitu. 

1. Jangan menggunakan nama pribadi, tanggal ulang tahun, dan angka yang berurutan (contoh : 12345678) 

2. Jangan menggunakan password yang sama di semua akun kalian

3. Jangan menggunakan password yang kurang dari 6 karakter, minimal pembuatan password ada 8 angka atau huruf

4. Jangan menggunakan kata-kata yang sangat umum digunakan

5. Gunakan kombinasi huruf, angka, dan simbol (contoh : Abc@2883) 

Seperti yang sudah saya jelaskan di atas, tools password generator ini sangat bisa digunakan untuk menghasilkan password secara acak dengan kombinasi huruf, angka, maupun simbol. 

Selain itu, anda juga bisa mengatur secara manual panjang dari karakter password yang akan kalian gunakan. 

Cara Memasang Tools Password Generator di Blog

Step 1 : Masuk ke Dashbord Blogger kalian

Step 2 : Silahkan masuk ke menu HALAMAN

Step 3 : Tambahkan HALAMAN baru

Step 4 : Silahkan salin dan tempelkan kode di bawah ini, ke halaman yang baru kalian buat

<!-- HTML by ESP -->
<div class="passGenerator">
  <div class="passResult">
    <span id="result"></span>
    <button class="passButton" id="clipboard">COPY</button>
  </div>
  <div class="passLists">
    <div class="passList">
      <label>Password length</label>
      <input type="number" id="length" min="0" max="20" value="12"/>
    </div>
    <div class="passList">
    <label>Include uppercase letter</label>
    <input type="checkbox" id="uppercase" checked/>
    </div>
    <div class="passList">
      <label>Include lowercase letter</label>
      <input type="checkbox" id="lowercase" checked/>
    </div>
    <div class="passList">
      <label>Include number</label>
      <input type="checkbox" id="numbers" checked/>
    </div>
    <div class="passList">
      <label>Include symbol</label>
      <input type="checkbox" id="symbols"/>
    </div>
  </div>
  <button class="passButton largeButton" id="generate">GENERATE</button>
</div>
<!-- End HTML -->

<!-- CSS by ESP -->
<style>
/* Password Generator by www.esp.my.id */
.passGenerator{width:100%;max-width:100%;background:#fffeff;font-family:"Noto Sans",sans-serif;font-size:16px;padding:20px;border:1px solid #e6e6e6}
.passResult{display:flex;justify-content:flex-start;align-items:center;position:relative;width:100%;height:50px;background-color:#f8f8f8;font-size:18px;letter-spacing:1px;padding:12px 10px}
.passResult #result{word-wrap:break-word;max-width:calc(100% - 40px);color:#009ee0;font-weight:bold}
input#length{background:#fafafa;padding:8px;border:0}
.passResult .passButton{position:absolute;top:5px;right:5px;font-size:20px;height:40px;font-size:12px;letter-spacing:1.5px}
.passButton{background-color:#009ee0;color:#fff;padding:8px;font-size:16px;border:none;cursor:pointer}
.largeButton{display:block;margin:0 auto;padding:10px;font-size:15px}
.passList{display:flex;justify-content:space-between;align-items:center;margin:15px 0}
input[type=checkbox]{margin-right:0}
@media screen and (max-width:400px){.passResult{font-size:14px}}
/* Dark Mode */
.darkmode .passResult{background:#1e1e1e}
.darkmode .passGenerator{background:#252526;border-color:rgba(255,255,255,.15)}
.darkmode .passButton{background:#2d2d30}
.darkmode input#length{background:#1e1e1e}
</style>
<!-- End CSS -->

<!-- JavaScript by ESP -->
<script>
const resultEl=document.getElementById("result"),lengthEl=document.getElementById("length"),uppercaseEl=document.getElementById("uppercase"),lowercaseEl=document.getElementById("lowercase"),numbersEl=document.getElementById("numbers"),symbolsEl=document.getElementById("symbols"),generateEl=document.getElementById("generate"),clipboardEl=document.getElementById("clipboard"),randomFunc={lower:getRandomLower,upper:getRandomUpper,number:getRandomNumber,symbol:getRandomSymbol};
generate.addEventListener("click",()=>{const e=+lengthEl.value,c=lowercaseEl.checked,l=uppercaseEl.checked,s=numbersEl.checked,n=symbolsEl.checked;resultEl.innerText=generatePassword(c,l,s,n,e)});
clipboardEl.addEventListener("click",()=>{const e=document.createElement("textarea"),t=resultEl.innerText;t&&(e.value=t,document.body.appendChild(e),e.select(),document.execCommand("copy"),e.remove(),alert("Password copied!"))});
function generatePassword(e,r,t,n,o){let c="";const s=e+r+t+n,l=[{lower:e},{upper:r},{number:t},{symbol:n}].filter(e=>Object.values(e)[0]);if(0===s)return"";for(let e=0;e<o;e+=s)l.forEach(e=>{const r=Object.keys(e)[0];c+=randomFunc[r]()});return c.slice(0,o)}
function getRandomLower(){return String.fromCharCode(Math.floor(26*Math.random())+97)}function getRandomUpper(){return String.fromCharCode(Math.floor(26*Math.random())+65)}function getRandomNumber(){return String.fromCharCode(Math.floor(10*Math.random())+48)}function getRandomSymbol(){return"!@#$%^&*(){}[]=<>/,."[Math.floor(Math.random()*"!@#$%^&*(){}[]=<>/,.".length)]}
const floating_passButton=document.querySelector(".floating-passButton"),close_passButton=document.querySelector(".close-passButton"),social_panel_passGenerator=document.querySelector(".social-panel-passGenerator");
floating_passButton.addEventListener("click",()=>{social_panel_passGenerator.classList.toggle("visible")}),close_passButton.addEventListener("click",()=>{social_panel_passGenerator.classList.remove("visible")})
</script>
<!-- End JavaScript -->

Step 5 : Jika sudah silahkan klik PUBLIKASIKAN

Step 6 : Selesai, dan lihat hasilnya. 

Penutup

Demikian tutorial dari saya Cara Membuat Tools Password Generator di Blog. 

Bagi kalian yang masih belum paham silahkan komen di kolom komentar yang sudah disediakan dan jangan lupa centang notif me, agar kalian mendapatkan notif email bila saya balas. 

Jika kalian suka dengan artikel kali ini jangan lupa share ke grup blogger kalian dan jangan lupa komen ya, terimakasih.