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?
Do you want to add a double click to copy code?
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>
.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'}
<div id='toastNotif' class='tNtf'></div>
<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>
Last words
Source:
www.fineshopdesign.com