how to create copy clipboard buttom

We'll go over how to make a copy to the clipboard button in this article. In many situations, when developing websites, we must provide users with the ability to click a button and copy specific data to the clipboard. We can create a copy button to copy data to the clipboard using the navigator. clipboard.writeText() function, whether it is a sample of code or the User's own data. The data passed as a parameter to this function is written to the clipboard. Any text can be copied to the clipboard using this method. First, we use document.getElementById() or another appropriate function to choose the text to copy to the clipboard, whether it is from a div or an input box. Next, we store

first change your display code in given link below 

Source Code Formatter for Blogger, Blogspot , Blog & Blogging, Format Formatting Tool

and copy code

then login to your blog choose new post 

place code that you had been copied in html view

and you will see like this

after that copy this given code below and paste to your display code bottom

 <blockquote id="myInput">  
 </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>  

 

copy this code paste to your blog

finally you will see result like this

Thanks