Home
Blogger

How to add double click to copy pre-code function in Blogger

Hello guys, welcome to Shiva Technic World, you might be putting long codes in your Blogger website and you might be thinking to make your website visitors make it easier to copy codes on your Blogger website, then this article is for you, in this article we are going to show you how to add double click to copy pre-code function in Blogger.

Double click to copy code pre code function helps your website visitors easier to copy codes, they can easily copy code by just double-clicking on the pre-code box, the visitors choose your website next time to find helpful codes and it will increase your website impression.

So without wasting more time let's check how to add a double click to copy the pre-code function in Blogger!

How to add double click to copy pre-code function in Blogger?

Important: We recommend you to take a backup of your template, by chance if any mistake has been done in HTML you can restore it later!

  • First, go to the Blogger dashboard
  • Then click on the Theme option
  • Then click on the drop-down icon near Customize option
  • Then click on the Edit HTML option
Then find ]]></b:skin> and paste this CSS just above it

/* 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)}

Note: If your template support dark mode then change darkMode class with your template dark mode class.

Note: If your template has this CSS, then no need to paste this CSS again.

If you using the latest version of Median UI, Fletro, iMagz blogger template then you can also paste this CSS just below recently pasted CSS for getting a Double click to copy code message when hovering under the code box 
.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'}
Then find <body> and paste this HTML code just below it 
<!--[ Toast Notification by Fineshop ]-->
<div id='toastNotif' class='tNtf'></div>

Note: If your template has this HTML code, then no need to paste this HTML code again.

Then find </body> and paste this Javascript's just above it 
<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>
Then save the HTML.

How does it work in posts and pages?

Use the below HTML codes in your posts and pages
<pre><code>Your_Code_Here</code></pre>
For the latest version Median UI, iMagz, Fletro Blogger template users. 
<div class='pre html notranslate'>
  <pre>Your_Code_Here</pre>
</div>
Paste your code on Your_Code_Here 

Conclusion

Hope this How to add double click to copy pre-code function in Blogger article will be useful to you, If you have any doubts related to this article ask me in the comment, Do share with your friends.

Thanks for visiting, Have a nice day!

Source:
www.fineshopdesign.com