I. CÁC BƯỚC TIẾN HÀNH Bước 1: Đăng nhập vào trang quản lý Blogger Bước 2: Chọn Mẫu ---> Tìm (Ctrl + F) thẻ ]]></b:skin>trong mẫu Bước 3: Kích đúp chuột để sao chép code dưới và dán vào trên thẻ ]]></b:skin> Mã: .post blockquote{margin:10px 0!important;border:2px solid #6aafa3!important;border-left:none!important;overflow:auto!important;text-align:left!important;max-height:250px!important;background:#fff url(http://4.bp.blogspot.com/-NHPNl46OnWs/WWxhyFxNE5I/AAAAAAAAAno/pP058D4foD4AOuxjNo_g-Dz9b3cp6skjwCK4BGAYYCw/s1600/Untitled.png)!important;background-repeat:no-repeat!important;padding:15px 20px 15px 35px!important;color:#000000!important;user-select:all} Bước 4: Lưu II. CÁCH THỨC SỬ DỤNG: Bước 1: Bôi đen đoạn code cần copy Bước 2: Chọn biểu tượng "Trích dẫn" trên thanh công cụ trong giao diện viết bài của blogger Chỉ đơn giản vậy thôi, chúc các bạn thành công!
Tạo khung chứa code độc đáo bằng CSS phần 2 Bước 1: Đăng nhập vào trang quản lý Blogger Bước 2: Chọn Mẫu ---> Tìm (Ctrl + F) thẻ ]]></b:skin>trong mẫu Bước 3: Kích đúp chuột để sao chép code dưới và dán vào trên thẻ ]]></b:skin> Mã: .codeHeader{background-color:#f5f5f5;color:#707070;border:1px solid #e0e0e0;text-align:left;margin-bottom:-15px;padding:2px}.copyButton{background:0;border:0;border-right:1px solid #e0e0e0;font-size:14px;cursor:pointer;outline:0}pre.code{color:black;display:block;background-color:#f5f5f5;max-height:400px;font-size:14px;overflow:auto;text-align:left;border:1px solid #e0e0e0;line-height:23px;padding:10px 20px} Bước 4: Tìm </head> và dán code dưới đây vào trước </head> Mã: <script type='text/javascript'>jQuery(function($) {var copyCommandSupported = document.queryCommandSupported('copy');$('.copyButton').click(function() { var preElement = $('pre.code')[0]; copyToClipboard(preElement, showSuccessMsg); }); function showSuccessMsg() { $('#successMsg').finish().fadeIn(30).fadeOut(1000); } function copyToClipboard(element, successCallback) { selectText(element); var succeeded; try { succeeded = document.execCommand('copy'); } catch (e) { succeeded = false; } if (succeeded && typeof(successCallback) === 'function') { successCallback(); } deselect(element); } function selectText(element) { if (/INPUT|TEXTAREA/i.test(element.tagName)) { element.focus(); if (element.setSelectionRange) { element.setSelectionRange(0, element.value.length); } else { element.select(); } return; } var rangeObj, selection; if (document.createRange) { rangeObj = document.createRange(); rangeObj.selectNodeContents(element); selection = window.getSelection(); selection.removeAllRanges(); selection.addRange(rangeObj); } else if (document.body.createTextRange) { rangeObj = document.body.createTextRange(); rangeObj.moveToElementText(element); rangeObj.select(); } } function deselect(element) { if (element && /INPUT|TEXTAREA/i.test(element.tagName)) { if ('selectionStart' in element) { element.selectionEnd = element.selectionStart; } element.blur(); } if (window.getSelection) { window.getSelection().removeAllRanges(); } else if (document.selection) { document.selection.empty(); } } }); </script> II. CÁCH THỨC SỬ DỤNG: Bước 1: Viết bài như bình thường. Bước 2: Nếu muốn đưa code vào trong khung chứa code thì làm các bước như sau: Chuyển qua khung viết bài bằng HTML Copy code dưới dán vào phần cần hiền thị khung chứa code---> thay từ "NỘI DUNG" bằng code cần hiển thị. Mã: <div class="codeHeader"><button class="copyButton" type="button"><i class="fa fa-files-o"></i> Copy</button><span id="successMsg" style="display: none;">Copied!</span></div><pre class="code">NỘI DUNG</pre> Lưu lại. Chỉ đơn giản vậy thôi, chúc các bạn thành công!