Thêm Double Click để sao chép mã

Mục lục :
• Bước 1 - Thêm CSS
• Bước 2 - Thêm Javascript
• Bước 3 - Áp dụng vào bài viết

▶ Preview Click here

Để thêm Double Click sao chép mã bạn thực hiện theo hướng dẫn sau :

Bước 1 - Thêm CSS

Đăng nhập Trang Quản trị Blogger » Chủ đề » Tùy chỉnh » Chỉnh sửa HTML tìm đến thẻ đóng ]]></b:skin> và dán đoạn CSS sau đây vào trước nó.

/* Thêm Double Click để sao chép mã */
.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 | </>'}
.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'}

Bước 2 - Thêm Javascript

Copy đoạn Javascript bên dưới và Paste vào trước thẻ </body>.

<!--[ Thêm Double Click để sao chép mã ]-->
<div class='tNtf' id='toastNotif'/>  
    <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>
    <button onclick='myFunction()'>Click me</button>
<script>
  function myFunction() {
    document.getElementById(&#39;toastNotif&#39;).innerHTML = &#39;<span>Notification Here</span>&#39;;
  }
</script>

Bước 3 - Áp dụng vào bài viết

Tại bài viết bạn chuyển sang Chế độ HTML sau đó copy và dán đoạn code HTML dưới đây vào rồi lưu lại.

◈ Type I

<pre>
<code>noi_dung_code_o_day</code>
</pre>

◈ Type II

<div class='pre html/css/js notranslate'>
<pre>noi_dung_code_o_day</pre>
</div>

Chúc bạn thành công!