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

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>  

<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>

<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>