How to Add a Copy to Clipboard button using HTML, CSS & JS on Blogger and WordPress

In this article I will show you How to Add a Copy to Clipboard button using HTML, CSS & JS.

Hello Bloggers.  How are you all? Do you have a tutorial or quote sharing website where users need to copy some text or code. But it's difficult because your website don't have a copy to clipboard button. Than this article is for you. Today in this article I will show you How you can create Copy to clipboard button and add on your Blogger or WordPress website.

How to Add a Copy to Clipboard button using HTML, CSS & JS on Blogger and WordPress

Copy to clipboard button allow you to copy whole paragraph by a single click. If your website has poems and codes that you share than this article will be super helpful to you. You can add this button and use to share any of the HTML elements like a paragraph, blockquote, div, code box, etc. You just need to add the script on your post and the JavaScript will do the job for you.

How to Add a copy to clipboard button in Blogger & Wordpress

Follow the steps below to add a Copy to clipboard button on your Blogger and WordPress website. It's very you don't have to do anything specified. Just copy the below script and start using it wherever you want. Read the guide below to use it on Blogger and WordPress website. Read the full article otherwise you may miss some important part. You can see the demo below also.

<blockquote id="myInput">Copy to clipboard  button for Blogger and WordPress website. Replace it with your text.
</blockquote>
<button class="zhs-copy-button" id="zhsbutton"><svg aria-hidden="true" height="1em" preserveaspectratio="xMidYMid meet" role="img" viewbox="0 0 24 24" width="1em" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg"><g fill="none"><path d="M13 6.75V2H8.75A2.25 2.25 0 0 0 6.5 4.25v13a2.25 2.25 0 0 0 2.25 2.25h9A2.25 2.25 0 0 0 20 17.25V9h-4.75A2.25 2.25 0 0 1 13 6.75z" fill="currentColor"><path d="M14.5 6.75V2.5l5 5h-4.25a.75.75 0 0 1-.75-.75z" fill="currentColor"><path d="M5.503 4.627A2.251 2.251 0 0 0 4 6.75v10.504a4.75 4.75 0 0 0 4.75 4.75h6.494c.98 0 1.813-.626 2.122-1.5H8.75a3.25 3.25 0 0 1-3.25-3.25l.003-12.627z" fill="currentColor"></path></path></path></g></svg>Copy</button>
<style>
.zhs-copy-button svg{margin-right: 10px;vertical-align: top;}  
.zhs-copy-button{
  height: 45px; width: 155px; color: #fff; background: #265df2; outline: none; border: none; border-radius: 8px; font-size: 17px; font-weight: 400; margin: 8px 0; cursor: pointer; transition: all 0.4s ease;}
.zhs-copy-button:hover{background: #2ECC71;}
@media (max-width: 480px) {#zhsbutton{width: 100%;}}
</style>
<script>
  function copyFunction() {
  const copyText = document.getElementById("myInput").textContent;
  const textArea = document.createElement('textarea');
  textArea.textContent = copyText;
  document.body.append(textArea);
  textArea.select();
  document.execCommand("copy");
  zhsbutton.innerText = "Text copied";
    textArea.remove();
}
document.getElementById('zhsbutton').addEventListener('click', copyFunction);
  </script>

How to add copy to clipboard button in Blogger

If you want to use Copy to Clipboard button on Blogger Website Than Follow the steps below.

Step 1: Create a new post and copy the code above. Now select Edit as HTML.

Step 2: Now paste the code where you want to show the Copy to Clipboard button. 

Step 3: Replace the text with your custom text. If you want to share  any JavaScript or HTML code than first go to Compose view and than replace with the text.

Step 4: If you want to use more than one Copy to Clipboard button than you have to change button id and element id. Otherwise it won't work. There are only 3 id and element change them perfectly.

How to add copy to clipboard button in WordPress

To add Copy to Clipboard button on WordPress Website just add new code block in post editor and paste the code above and replace your text. If you want to use more than one Copy to Clipboard button on one page than follow the steps like Blogger and change the Element  and id name. There's one thing due to security reason WordPress doesn't support svg icons. So If you are not using any plugins than svg icon won't be visible on your website.

Conclusion

I hope today's post was helpful to you. And you successfully created a Copy to Clipboard button on your website. If you face any problem while adding this code or if you have any question feel free to ask me on the section. 

Hi! Zakir Here. I am a Bangladeshi Blogger and content writer. I share Blogging related and WordPress tutorial on This website. I have shared lot's of SEO related content as well.

Post a Comment

Don't upload any spam link and words that harms others in the comment box. Please comment using your Google account or with name and urls. Use anonymous only If you are not signed in.
© ZHS ThemE. All rights reserved. Developed by Jago Desain