How do I add a copy to the clipboard button in blogger ?

Welcome to everybody another blog post. Today we going to learn how to create a blogger copy to clipboard on blogsite. There are many of us who write blog posts and copy to clipboard it goes without saying how important if it shares another person through a blogger. So let's see how one blogger copy to clipboard can be created.

HTML Code:

      <blockquote id="myInput">Paste your all html code here. For example, 
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<h1>This is a Heading</h1>
<p>This is a paragraph.</p>

</body>
</html>
</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>

CSS Code:

        <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>

JavaScript Code:

        <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>

Last one thing ................ If you have any question or problem about this post or html, css, javascript code. Just a comment in comment section

【S】【u】【r】【j】【o】【l】【o】【q】

Categories