[Pussy]

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>

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

 

[Wall-E]

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>

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

<script type='text/javascript'>jQuery(function($) {var copyCommandSupported = document.queryCommandSupported(&#39;copy&#39;);$(&#39;.copyButton&#39;).click(function() {
var preElement = $(&#39;pre.code&#39;)[0];
copyToClipboard(preElement, showSuccessMsg);
});
function showSuccessMsg() {
$(&#39;#successMsg&#39;).finish().fadeIn(30).fadeOut(1000);
}
function copyToClipboard(element, successCallback) {
selectText(element);
var succeeded;
try {
succeeded = document.execCommand(&#39;copy&#39;);
} catch (e) {
succeeded = false;
}
if (succeeded &amp;&amp; typeof(successCallback) === &#39;function&#39;) {
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 &amp;&amp; /INPUT|TEXTAREA/i.test(element.tagName)) {
if (&#39;selectionStart&#39; 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ị.

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