Thêm Double Click để sao chép nội dung trong Blogger
Xin chào! Chào mừng bạn đến với Blog ModMobile.
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.
 |
| © Fineshop Blog | Sao chép mã cú pháp |
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.
Làm cách nào để 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.
Quan trọng!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àoTrang 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 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 <body>.
<!--[ 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 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 </body>.
<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 htmlhoặc csstheo jsmã 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. Dưới đây là một ví dụ để 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ó vào bên dưới <body>thẻ.
Thử nghiệm
Bạn muốn xem nó hoạt động?
Chúng ta hãy nhìn vào nó!
Điều khoản sử dụng
Nếu bạn muốn sử dụng Bản sao nội dung trước này trên trang web của mình, vui lòng không xóa các thuộc tính khỏi mã, nó sẽ không hiển thị trên trang web của bạn.
Nếu bạn muốn viết lại một bài viết trên Copy Pre Content này bằng cách sử dụng các mã này, bạn phải thêm một Tham chiếu với liên kết hiển thị và có thể nhấp đượchttps://www.fineshopdesign.com chuyển hướng đến trang web của chúng tôi :. Nếu bạn viết lại mà không có Tham chiếu, Các Hành động Pháp lý sẽ được thực hiện.
Sự kết luận
Đây là tất cả về việc thêm Bản sao Nội dung trước vào Trang web Blogger. Tôi hy vọng bạn thích bài viết này. Xin vui lòng chia sẻ bài viết này. Và nếu bạn đang gặp vấn đề trong bất kỳ phần nào hoặc bạn có bất kỳ câu hỏi nào thì hãy hỏi chúng tôi trong hộp bình luận. Cảm ơn bạn!
Đăng nhận xét