Tạo Khung Chứa Code Đẹp Cho Blogger - Blogspot

Đối với các Blogger thuộc Công nghệ thì việc share các đoạn code là chuyện ngày thường phải làm. Nhưng khi chèn vào bài viết thì sao. Ta có thể đóng khung nó lại, hoặc để chú thích, trích dẫn nhưng như vậy sẽ làm Blog không khoa học. Hôm nay Sáng Blog sẽ hướng dẫn các bạn tạo khung chứa code cực ngầu, rất đẹp cho blogger - blospot. 

Mục lục:

• Mục Đích
• Thực Hiện
• Nâng Cao 

Mục Đích

               Tạo tính khoa học, chuyên nghiệp cho Blog, hơn thế nữa giúp cho người đọc, biết đâu là code, đâu là câu viết bình thường.
               Khung code rất ngầu, tạo sự thích thú cho người đọc, làm tăng lượt view cho Blog, giúp cho việc phát triển Blog hơn.

Thực Hiện

Khung code có hai mẫu là đen và trắng nên các bạn chọn cho phù hợp với blog của mình

A.Mẫu Trắng 

1. Các bạn vào Blogger ---> Mẫu---> Chỉnh sửa HTML, sau đó các bạn chép lại đoạn css sau vào trước thẻ ]]></b:skin> hoặc </style>. 

CSS/* CSS Simple Pre Code */
 pre{background:#fff;white-space:pre;word-wrap:break-word;overflow:auto}
pre.code{margin:20px 25px;border:1px solid #d9d9d9;border-radius:2px;position:relative;box-shadow:0 1px 1px rgba(0,0,0,.08)}
pre.code label{font-family:sans-serif;font-weight:normal;font-size:13px;color:#444;position:absolute;left:1px;top:16px;text-align:center;width:60px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none}
pre.code code{font-family:"Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;display:block;margin:0 0 0 60px;padding:15px 16px 14px;border-left:1px solid #d9d9d9;overflow-x:auto;font-size:13px;line-height:19px;color:#444}
pre::after{content:"double click to selection";padding:0;width:auto;height:auto;position:absolute;right:18px;top:14px;font-size:12px;color:#aaa;line-height:20px;overflow:hidden;-webkit-backface-visibility:hidden;transition:all 0.3s ease}
pre:hover::after{opacity:0;visibility:visible}
pre.code-css code{color:#0288d1}
pre.code-html code{color:#558b2f}
pre.code-javascript code{color:#f57c00}
pre.code-jquery code{color:#78909c}

2. Sau đó các bạn chép đoạn Javascript sau rồi dán vào trước thẻ </body>

JS<script type='text/javascript'>
//<![CDATA[
//Pre Auto Selection
$('i[rel="pre"]').replaceWith(function() {
    return $('<pre><code>' + $(this).html() + '</code></pre>');
});
var pres = document.querySelectorAll('pre,kbd,blockquote');
for (var i = 0; i < pres.length; i++) {
  pres[i].addEventListener("dblclick", function () {
    var selection = getSelection();
    var range = document.createRange();
    range.selectNodeContents(this);
    selection.removeAllRanges();
    selection.addRange(range);
  }, false);
}
//]]>
</script>

3. Các bạn Save Template (Lưu Mẫu) lại.
4. Để dùng thì các bạn dùng đoạn code html sau khi viết bài viết(chuyển sang chế dộ html rồi chép vào)

HTML<pre class='code code-html'><label>HTML</label><code>... Để Code HTML ở đây ...</code></pre>


<pre class='code code-css'><label>CSS</label><code>... Để Code CSS ở đây...</code></pre>


<pre class='code code-javascript'><label>JS</label><code>... Để Code JavaScript ở đây...</code></pre>


<pre class='code code-jquery'><label>Jquery</label><code>... Để Code jQuery ở đây...</code></pre>

Chú ý: Có thể bỏ dấu ba chấm '...', mình để cho đẹp thôi  

Demo
CLICK TO VIEW

B. Mẫu đen

1. Các bạn làm y như mẫu trắng, thay vào đó các bạn thay đoạn css của trắng bằng đen sau:

CSS/* CSS Simple Pre Code */
pre{background:#333;white-space:pre;word-wrap:break-word;overflow:auto}
pre.code{margin:20px 25px;border-radius:4px;border:1px solid #292929;position:relative}
pre.code label{font-family:sans-serif;font-weight:bold;font-size:13px;color:#ddd;position:absolute;left:1px;top:15px;text-align:center;width:60px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;pointer-events:none}
pre.code code{font-family:"Inconsolata","Monaco","Consolas","Andale Mono","Bitstream Vera Sans Mono","Courier New",Courier,monospace;display:block;margin:0 0 0 60px;padding:15px 16px 14px;border-left:1px solid #555;overflow-x:auto;font-size:13px;line-height:19px;color:#ddd}
pre::after{content:"double click to selection";padding:0;width:auto;height:auto;position:absolute;right:18px;top:14px;font-size:12px;color:#ddd;line-height:20px;overflow:hidden;-webkit-backface-visibility:hidden;transition:all 0.3s ease}
pre:hover::after{opacity:0;visibility:visible}
pre.code-css code{color:#91a7ff}
pre.code-html code{color:#aed581}
pre.code-javascript code{color:#ffa726}
pre.code-jquery code{color:#4dd0e1}

Demo
CLICK TO VIEW

Nâng Cao 

Để thay đổi màu chữ cho từng dạng code thì

- Các bạn tìm đoạn CSS sau trên mẫu mà bạn chọn.
 pre.code-css code{color:#91a7ff}

pre.code-html code{color:#aed581}
pre.code-javascript code{color:#ffa726}
pre.code-jquery code{color:#4dd0e1}

Sau đó các bạn thay đổi mã màu ở color thành màu bạn muốn.