How to add copy to clipboard button on blogger

Views

 

How to add copy to clipboard button on blogger

In this article, I will show you how you can create a copy to the clipboard button using HTML, CSS & Javascript and add it to your Blogger.

So, the copy to clipboard button helps you copy a whole paragraph using a single click and it gives users a better experience on the website.

So, if you are providing any type of script or quotes on your website then this tutorial will be super helpful to you.

Users can copy the text in the clipboard with a click of a button.

So, if you are a visual learner then you can watch this video and all the codes required for this will be provided down below.

To create the copy to the clipboard button, you need to first add the element in your post editor and then switch to HTML view and add an "Id" that we defined in the Javascript below.

Then you have to add the button code below the element with the button Id and paste the Js code after it.

So, if you are using a single button on a page then you just need to add the id in the HTML element only (like Blockquote, code box) and place the CSS and Js code after it.

<blockquote id="myInput">Looking for some already great color combinations? Our color chart features flat design colors, Google's Material design scheme and the classic web safe color palette, all with Hex color codes.

</blockquote>

<button class="k2-copy-button" id="k2button"><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>

.k2-copy-button svg{margin-right: 10px;vertical-align: top;}  

.k2-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;}

.k2-copy-button:hover{background: #2ECC71;}

@media (max-width: 480px) {#k2button{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");

  k2button.innerText = "Text copied";

    textArea.remove();

}

document.getElementById('k2button').addEventListener('click', copyFunction);

  </script>

 

So, you can see the preview here. Just click on the above button and the codes in the code box will be copied to your clipboard with a single click.

I hope you have already implemented this on the Blogger website.