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
- 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 press CTRL+F and find <body>
<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>Last Words
Hope this article How to add Double click to copy code in Blogger will be helpful to you. If you have any doubts related to this article ask me in the comment. Thanks for visiting!