Learn Something New Everyday. WebCoderHub - HouSe oF coDers is all About blogging tutorials, Youtube Tricks, SEO Tricks, and Technical Tips & Tricks. In WebCoderHub we Provide HTML, CSS, and JS with Us Free to use. Best Free & Premium Blogger and WordPress Tutorials For You. Find a perfect template Tutorial with SEO Optimized and improve your blog right now. A Better Way To Learn.
If you post coding related articles on your Blog adding Double Click to Copy code Pre Content will help your visitors to easily copy the syntax codes.
In this article, we're visiting to add Double Click to Copy Pre Content to any Blogger Website. This may 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.
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:ifcond='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.
Writing Format of Syntax:
<divclass='pre html notranslate'><pre>Your_Code_Here</pre></div>
That's done! Now your visitors can double click on it to copy code.
Conclusion
This is all about adding the Double Click To Copy Code 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!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser. The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
