How to add Double Click to Copy Pre Content to Blogger

Hello! Welcome to Fineshop Blog.

If you post coding related articles on your blog, you may have used Syntax Highlighter to provide codes to your visitors. If you want to make it easy for your visitors to copy its contents to clipboard, so you must read this article.

In this article, we are going to add Double Click to Copy Pre Content to any Blogger Website. This will help your visitors to copy <pre> tag contents. They can simply double click on the Syntax Highlighter to copy its contents to clipboard, they no longer need to select the codes and copy.

How to add Double Click to Copy Pre Content?

Adding Double Click to Copy Pre Content to Blogger Website will not require much knowledge about HTML, CSS or JS because I have already designed it for you. What you need to do is to implement the codes at right place in your Blogger Theme XML.

Important!Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

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.

If your template has a dark mode feature, and if you want a different color when in dark mode, you can customise the codes as per your need. Each template can have a different dark mode class, so please adjust it, you can replace the marked class with your template dark mode class.

/* Toast Notification by Fineshop */
.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)}

You can add the following CSS just below to above CSS if you are using Latest Version of Median UI, Fletro Pro or iMagz Template.

.pre:not(.tb):hover::before{content:'Double click to copy | </>'}
.pre:not(.tb).html:hover::before{content:'Double click to copy | .html'}
.pre:not(.tb).css:hover::before{content:'Double click to copy | .css'}
.pre:not(.tb).js:hover::before{content:'Double click to copy | .js'}

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

<!--[ Toast Notification by Fineshop ]-->
<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 </body>.

<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: Lastly, Save the changes by clicking on this icon

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>

The Marked Class Name can be replaced with html, css or js as per your codes.

That's done! Now your visitors can double click on it to copy <pre> tag contents.

Alternative Usage

You can use Toast Notification to Notify your visitors with JavaScript. An Example is given below to notify.

<button onclick='myFunction()'>Click me</button>

<div id='toastNotif' class='tNtf'></div>

<script>
  function myFunction() {
    document.getElementById('toastNotif').innerHTML = '<span>Notification Here</span>';
  }
</script>

Don't add <div id='toastNotif' class='tNtf'></div> as we already have added it below <body> tag.

Demo

Want to see it working?
Let's have a look at it!

View Demo

Terms of Use

If you want to use this Copy Pre Content on your website, please don't remove the attributes from the codes, it will not be visible on your website.

If you want to rewrite an article on this Copy Pre Content by using these codes, you must add a Reference with visible and clickable link redirecting to our website: https://www.fineshopdesign.com. If you rewrite without Reference, Legal Actions will be taken.

Conclusion

This is all about adding the Copy Pre Content to Blogger Website. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box. Thank you!