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 viết: Tạo khung chứa nội dung đẹp được viết bởi admin trang Giaodien.blog
Vui lòng để lại nguồn nếu bạn chia sẻ lại bài viết này.
Để lại nguồn có nghĩa là bạn tôn trọng tác giả.
Động lực để mình chia sẻ nhiều bài viết hay.