How to add Double click to copy code in Blogger

How to add Double click to copy code in Blogger

By Anonymous - February 06, 2022

Hello friends, Welcome to ᴅʀᴀᴄᴡᴏᴜɴᴅ ʜᴇʟᴘꜱ. Nowadays many websites become easier to copy codes before some time we want to select the whole code and copy codes but now we can copy code by just double-clicking. So in this post, we are going to discuss how to add double click to copy code in Blogger. So before wasting any time let's start.

So first of all lets give you some information about double click to copy code!

How does double click to copy code work?

When you double click on the code box it will show a popup text like shown in the screenshot

The double click to copy code is designed with CSS, HTML and javascript!

Do you want to add double click to copy code on your blogger website?

In my opinion, I will tell yes because it will make your website visitors easier to copy large codes and your website impression will also increase. The website visitors will choose your website to copy codes etc.

How to add double click to copy code in Blogger

Before doing this step please take a backup of your blogger template!

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 find <body> and paste this code below <body>

<div id='toastNotif' class='tNtf'></div>

Then find </body> and add this code above </body>

<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>

Then save.

Last words

Hope this post 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!

Comments