Features request for Plus UI Update Request

How to add Double Click to Copy Pre Content to Blogger

If you post coding related articles on your Blog, adding Double Click to Copy Pre Content will help your visitors to easily copy the syntax codes.
Please wait 0 seconds...
Scroll Down and click on Go to Link for destination
Congrats! Link is Generated

If you post coding related articles, adding Double Click to Copy Pre Content will help your visitors to easily copy the syntax codes.

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.

Copy Pre Tag Content Blogger
© Fineshop Blog | Copy Syntax Codes

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 &lt;body&gt;.

<!--[ 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 &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: 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!

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!

© Copyright:
www.fineshopdesign.com

About the Author

Hey there! My name is Deo Kumar aka Dev, a professional Web Designer, Graphic Designer, UI / UX Designer as well as Content Creator from Bihar, India. I love to Code and create interesting things while playing with it.

Buy me a Coffee

Advertisements

5 comments

  1. Its working good, please how to opps no internet when viewrs offline
    1. Soon! Stay tuned with us.
    2. We have written an article on adding No Internet Connection Widget to Blogger or WordPress Website, check it at:
      https://blog.fineshopdesigns.xyz/2022/02/how-to-add-no-internet-connection.html
  2. like your blog no writing double click to copy in codebox
    1. If you are using the latest iMagz, Median UI or Fletro Pro template, add the following CSS to your Theme XML:
      .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'}
To avoid SPAM, all comments will be moderated before being displayed.
Don't share any personal or sensitive information.
Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.