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 Nhấp đúp khung code sao chép vào khay nhớ tạm (Double Click to Copy Pre Content to Clipboard) sẽ giúp khách truy cập của bạn dễ dàng sao chép các mã cú pháp.Trong bài viết này, chúng ta sẽ thêm Double Click để sao chép nội dung trong khung code trước vào khay nhớ tạm sau đó bạn có thể dán code đó vào bất cứ nơi nào bạn muốn lưu giữ nó.
Điều này sẽ giúp khách truy cập của bạn sao chép <pre> nội dung code chia sẻ thuận tiện ngay cả khi blogspot chống chuột phải. Họ chỉ cần nhấp đúp vào khung cú pháp để sao chép nội dung và blog tự động lưu code vào khay nhớ tạm, họ không cần phải bôi đen chọn mã và chuột phải và sao chép nữa.
Làm cách nào thêm nhấp đúp khung code sao chép vào khay nhớ tạm?
Thêm Double Click để sao chép nội dung trước vào khay nhớ tạm sẽ không yêu cầu nhiều kiến thức về HTML, CSS hoặc JS vì ở đây đã 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/blogspot của bạn.
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ã ]]> và dán các Mã CSS sau vào ngay bên trên nó.
.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:'Nhấp đúp để sao chép | 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ẻ . 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>
Bước 7: Bây giờ hãy thêm các Mã Javascript sau đây ngay bên trên thẻ
<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>
Lưu ý: Class: darkMode đối với mỗi mẫu blogger có thể sẽ khác nhau nên bạn cần tùy chỉnh cho phù hợp.
Bước 8: Cuối cùng, Lưu các thay đổi.
Cách sử dụng
Viết theo cú pháp:
<pre> Code của bạn ở đây </pre>
Leave a comment