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.

Gia Bảo

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
Gia Bảo