If you post coding related articles on your Blog, adding Double Click to Copy Pre Content to Clipboard will make it easier for your visitors to copy the code frames to the clipboard. syntax code.
In this article, we will add Double Click to copy the content in the previous code frame to the clipboard then you can paste that code wherever you want to keep it.
This will help your visitors copy <pre> Convenient sharing of code content even when the blog is anti-right click. They just need to double-click on the syntax box to copy the content and the blog automatically saves the code to the clipboard, they no longer need to highlight the code, right-click and copy.
Step 1: First of all Log in to your Blogger dashboard.
Step 2: On the Blogger Dashboard, click Themes .
Step 3: Click the down arrow icon next to the 'customize' button.
Step 4: Click Edit HTML , you will be taken to the editing page.
Step 5: Now search for the code ]]></b:skin> and paste the following CSS Codes right above it.
Step 8: Finally, Save the changes.
In this article, we will add Double Click to copy the content in the previous code frame to the clipboard then you can paste that code wherever you want to keep it.
This will help your visitors copy <pre> Convenient sharing of code content even when the blog is anti-right click. They just need to double-click on the syntax box to copy the content and the blog automatically saves the code to the clipboard, they no longer need to highlight the code, right-click and copy.
How to add double click copied code frame to clipboard?
Adding Double Click to copy previous content to the clipboard will not require much knowledge of HTML, CSS or JS because it is already designed for you here. What you need to do is deploy the codes in the right place in your Blogger/blogspot theme XML.Step 1: First of all Log in to your Blogger dashboard.
Step 2: On the Blogger Dashboard, click Themes .
Step 3: Click the down arrow icon next to the 'customize' button.
Step 4: Click Edit HTML , you will be taken to the editing page.
Step 5: Now search for the code ]]></b:skin> and paste the following CSS Codes right above it.
.preCl 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){.preCl 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 .preCl span{box-shadow:0 10px 40px rgba(0,0,0,.2)}
pre{position:relative;display:block;background-image:linear-gradient(#f5fffa 50%,#edf5ed 50%);background-size:100% 3rem;background-position:0 1.5rem;background-origin:content-box;font-family:"Consolas","Courier New",Courier,Monospace;font-size:14px;color:var(--post-text-color);white-space:pre-wrap;line-height:1.7em;padding:28px 16px 16px;border:1px solid #ddd;border-radius:2px;overflow:auto}
.darkMode pre{background-image:linear-gradient(#191919 50%,#323232 50%);background-size:100% 3rem;background-position:0 1.5rem;background-origin:content-box;color:#eee}
.post pre:before{content:'</>';position:absolute;right:0;top:0;color:#656e77;font-size:11px;padding:0 10px;z-index:2;line-height:35px}
.post pre:hover::before{content:'Double click to copy | </>';position:absolute;right:0;top:0;color:#535a62;font-size:11px;padding:0 10px;z-index:2;line-height:35px}
.darkMode .post pre:before{color:#ccc}
Bước 6: Dán đoạn mã HTML sau vào ngay bên dưới thẻ <body>. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp <body>.
<div class='preCl' id='toastNotif'></div>Step 7: Now add the following Javascript Codes just above the tag </body>. If you don't find it, it may have already been parsed </body>.
<b:if cond='data:view.isSingleItem'>
<script>/*<![CDATA[*/ 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>
Note: Class: darkMode may be different for each blogger template, so you need to customize accordingly.
Step 8: Finally, Save the changes.
Using
Write according to syntax:<pre> Your code is here </pre>
Tags:
Blogger tricks