[Blogger] 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ó...

Đố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 Chia Sẻ Cho Ngày Mai 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.

Cách Thực Hiện :

1Truy cập Blogger > Mẫu > Chỉnh sửa HTML
2Sau đó thêm đoạn code sau trước thẻ  ]]></b:skin> hoặc </style>

 CSS Mẫu Trắng/* 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;
}

[DEMO Mẫu Trắng ##DEMO##]

 CSS Mẫu Đen/* 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 Mẫu Đen ##DEMO##]

3Sau đó 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>

4Sau đó lưu lại và bạn đã hoàn tất.

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>

Hướng Dẫn

Để 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)