Thứ Tư, 7 tháng 9, 2022

[Blogger] SAO CHÉP TOÀN BỘ CODE TRONG KHUNG PRE VÀO BỘ NHỚ TẠM

Hi mọi người, hôm nay có thời gian tìm hiểu thủ thuật blogspot mình thấy có thủ thuật này cũng khá hay và tiện cho anh em chia sẽ code và thủ thuật internet.
Đó là sao chép nhanh toàn bộ code trong khung chứa code của mọi người chỉ cần một click đúp chuột chứ không phải mất công bôi đen rồi copy nữa nhé mọi người
Chúng ta bắt đầu nhé.

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ã ]]></b:skin> 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ẻ <body>. 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;.
<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ẻ </body>. 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[*/ 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>

Chúc các bạn thành công với thủ thuật này.

9 nhận xét:

ADM HUNGQB ™ nói...

Mọi người nhanh tay áp dụng cho blog của bản thân nhé. (y) rất tuyệt test demo ngay trên blog hungqb.com luôn nhé.

MOD HUNGQB ™ nói...

tiện ích hay đó e, cái này chia sẽ nhiều r`, a nhớ là nhấp đúp vào là nó bôi đen toàn bộ code trong khung luôn, đây nó có thông báo đã copy thành công để người dùng biết đc cũng hay :D

Hoàng Hải nói...

Nice, thấy trên blog e, viewsource hóa ra thiếu cái phần này : <div class='preCl' id='toastNotif'></div> nghĩ nó làm là phần thêm vào trong bài viết để thủ thuật đó đc hiển thị ai ngờ nó thêm mặc định vào thẻ body :D (y)

Thành Phong nói...

Haha, cũng hay nhưng k cần vì blog m toàn 18 có khi nào thêm code check gái k nhỉ :v

ADM HUNGQB ™ nói...

một thần clone code như a mà sơ suất vậy sao :v

ADM HUNGQB ™ nói...

thêm vào để viết bài chia sẽ code hack money 18+ đi bạn :v

ADM HUNGQB ™ nói...

Đã fix lỗi reply thành công <3

MOD HUNGQB ™ nói...

Hải êi, code C# vừa thôi, chuyển sang lập trình web, android, ios ê, sẽ phù hợp cho 1 hacker như ô đó, debug lỗi trên thiết bị điện thoại cũng có cái hay ho, và nhiều nhà phát triển đang hướng tới đó. thời đại công nghệ 4.0 r`, nó ưu tiên tính bảo mật và chuyên dùng hơn đó.

Unix Coders nói...

thủ thuật hay.