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