🔥🔥 HOT! 🔥🔥 Template siêu VIP #500K

Tạo khung chứa nội dung đẹp

Zalo 0971539681 Tư vấn & Hỗ trợ

Hướng dẫn cá bạn tạo khung chứ nội dung, chứa code đẹp có nút copy dùng thư viện clipboard. Cách tạo khung chứ nội dung hoặc chứa code đơn giản đẹp như sau như hiện tại của mình đang dùng.


Copy toàn bộ code dưới dán trước thẻ đóng </body> và lưu lại


<b:if cond='data:view.isSingleItem'>    
<script async='async' src='//cdnjs.cloudflare.com/ajax/libs/clipboard.js/1.7.1/clipboard.min.js' type='text/javascript'/>
<style>
/*<![CDATA[*/
.codeToClipboardHeader{background-color:#343541;border:1px solid #e0e0e0;border-bottom:0;text-align:right;padding:3px;border-top-left-radius:9px;border-top-right-radius:9px}
.copyTextButton{color:#fff!important;font-size:15px;padding:4px 10px;text-decoration:none}
.copyTextButton:before{margin:0 5px 0 0;font-size:16px;content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBvcGFjaXR5PSIxIiBmaWxsPSIjZmZmZmZmIiBkPSJNMzg0IDMzNkgxOTJjLTguOCAwLTE2LTcuMi0xNi0xNlY2NGMwLTguOCA3LjItMTYgMTYtMTZsMTQwLjEgMEw0MDAgMTE1LjlWMzIwYzAgOC44LTcuMiAxNi0xNiAxNnpNMTkyIDM4NEgzODRjMzUuMyAwIDY0LTI4LjcgNjQtNjRWMTE1LjljMC0xMi43LTUuMS0yNC45LTE0LjEtMzMuOUwzNjYuMSAxNC4xYy05LTktMjEuMi0xNC4xLTMzLjktMTQuMUgxOTJjLTM1LjMgMC02NCAyOC43LTY0IDY0VjMyMGMwIDM1LjMgMjguNyA2NCA2NCA2NHpNNjQgMTI4Yy0zNS4zIDAtNjQgMjguNy02NCA2NFY0NDhjMCAzNS4zIDI4LjcgNjQgNjQgNjRIMjU2YzM1LjMgMCA2NC0yOC43IDY0LTY0VjQxNkgyNzJ2MzJjMCA4LjgtNy4yIDE2LTE2IDE2SDY0Yy04LjggMC0xNi03LjItMTYtMTZWMTkyYzAtOC44IDcuMi0xNiAxNi0xNkg5NlYxMjhINjR6Ii8+PC9zdmc+)}
.copyTextButton.check-image-class:before{content:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMTYiIHdpZHRoPSIxNCIgdmlld0JveD0iMCAwIDQ0OCA1MTIiPjwhLS0hRm9udCBBd2Vzb21lIEZyZWUgNi41LjEgYnkgQGZvbnRhd2Vzb21lIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20gTGljZW5zZSAtIGh0dHBzOi8vZm9udGF3ZXNvbWUuY29tL2xpY2Vuc2UvZnJlZSBDb3B5cmlnaHQgMjAyNCBGb250aWNvbnMsIEluYy4tLT48cGF0aCBvcGFjaXR5PSIxIiBmaWxsPSIjZmZmZmZmIiBkPSJNNDM4LjYgMTA1LjRjMTIuNSAxMi41IDEyLjUgMzIuOCAwIDQ1LjNsLTI1NiAyNTZjLTEyLjUgMTIuNS0zMi44IDEyLjUtNDUuMyAwbC0xMjgtMTI4Yy0xMi41LTEyLjUtMTIuNS0zMi44IDAtNDUuM3MzMi44LTEyLjUgNDUuMyAwTDE2MCAzMzguNyAzOTMuNCAxMDUuNGMxMi41LTEyLjUgMzIuOC0xMi41IDQ1LjMgMHoiLz48L3N2Zz4=)}
pre.codeToClipboard{background:#000;max-height:500px;font-size:14px;color:#fff;overflow:auto;border:1px solid #d3d6db;margin:-2px 0 0 0;padding:16px;border-top:none;line-height:1.5em}
pre::-webkit-scrollbar{height:9px;width:9px}
pre::-webkit-scrollbar-track{box-shadow:inset 0 0 9px grey;border-radius:10px}
pre::-webkit-scrollbar-thumb{background-image:-webkit-linear-gradient( 0deg,#d61518 0%,#f1c71d 100%);border-radius:10px}
pre::-webkit-scrollbar-thumb:hover{background:#b30000}
/*]]>*/
</style>
<script>
  //<![CDATA[
  window.addEventListener("load", function() {
    $(function() {
      new Clipboard(".copyTextButton")
    });
    $('.copyTextButton').click(function() {
      var button = this;
      button.innerText = "Copied";
      button.classList.add('check-image-class');
      setTimeout(function() {
        button.innerText = "Copy";
        button.classList.remove('check-image-class');
      }, 2000);
    });
  });
  //]]>
</script> 
</b:if>  

Khi viết bài thì đặt nội dung trong code dưới

<div class="codeToClipboardHeader">
  <a class="copyTextButton" data-clipboard-target="#content1" href="javascript:void(0)" title="Copy">Copy</a>
</div>
<pre class="codeToClipboard" id="content1">
Nội dung của khung 1
</pre>

Nếu có nhiều khung thì sửa vị trí là content1 thành content2, cứ vậy nếu nhiều hơn thì 3, 4, ,5...

<div class="codeToClipboardHeader">
  <a class="copyTextButton" data-clipboard-target="#content2" href="javascript:void(0)" title="Copy">Copy</a>
</div>
<pre class="codeToClipboard" id="content2">
Nội dung của khung 2
</pre>

Lưu ý: Soạn nội dung trước xong hết mới qua HTML chèn các thẻ bên ngoài nội dung.

Bài liên quan ngẫu nhiên

Nhận xét

Contact Me on Zalo