Gia Huy

Trang chủ
Blogger

Tạo Double Click để sao chép mã trên Blogger

Tạo Double Click để sao chép code
·

Nếu bạn đăng các bài viết liên quan đến mã hóa trên blog của mình, bạn có thể đã sử dụng Công cụ đánh dấu cú pháp để cung cấp mã cho khách truy cập của mình. Nếu bạn muốn giúp khách truy cập dễ dàng sao chép nội dung của nó vào khay nhớ tạm, thì bạn phải đọc bài viết này.

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

Trong bài viết này, chúng tôi sẽ thêm Double Click để sao chép nội dung trước vào bất kỳ trang web Blogger nào. Điều này sẽ giúp khách truy cập của bạn sao chép <pre> nội dung thẻ. Họ có thể chỉ cần nhấp đúp vào Công cụ đánh dấu cú pháp để sao chép nội dung của nó vào khay nhớ tạm, họ không cần phải chọn mã và sao chép nữa.

Cách thêm Double Click để sao chép nội dung trước

Thêm Double Click để sao chép nội dung trước vào trang web Blogger sẽ không yêu cầu nhiều kiến thức về HTML, CSS hoặc JS vì tôi đã thiết kế sẵn cho bạn. Những gì bạn cần làm là triển khai các mã ở đúng vị trí trong XML Chủ đề Blogger của bạn.

Chú ý
Trước khi chúng tôi bắt đầu thêm mã trong XML, tôi khuyên bạn nên tạo một Bản sao lưu của chủ đề hiện tại của bạn. Tình cờ nếu có bất kỳ sự cố nào xảy ra, bạn có thể khôi phục lại sau.

Bước 1: Trước hết Đăng nhập vào Trang tổng quan Blogger.

Bước 2: Trên bảng điều khiển Blogger, nhấp vào Chủ đề.

Bước 3: Nhấp vào biểu tượng mũi tên xuống bên cạnh nút 'TÙY CHỈNH'.

Bước 4: Nhấp vào Chỉnh sửa HTML, bạn sẽ được chuyển đến trang chỉnh sửa.

Bước 5: Bây giờ tìm kiếm mã ]]></b:skin> và dán các mã CSS sau ngay trên vào nó.

Nếu mẫu của bạn có tính năng chế độ tối và nếu bạn muốn có màu khác khi ở chế độ tối, bạn có thể tùy chỉnh các mã theo nhu cầu của mình. Mỗi mẫu có thể có một lớp chế độ tối khác nhau, vì vậy hãy điều chỉnh nó, bạn có thể thay thế lớp đã đánh dấu bằng lớp chế độ tối mẫu của mình.

/* 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)}

Bạn có thể thêm CSS sau ngay bên dưới vào CSS bên trên nếu bạn đang sử dụng Phiên bản mới nhất của Giao diện người dùng trung bình, Fletro Pro hoặc Mẫu iMagz.

.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 6: Dán đoạn mã HTML sau vào ngay bên dưới để <body>gắn thẻ. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp &lt;body&gt;.

<!--[ Toast Notification by Fineshop ]-->
<div id='toastNotif' class='tNtf'></div>

Bước 7: Bây giờ hãy thêm các Mã Javascript sau đây ngay bên trên để </body>gắn thẻ. Nếu bạn không tìm thấy nó, nó có thể đã được phân tích cú pháp &lt;/body&gt;.

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

Bước 8: Cuối cùng, Lưu các thay đổi bằng cách nhấp vào biểu tượng này

Định dạng viết cú pháp:

<pre><code>Your_Code_Here</code></pre>

Định dạng viết cú pháp cho phiên bản mới nhất của mẫu giao diện người dùng trung bình, Fletro Pro và iMagz:

<div class='pre html notranslate'>
  <pre>Your_Code_Here</pre>
</div>

Tên Lớp được Đánh dấu có thể được thay thế bằng html hoặc css theo js mã của bạn.

Đã xong! Bây giờ khách truy cập của bạn có thể nhấp đúp vào nó để sao chép <pre>nội dung thẻ.

Cách sử dụng thay thế

Bạn có thể sử dụng Toast Notification để Thông báo cho khách truy cập của mình bằng JavaScript. Một ví dụ được đưa ra dưới đây để thông báo.

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

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

<script>
  function myFunction() {
    document.getElementById('toastNotif').innerHTML = '<span>Notification Here</span>';
  }
</script>

Đừng thêm <div id='toastNotif' class='tNtf'></div>vì chúng tôi đã thêm nó bên dưới <body>thẻ.

Copyright © www.fineshopdesign.com

Tôi là Nhật Nguyễn, một kỹ sư xây dựng. Nhưng thích tìm hiểu về mã nguồn lập trình web ☏.