Hướng dẫn tạo khung chứa code đơn giản cho blogger

Xin chào các bạn hôm nay trong mục bài viết thủ thuật blogger tôi xin hướng dẫn các bạn cách tạo khung chứa code đơn giản chạy nhẹ sữ dụng sẵn cấu trúc mặc định blogger.

Khung chứa code đơn giản cho blogger sử dụng CSS

Vui lòng làm theo các bước như mình hướng dẫn bên dưới nhé

.post blockquote {
    font-size: 15px;
    border-radius: 5px;
    margin: 10px 0!important;
    overflow: auto !important;
    text-align: left !important;
    max-height: 250px !important;
    background: #f1f1f1!important;
    background-repeat: no-repeat !important;
    color: #555 !important;
    }

Bước 3: Để người dùng có thể copy toàn bộ code khi Double Click vào khung chứa code bạn thêm đoạn code bên dưới vào trước thẻ đóng </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 4: Nhấn save và kiểm tra trên bài viết của bạn nhé.

Chú ý: Đây là cách đơn giản 2 in 1 vì sao vì bạn có thể tùy chọn copy từng code riêng lẽ cũng như là toàn bộ code trong khung chứa code. Nếu như bạn chỉ chọn chức năng copy toàn bộ code bạn có thể thêm 1 dòng CSS nhỏ này vào nhé

.post blockquote {
    font-size: 15px;
    border-radius: 5px;
    margin: 10px 0!important;
    overflow: auto !important;
    text-align: left !important;
    max-height: 250px !important;
    background: #f1f1f1!important;
    background-repeat: no-repeat !important;
    color: #555 !important; user-select:all    }

Với cách làm này thì bạn không cần phải sử dụng tính năng javascript nữa nhé. Chúc các bạn thành công!