Nyumbani
Blogging and SEO

How to Enable Double Click to Copy Text on Your Website


As a Blogger , providing a user-friendly experience is key. One cool feature you can add is the ability to your users and reader to double-click on text or code to automatically copy it to the clipboard. 

This makes it easy for users to quickly copy the text or information like code snippets, promotional codes, or other text without the need to select it manually.

In this blog post, we will show you how to add a double-click to copy to your website using a simple JavaScript code. 

You don't need any advanced coding knowledge to write this code just a few lines of HTML, CSS, and JavaScript will do the trick!

Why Use Double Click to Copy?

Here are some reasons why enabling double-click copy can benefit your site:

Convenience: It simplifies the process of copying text for your users.

Efficiency: Especially useful for blogs sharing code snippets, promotional offers, or specific quotes.

User Engagement: It adds a unique and interactive element to your content, enhancing the overall user experience.

This trick will be more help to phone users it is very difficult for them to copy text to clipboard.

Here is the Code for double click to copy to the clipboard.

Step 1: First of all Login to your Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme.

Step 3: Click the arrow down icon  next to 'customize' button.

Step 4: Click Edit HTML, you will be redirected to editing page.

Step 5: Now search the code ]]></b:skin> and paste the following CSS Codes just above to it.

/* codes */
.tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;text-align:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px; box-shadow:0 5px 35px rgba(149,157,165,.3);opacity:0;transition:all .1s ease;animation:slideinwards 2s ease forwards;-webkit-animation:slideinwards 2s ease forwards}
@media screen and (max-width:500px){.tNtf span{margin-bottom:20px;left:20px;right:20px;font-size:13px}}
@keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
@-webkit-keyframes slideinwards{0%{opacity:0}20%{opacity:1;bottom:0}50%{opacity:1;bottom:0}80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}
.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,.2)}

Step 6: Paste the following HTML just below to <body> tag. If you don't find it, it is probably already parsed which is &lt;body&gt;.

 <!--[ Toast Notification by carlhubs ]-->
<div id='toastNotif' class='tNtf'></div>

Step 7: Now add the following Javascript Codes just above to </body> tag. If you don't find it, it is probably already parsed which is &lt;/body&gt;.

 <b:if cond='data:view.isSingleItem'>
  <script>/*<![CDATA[*/ /* Pre Content Copy Script by Fineshop */ for(var preClick=document.getElementsByTagName("pre"),i=0;i<preClick.length;i++)preClick[i].addEventListener("dblclick",function(){var e=getSelection(),o=document.createRange();o.selectNodeContents(this),e.removeAllRanges(),e.addRange(o),document.execCommand("copy"),e.removeAllRanges(),document.querySelector("#toastNotif").innerHTML="<span>Copied to clipboard!</span>"},!1); /*]]>*/</script>
</b:if>


Step 8: Save the changes 
Writing Format of Syntax:


<pre><code>Your_Code_Here</code></pre>

Writing Format of Syntax for Lastest Version of Median UI, Fletro Pro and iMagz Template:


    <div class='pre html notranslate'>
  <pre>Your_Code_Here</pre>
</div>
Done! Now your visitors can double click on it to copy <pre> tag contents.

Chapisha Maoni