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

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

/* 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é.