How To Create A Copy Button For The Commands in Your WordPress Blog | Linux Ubuntu20 | Urdu-Hindi

<div class="command-box">
    <code>🙋Your Text, Command, or Code Goes Here!</code>
    <button class="copy-button" onclick="copyCommandToClipboard(this)"&💣#x2398; Copy</button>

<!-- In the Previous line Just Remove the BOMB between & and #x2398, Place this script in your 'ShortCodes' box on your website  --> 
    <span class="copy-message">Command Copied</span>
  </div>
              
  <script>
    function copyCommandToClipboard(button) {
      var commandText = button.previousElementSibling.innerText.trim();
      navigator.clipboard.writeText(commandText);
      var copyMessage = button.nextElementSibling;
      copyMessage.style.display = "inline-block";
      setTimeout(function() {
        copyMessage.style.display = "none";
      }, 2000);
    }
  </script>
              
  <style>
    .command-box {
      background-color: #f4f4f4;
      border: 1px solid #ccc;
      padding: 10px;
      display: flex;
      align-items: center;
      margin-bottom: 10px;
    }
              
    .command-box code {
      flex-grow: 1;
    }
              
    .copy-button {
      background-color: transparent;
      border: none;
      padding: 0;
      cursor: pointer;
      font-size: 1.2rem;
    }
              
    .copy-message {
      display: none;
      margin-left: 10px;
      font-size: 0.9rem;
      font-weight: bold;
      color: green;
    }
  </style>