Mọi ý kiến đóng góp, xin liên hệ với tôi! Contact

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

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, việc thêm Double Click để Copy Pre Content sẽ giúp khách truy cập của bạn dễ dàng s

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ờ hãy tìm kiếm mã ]]></b:skin> và dán các Mã CSS sau ngay bên 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

Getting Info...

Về tác giả

Mỗi khi có ý định từ bỏ hãy nghĩ đến lý do mà bạn bắt đầu.

Đăng nhận xét

Vui lòng không chia sẻ bất kỳ chi tiết nhạy cảm hoặc cá nhân nào ở đây.
Cookie Consent
Trang web của chúng tôi sử dụng cookie để nâng cao trải nghiệm của bạn.
Thêm chi tiết
Oops!
Có vẻ như đã xảy ra sự cố với kết nối Internet của bạn. Vui lòng kết nối với internet và bắt đầu duyệt lại.
AdBlock Detected!
Chúng tôi đã phát hiện ra rằng bạn đang sử dụng plugin chặn quảng cáo trong trình duyệt của mình.
Doanh thu mà chúng tôi kiếm được từ quảng cáo được sử dụng để quản lý trang web này, chúng tôi yêu cầu bạn đưa trang web của chúng tôi vào danh sách trắng trong plugin chặn quảng cáo của bạn.
Site is Blocked
Sorry! This site is not available in your country.