Tạo khung trích dẫn đẹp cho Blogspot với CSS


Hello các bạn. Trong bài viết trước tôi có hướng dẫn các bạn cách tạo khung chứ code đơn giản . Trong bài viết hôm nay chúng ta cùng khám phá thêm một cách khác để tao khung chứa code cũng đơn giản nhưng kết quả cho ra là khá đẹp nhé
Tạo khung chứa code đẹp cho Blogger

Các bước thực hiện như sau

Bước 1: Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Copy toàn bộ đoạn code bên dưới dán vào trước thẻ ]]></b:skin>

/* CSS Simple Pre Code màu trắng*/ 
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; }

Bước 3:  Copy đoạn Javascript bên dưới dán vào trước thẻ đóng </body>

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

Bước 4: Bấm save để lưu lại 

Cách sử dụng khi viết bài chuyển sang chế độ soạn thảo HTML rồi paste code vào cú pháp như bên dưới.

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

Sử dụng giao diện màu đen thì sử dụng đoạn CSS bên dưới

/* CSS Simple Pre Code màu đen*/

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}

Và đây là kết quả sau khi làm xong

Hình ảnh sao khi chèn code hiển thị trên bài viết Blogger

Chúc các bạn thành công và đừng quên chia sẻ bài viết nhé.