How To Create A Copy Button For The Commands in Your WordPress Blog | Linux Ubuntu20 | Urdu-Hindi
I'm delighted by my new learning, because I'm learning and whenever I encountered a resource to get everything by dragging mouse or highlighting, it felt tiresome job. So, I searched enough to find something for myself to use in my contents for my audience is shared here.

To watch the video exercise for this task, Click here!

اس بلاگ کی عملی مشق کی وڈیو دیکھنے کے لئے اوپر دیئے گئے لنک پر کلک کریں

نمونہ باکس کاپی بٹن کے ساتھ ~^~  Sample Box with Copy Button

Using following Code you can add a box like this one! Command Copied

Copy the following code and enjoy blogging.

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

<!-- In the Previous line Remove the Space between & and #x2398 --> 
    <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>
 
Command Copied

Please do show your support to boost positive energies.
Comment and Share the post and videos.

Thank you.

اپنی مخلصانہ رائے کا اظہار ضرور کریں،
اور پوسٹ اور وڈیو کو شیئر کریں۔
شکریہ

Scroll to Top