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.
Warning!
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.
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>
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 Freemiumtech */
.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.
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.
Thank you.
Reference: Fineshop Design