Chào các bạn đã ghé thăm blog NamIT. Hôm nay mình sẽ giới thiệu đến các bạn Khung chứa code lần này không đơn thuần chỉ là một background và một border đơn giản nhạt nhòa nữa, mà nó rất nhiều màu sắc, phân chia ra từng cụm từ khóa trong đó, trông rất đẹp và chuyên nghiệp.

TẠO KHUNG CHỨA CODE TUYỆT ĐẸP CHO BLOGSPOT

CÁCH THỰC HIỆN:
Bước 1: Ta Chèn code phía dưới vào trước thẻ ]]></b:skin> nhé

.post blockquote{margin:10px 0;text-align:left!important;padding:50px 10px 10px 15px;transition:.3s;font:400 17px Monospace;color:#888;max-height:400px;overflow:hidden;line-height:1.5;position:relative;background:#f4f4f4;border:2px solid #ddd;overflow:auto}
.post blockquote:before{content:'\f121  CODE';font-family:"Font Awesome 5 Free",Roboto Condensed;font-weight:700;position:absolute;font-size:1em;left:0;top:0;margin:0;display:block;width:100%;background:#ddd;padding:10px;box-sizing:border-box;    -webkit-transition: .3s;}
.post blockquote::-webkit-scrollbar{width:8px}
.post blockquote::-webkit-scrollbar-thumb{background:#ddd}
.post blockquote:-webkit-scrollbar-thumb:window-inactive{background:#ddd}
.post blockquote::-moz-scrollbar{width:8px}
.post blockquote::-moz-scrollbar-track{background:#eee}
.post blockquote::-moz-scrollbar-thumb{background:#ddd}
.post blockquote::-o-scrollbar{width:8px}
.post blockquote::-o-scrollbar-track{background:#eee}
.post blockquote::-o-scrollbar-thumb{background:#ddd}
.post blockquote:after{content:'Cick Double Để Copy Code';padding:2px 5px;width:auto;height:auto;font-family:"Font Awesome 5 Free",Roboto Condensed;position:absolute;right:8px;top:8px;color:#595b8a;font-weight:700;background-color:none;transition:all 0.3s ease-in-out;font-size:1em}
.post blockquote:hover::after{opacity:0;top:-8px;visibility:visible}
code{display: inline-block; position: relative; color: #6aafa3; margin: 0 5px; padding: 0 10px; transition: all .3s; border: 1px solid; border-radius: 4px; font: 400 18px Monospace;}

Bước 2: ta thêm đoạn js vào trước thẻ </body>

<script type='text/javascript'>
//<![CDATA[
for(var pres=document.getElementsByTagName("blockquote"),i=0;i<pres.length;i++)pres[i].addEventListener("dblclick",function(){var a=getSelection(),b=document.createRange();b.selectNodeContents(this);a.removeAllRanges();a.addRange(b)},!1);
//]]>
</script>

Bước 3: Hướng dẫn sử dụng
Các bạn đặt code cần làm nổi bật vào giữa thẻ <blockquote> như này:

<blockquote class='code code-html'><label>HTML</label><code>Để Code HTML ở đây</code></blockquote>
<blockquote class='code code-css'><label>CSS</label><code>Để Code CSS ở đây</code></blockquote>
<blockquote class='code code-javascript'><label>JS</label><code>Để Code JavaScript ở đây...</code></blockquote>
<blockquote class='code code-jquery'><label>Jquery</label><code>Để Code jQuery ở đây</code></blockquote>

Bước 4: Kết luận
Các bạn thực hiện đầy đủ các bước trên save lại và thử trải nghiệm nhé