Khung chứa code đẹp - kèm nút Copy cực đỉnh tiện lợi dành cho các Blogger chia sẻ code.

Cách làm trên : https://share4s.net/publ/cach-lam-khung-code-co-nut-copy-kem-thong-bao-cuc-cool/4-1-0-7

Code Tạo Khung Chứa Code Copy
   
  
<style> .codeHeader{border:1px solid #e0e0e0;border-bottom:0;text-align:right;padding:2px} .copy-text{font-size:14px;cursor:pointer;color:#e6e6e6;padding:0 12px;border-left:1px solid #e0e0e0} .copy-text:hover{color:#707070} .the-text{float:left;padding:0 0 0 10px;color:#d6d6d6;font-weight:bold} pre.code{display:block;background-color:#565b63;max-height:210px;font-size:14px;text-align:left;overflow:overlay;border:1px solid #d3d6db;margin:auto;padding:16px;line-height:21px;white-space:normal;font-style:italic;-webkit-user-modify:read-write-plaintext-only} .clo{background-color:#506073;color:#ccc9c9} .css{background-color:#4c9e91;color:#9bd2c8} .css:hover{background-color:#597571;color:#fff} .java{background-color:#566a8a;color:#dcd288} .java:hover{background-color:#808fa9;color:#fff} .html{background-color:#8b7ca0;color:#ae9fff} .html:hover{background-color:#61596d;color:#fff} </style> 
<script src="https://share4s.net/js/khung-code-2.1.1jquery.min.js"></script> <script src="https://share4s.net/js/khung-code-clipboard.js"></script> <script> $(function(){ new Clipboard('.copy-text'); }); </script> 
<div class="codeHeader clo"><span class="the-text">
Code Tạo Khung Chứa Code 
</span><a class="copy-text" data-clipboard-target="#p1" href="javascript:void(0);"><i class="fa fa-files-o"></i> Copy</a> <pre class="code clo" id="p1">   
<!--<code>-->  
<!--<code>--> 
</pre></div> 

 
Code được chia sẻ : http://topthuthuattienich24h.blogspot.com/2017/10/tao-khung-chua-code-voi-nut-copy-to.html


<style>
pre.code {
color: black;
display: block;
background: #f1f5f9;
font-size: 13px;
max-height: 400px;
font-family: Helvetica,Arial,sans-serif;
font-size: 14px;
overflow: auto;
text-align: left;
border: 1px solid #d5d5d5;
line-height: 13px;
margin: 1em 0 !important;
padding: 3px 20px 3px 7px !important;
}
</style>  

<script type='text/javascript'>
function CopyToClipboard(containerid) {
if (document.selection) { 
var range = document.body.createTextRange();
range.moveToElementText(document.getElementById(containerid));
range.select().createTextRange();
document.execCommand("Copy");    
} else if (window.getSelection) {
var range = document.createRange();
range.selectNode(document.getElementById(containerid));
window.getSelection().addRange(range);
document.execCommand("Copy");
alert("Đã sao chép liên kết vào khay nhớ tạm!") 
}
}
</script>
<button id="button1" style="padding:7px 10px;font-size:14px;cursor:pointer;"onclick="CopyToClipboard('div1')">Copy to Clipboard</button>
<div id="div1" >
<pre class="code">
<!--NỘI DUNG TRONG KHUNG -->
dff
<!--NỘI DUNG TRONG KHUNG -->
</pre>
</div>  


Tham khảo thêm " Từ khóa : khung chứa code kèm nút copy " : 
  • https://www.voztheme.xyz/2021/04/tao-khung-chua-code-co-nut-copy-to-clipboard-cho-blogger.html 
  • https://mocgin.com/web-design/blogspot/tao-khung-chua-code-voi-nut-copy-to-clipboard-trong-blogspot.html
✨ Bài viết được thực hiện bởi Blogger Gia Bảo, Freelancer Marketing Online, có nhiệm vụ kết nối khách cần mua với nhà phân phối, công ty sản xuất. BLOG GIA BẢO không phải đơn vị trực tiếp bán hàng trên website mà chỉ là nơi giúp bên mua gặp gỡ bên bán.

✨ Nổi bật : Mô hình Freelancer Marketing Online Cùng Nhà Phân Phối / Công Ty Sản Xuất Triển Khai Kênh Bán Hàng Trực Tuyến Thông Qua Việc Mở Gian Hàng TMĐT : Xem thêm,....

Kem chống nắng Biore UV Aqua Rich Watery Essence/Gel SPF 50+/ PA++++ 50ml/90ml

Xem Giá Bán
Xem thêm : Chăm Sóc Cơ Thể
Mua ngay

Bộ bàn ăn gỗ cao su gấp gọn

Xem Giá Bán
Tìm hiểu thêm về : Gỗ ghép
Đặt Mua ngay