Welcome to It Is Unique Official! In this post, I will guide you on how to add double-click to copy pre code in Blogger.
Adding a double-click-to-copy functionality to <pre> tags in your Blogger posts can greatly enhance user experience, especially for coding tutorials. This blog post will guide you step-by-step on how to implement it seamlessly.
What You Will Learn
How to add a Toast Notification system for feedback.
How to enable double-click-to-copy functionality for
<pre>code blocks.How to make your code snippets more interactive and user-friendly.
How to Add Double-Click to Copy Pre Code?
Important
Before making changes to your theme's XML code, it is highly recommended to create a backup of your current theme. This ensures that if any issues arise, you can easily restore the original version.
Step 1: Begin by logging into your Blogger Dashboard to access your blog settings and make necessary changes.
Step 2: In the Blogger Dashboard, navigate to and click on the "Theme" option to access your blog's theme settings.
Step 3: Click the downward arrow icon next to the "Customize" button to reveal additional theme options.
Step 4: Click on "Edit HTML," and you will be redirected to the HTML editing page where you can make changes to your theme's code.
Step 5: Now, search for the code ]]></b:skin> or /*]]>*/</style>, and paste the following CSS code just above it to apply the necessary styles.
/* Toast Notification By It Is Unique Official */ .tNtf span{position:fixed;left:24px;bottom:-70px;display:inline-flex;align-items:center;justify-content:center;margin-bottom:20px;z-index:99981;background:#323232;color:rgba(255,255,255,0.8);font-size:14px;font-family:inherit;border-radius:3px;padding:13px 24px;box-shadow:0 5px 35px rgba(149,157,165,0.3);opacity:0;transition:opacity 0.1s ease,bottom 0.1s ease;animation:slideinwards 2s ease forwards}@media (max-width:500px){.tNtf span{left:20px;right:20px;font-size:13px}}@keyframes slideinwards{0%{opacity:0;bottom:-70px}20%,50%,80%{opacity:1;bottom:0}100%{opacity:0;bottom:-70px;visibility:hidden}}.darkMode .tNtf span{box-shadow:0 10px 40px rgba(0,0,0,0.2)}
/* Pre Notification By It Is Unique Official */ .pre:not(.tb):hover::before{content:'Double click to copy | </>'}.pre:not(.tb).html:hover::before{content:'Double click to copy | .html'}.pre:not(.tb).css:hover::before{content:'Double click to copy | .css'}.pre:not(.tb).js:hover::before{content:'Double click to copy | .js'}.pre:not(.tb).python:hover::before{content:'Double click to copy | .py'}.pre:not(.tb).java:hover::before{content:'Double click to copy | .java'}.pre:not(.tb).php:hover::before{content:'Double click to copy | .php'}.pre:not(.tb).c:hover::before{content:'Double click to copy | .c'}.pre:not(.tb).cpp:hover::before{content:'Double click to copy | .cpp'}.pre:not(.tb).ruby:hover::before{content:'Double click to copy | .rb'}.pre:not(.tb).swift:hover::before{content:'Double click to copy | .swift'}.pre:not(.tb).kotlin:hover::before{content:'Double click to copy | .kt'}.pre:not(.tb).go:hover::before{content:'Double click to copy | .go'}.pre:not(.tb).r:hover::before{content:'Double click to copy | .r'}.pre:not(.tb).sql:hover::before{content:'Double click to copy | .sql'}.pre:not(.tb).bash:hover::before{content:'Double click to copy | .sh'}.pre:not(.tb).xml:hover::before{content:'Double click to copy | .xml'}.pre:not(.tb).json:hover::before{content:'Double click to copy | .json'}.pre:not(.tb).yaml:hover::before{content:'Double click to copy | .yaml'}.pre:not(.tb).perl:hover::before{content:'Double click to copy | .pl'}.pre:not(.tb).dart:hover::before{content:'Double click to copy | .dart'}.pre:not(.tb).typescript:hover::before{content:'Double click to copy | .ts'}Step 6: Copy the following code and paste it just above the </body> tag in your HTML file.
<script>/*<![CDATA[*/ /*! PreClickCopy | Description: Script for enabling double-click copy functionality for <pre> elements with a toast notification. | Author: It Is Unique Official | Website: https://www.itisuniqueofficial.com | Date: January 3, 2025 | License: MIT */
const preElements=document.getElementsByTagName("pre"),toastNotif=document.querySelector("#toastNotif"),showToast=e=>{toastNotif.innerHTML=`<span>${e}</span>`},copyToClipboard=e=>{navigator.clipboard.writeText(e).then(()=>showToast("Copied to clipboard!")).catch(t=>{showToast("Failed to copy!"),console.error("Clipboard error:",t)});};Array.from(preElements).forEach(e=>{e.addEventListener("dblclick",()=>{const t=e.textContent||e.innerText;copyToClipboard(t)})}); /*]]>*/</script>Step 7: Copy the following code and paste it just below the <body> tag in your HTML file.
<!--[ Toast Notification HTML By It Is Unique Official]-->
<div class='tNtf' id='toastNotif'></div>This container will display the notification messages when users double-click on the code.
Step 8: Save the changes by clicking on the save icon .
Step 9: You're all set! The changes have been successfully applied.
Typography for Write Double-Click to Copy Pre Code in HTML
When writing your posts, wrap your code snippets in <pre> tags. Optionally, you can add language-specific classes for better readability or styling:
<div class="pre css notranslate"><pre><code>Your_CSS_Code_Here</code></pre></div>
<div class="pre html notranslate"><pre><code>Your_HTML_Code_Here</code></pre></div>
<div class="pre js notranslate"><pre><code>Your_JavaScript_Code_Here</code></pre></div>This structure ensures proper formatting for CSS, HTML, and JavaScript code.
Conclusion
This tutorial provides a simple way to implement double-click-to-copy functionality in Blogger. By following these steps, you can make your coding tutorials more interactive and user-friendly. Let us know in the comments if you have any questions or suggestions!