Password generator is one of the useful tools to make it easier for users to determine passwords or passwords. The way this tool works is by displaying a random list of characters using JavaScript. These tools can also be customized by specifying the length of the character, the use of upper and lower case letters, numbers, and symbols. For more details, please open the following link to view the demo:

In addition to 2-factor authentication, the choice of characters in passwords is very important to note. The more difficult the characters used, the stronger the quality of the resulting password.

How to Install a Password Generator on a Blog

This certainly can reduce the risk of data theft by hackers. There are several important steps that need to be considered when creating a password, including:

• Do not use personal names, birthdays and consecutive numbers
• Do not use a password that is less than 6 characters
• Don't use the same password on all accounts
• Don't use commonly used words
• Use a combination of letters, numbers, and symbols.
• As I explained above, this tool can be used to generate random passwords with a combination of letters, numbers, and symbols. In addition, you can also manually set the length of the character to be used.

How to Install a Password Generator on a Blog

• Login to BLOGGER
• Select the PAGE menu
• Choose NEW PAGE
• Copy and paste in the page provided:

<!-- 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 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 class="creatorLink" style="font-size:12px"><a href="https://www.ferisp.com">Made by www.ferisp.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 */
.drK .passResult{background:#1e1e1e}
.drK .passGenerator{background:#252526;border-color:rgba(255,255,255,.15)}
.drK .passButton{background:#2d2d30}
.drK 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 -->

• Choose PUBLISH
• Finished.

Closing

To be more secure, don't forget to record or save the generated password for future account access. Oh yes, this time the widget was made based on the adaptation of the code / script from the www.inputekno.com blog.

Enough articles about How to Install a Password Generator on this Blog, Thank you.