How to add Double Click to Copy Code Box in Blogger Post?

Double Click to Copy Code Box

Hello guys! How are you? Hope you are all good. Today we will discuss about How to add Double click copy Code Box in Blogger Post. If you post coding related articles on your Blog, adding Double Click to Copy Content will help your visitors to easily copy the syntax codes.

In this article, we are going to add Double Click to Copy Content to any Blogger Post. 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 Code?

 Adding Double Click to Copy Content to Blogger Website will not require much knowledge about HTML, CSS or JavaScript 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.

How To Add Double Click To Copy Code In Blogger?

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 it ]]></b:skin>

 

 

/* Toast Notification by Amarbangla */

.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)} <!--[ Toast Notification by Fineshop ]-->
<div id='toastNotif' class='tNtf'></div><!--[ 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>

 

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

 

Conclusion

That's for all today. I hope you like this article. If you face any problem in this tutorial so feel free to comment us in comment section. 

 

 

 HTML Parser Tool Online