How to enable Double Click to Copy codes in Blogger

Hello! Welcome to Bytes Vibe. If you’re posting coding-related articles on blogger site than you need to enable Double Click to Copy codes in Blogger site. There are many blogger site owner who use Syntax Highlighter to make codes more beautiful. But we can make it easier for visitors to copy these codes to their clipboard with just double click.

In this article, Bytes Vibe will guide blogger owners on how to add a Double Click to Copy feature for <pre> tag contents in Blogger website. This simple feature allows blogger visitors to double-click on the Syntax Highlighter and automatically copy the code to their clipboard.

How to Add Double Click to Copy Pre Content in blogger?

How to Add Double Click to Copy Pre Content in blogger

Adding this feature to Blogger site doesn’t require much knowledge of HTML, CSS, or JavaScript. We’ve prepared the necessary codes.

Before enable Double Click to Copy codes in Blogger, I strongly recommend backing up blogger current theme. If anything goes wrong than can easily restore it easily later.

Follow these steps below to enable Double Click to Copy codes in Blogger:

Step 1: Blogger Theme Editor

Login to Blogger Dashboard. And from there go to theme section.
Click the arrow down icon next to the Customize button. And select Edit HTML to enter the theme’s HTML editor.

Step 2: Add the CSS Code

Search for ]]></b:skin> in the HTML editor and paste the following CSS code right above it:

/* Toast Notification by Fineshop */
.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)}Code language: CSS (css)

Step 3: Add the HTML Code

Next, add the following HTML code just below the <body> tag or <body> :

<!--[ Toast Notification by Fineshop ]-->
<div id='toastNotif' class='tNtf'></div>Code language: HTML, XML (xml)

Step 4: Add the JavaScript Code

Finally, add the following JavaScript code just above the </body> tag or </body> :

<b:if cond='data:view.isSingleItem'>
  <script>/*<![CDATA[*/ /* Pre Content Copy Script by Fineshop */ 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>Code language: HTML, XML (xml)

Step 5: Save Your Changes

Click on the save icon to save all the blogger theme modifications.

Writing Format of Syntax

Now if you want to use double click to copy code function in blogger posts than switch from compose mode to html view and paste the code below:

<pre><code>Your_Code_Here</code></pre>
Code language: HTML, XML (xml)

Now, blogger visitors can easily double-click on the <pre> tag content or any codes in blogger to copy it to their clipboard.

Alternative Usage

We can also use the Toast Notification to notify our blogger visitors using JavaScript. For example:

<button onclick='myFunction()'>Click me</button>

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

<script>
  function myFunction() {
    document.getElementById('toastNotif').innerHTML = '<span>Notification Here</span>';
  }
</script>
Code language: HTML, XML (xml)

Paste this into html view of blogger post like before and change the text to what you want from marked area. But remember not to add the <div id=’toastNotif’ class=’tNtf’></div> again since we already included it below the <body> tag.

So this is how we can add Double click to copy code function in blogger sites. This feature is a great way to improve user experience on blogger site. This helps readers who frequently need to copy code snippets. I hope this Bytes Vibe tutorial will help in your blogger journey.

Credit – https://www.fineshopdesign.com