Hôm nay thì mình sẽ chia sẻ cho các bạn một khung chứa code đẹp cho blogspot nhé. Cái này không có gì để nói nhiều nên mình xin phép bắt đầu luôn.

Các bạn thấy hình trên chứ ? Nó không có thanh cuộn dọc nhưng bù lại nó có thanh trượt ngang ở dưới chân style thanh trượt google

Đầu tiên các bạn dán đoạn code sau trên thẻ </head>


<style>

pre{-webkit-user-select:text;-khtml-user-select:text;border-radius: 20px;-moz-user-select:text;-ms-user-select:text;user-select:text;padding:0;margin:.5em auto;white-space:pre;word-wrap:break-word;overflow:auto;background-color:#2c323c;position:relative;padding-top:33px;width:100%;-moz-tab-size:2;-o-tab-size:2;tab-size:2;word-break:normal;-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;border-radius:3px} pre::-webkit-scrollbar,pre::-moz-scrollbar,pre code::-webkit-scrollbar,pre code::-moz-scrollbar,code::-webkit-scrollbar,code::-moz-scrollbar{display:none} pre::before{font-size:15px;font-family:'Open Sans';content:attr(title);position:absolute;top:0;padding:9px 0;left:0;right:0;color:#fff;display:block;margin:0;text-indent:15px} pre:after{display:inline-block;content:"\f121";font-family:fontAwesome;font-style:normal;font-weight:normal;font-size:18px;color:#fff;top:0;right:0;padding:9px 14px;position:absolute} pre code{display:block;background:none;border:none;color:#bec3ce;padding:25px 20px 20px 20px;font-family:'Source Code Pro',Menlo,Consolas,Monaco,monospace;font-size:.83rem;white-space:pre;overflow:auto} code .token.important{font-weight:bold} code .token.entity{cursor:help} pre mark,code mark,pre code mark{background-color:#3498db!important;color:#fff!important;padding:2px;margin:0 2px;border-radius:2px} pre::after{content:'Double click to selection';font-size:13px;padding:2px 5px;width:auto;height:auto;font-family:monospace;position:absolute;right:8px;top:8px;color:#FFFFFF;background-color:none;transition:all 0.3s ease-in-out} pre:hover::after{opacity:0;top:-8px;visibility:visible} pre[data-code='CSS']:before{background-color:#00a1d7} pre[data-code='HTML']:before{background-color:#3cc888} pre[data-code='JavaScript']:before{background-color:#75d6d0} pre[data-code='JQuery']:before{background-color:#e5b460}

</style>
Tiếp theo các bạn dán đoạn JS sau vào trước thẻ </body>

<script type='text/javascript'>

//<![CDATA[

for(var pres=document.getElementsByTagName("pre"),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>



Dán code thì để <pre class='tên ngôn ngữ'><code>...</code></pre> vậy là xong