How to Add Copy to Clipboard Button in Blogger

 

Hi to all in this article, I am going to tell you all about how to add copy to clipboard button in blogger and WordPress websites in just few minutes.

Read the below steps carefully and completely, here I have provided steps for both blogger websites and WordPress websites.

How to Add Copy to Clipboard Button in Blogger

---

Steps to Add Copy to Clipboard Button in Blogger

---

Step-1: First of all login to your blogger dashboard by using your login. credentials.

Step-2: Click on New Post -> HTML View.

Step-3: Copy the below given code.

<blockquote id="myInput">How to add copy to clipbard button in blogger website easily in just few minites and this is one of the best and stylish button with a good interface. </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

Step-4: Now paste the copied code in the post.

Step-5: Here you need to change the text in between blockquotes and you can change the color of copy button as per your website color by changing color code in CSS code.

Step-6: After adding the text or code, you need to add title and other information in the post.

Step-7: Now click on Publish button.

Step-8: You have successfully added copy to clipboard button in your blogger website.

Conclusion:

---

I hope you have understood how to add copy to clipboard button in your blogger website easily in just few minutes.