[New] How to add Double click to copy code in Blogger

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.

Hello friends, Welcome to our blog. Nowadays you might be seen websites use double click to copy code functions. You might be thinking about how to add a double click to copy code function on your Blogger website. So published an article for you to show you how to add double click to copy code in Blogger. So without wasting any time let's start. This will help your visitors to copy <pre> tag contents. They can simply double click on the Syntax Highlighter to copy its contents to the clipboard, they no longer need to select the codes and copy.

So, first of all, we like to give you some information about double click to copy code!

How does double click to copy code work?

It will work when visitors double click the code it will copy all codes in that code box and show a popup message like copied to the clipboard!. It was designed with CSS, HTML and Javascript.

Do you want to add a double click to copy code?

In my opinion, I will tell yes because it will help your website visitors to copy large codes in your website easier and website visitors will choose your website next time to take codes and also your website impression might be increased.

Before we start adding codes in blogger theme, I will recommend you to take a Backup of your current theme as a precaution. By chance if any problem occurs, you can restore it later and revert the changes.

How to add double click to copy code in Blogger

  • First, go to Blogger
  • Then click on the Theme option
  • Then you can see a down arrow near customize click on that
  • Then click on Edit HTML
  • Then press CTRL+F and find ]]></b:skin>
And copy this CSS and past above ]]></b:skin>
.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)}
.pre:not(.tb):hover::before{content:'Double click to Copy'}
Then search for <body> and paste this code above it
<div id='toastNotif' class='tNtf'></div>
Then search for </body> and paste this code above it
<b:if cond='data:view.isSingleItem'>
  <script>/*<![CDATA[*/ /* Pre Content Copy Script  */ 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>
Now save.

Last words

Hope this article [New] How to add Double click to copy code in Blogger will helpful to you. If you have any doubts related to this article ask me in the comment. Thanks for visiting!

Have a nice day!

Source:
www.fineshopdesign.com

Rate this article

Getting Info...

Post a Comment

Cookies Consent

This website uses cookies to ensure you get the best experience on our website.

Cookies Policy

We employ the use of cookies. By accessing Advanced Coder, you agreed to use cookies in agreement with the Advanced Coder's Privacy Policy.

Most interactive websites use cookies to let us retrieve the user’s details for each visit. Cookies are used by our website to enable the functionality of certain areas to make it easier for people visiting our website. Some of our affiliate/advertising partners may also use cookies.