Cara Membuat Password Generator Tools Sendiri di Blogger

Password Generator adalah alat sederhana namun sangat berguna, terutama saat kamu ingin membuat akun media sosial, game, atau aplikasi lainnya yang membutuhkan kata sandi yang kuat dan aman.

Dengan bantuan tools ini, pengguna bisa langsung menghasilkan password secara acak (random) dengan kombinasi: huruf besar (kapital) dan kecil, angka, serta simbol.

Untuk lebih lengkapnya, silahkan klik button demo berikut untuk melihat tampilanya.

Fungsi & Manfaat Password Generator

• Membantu membuat kata sandi yang kuat dan sulit ditebak
• Menghindari penggunaan password umum atau duplikat
• Cocok digunakan oleh blogger, developer, dan pengguna umum

Meskipun tools semacam ini sudah banyak tersedia di internet, membuatnya sendiri di blog dapat menjadi nilai tambah:

• Menambah fitur interaktif untuk pengunjung
• Meningkatkan profesionalitas blog
• Menarik pengunjung yang datang dari pencarian kata kunci seputar keamanan digital

Cara Membuat Tools Password Generator di Blogger

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

<!--HTML-->
<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 id="length" max="20" type="number" value="12" />
    </div>
    <div class="passList">
    <label>Include uppercase letter</label>
    <input checked="" id="uppercase" type="checkbox" />
    </div>
    <div class="passList">
      <label>Include lowercase letter</label>
      <input checked="" id="lowercase" type="checkbox" />
    </div>
    <div class="passList">
      <label>Include number</label>
      <input checked="" id="numbers" type="checkbox" />
    </div>
    <div class="passList">
      <label>Include symbol</label>
      <input id="symbols" type="checkbox" />
    </div>
  </div>
  <button class="passButton largeButton" id="generate">GENERATE</button>
  <div class="creatorLink" style="font-size: 12px;"><a href="https://www.media903.com">Made by www.media903.com</a></div>
</div>
<!--End HTML-->

<!--CSS-->
<style>
.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}
.creatorLink{display:none}
@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-->
<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-->

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.

Penutup

Itulah panduan lengkap cara membuat Password Generator Tools di halaman Blogger. Dengan alat ini, kamu bisa membantu pengunjung membuat kata sandi kuat dengan mudah.

Jika ada pertanyaan, silakan tinggalkan di kolom komentar. Jangan lupa baca artikel menarik lainnya seputar tools blog, coding, dan tips blogging hanya di blog kamu!