hướng dẫn tạo khung chứa code , 1 số khung chứa code đẹp cho blogger

Đa phần các tiện ích dùng cho Blog đều sử dụng các mã code đặc thù riêng của nó, các mã code này đa số đều phức tạp và dài dòng, do đó nếu bạn thường xuyên chia sẻ các mã code này trên blog thì bạn nên gom nó vào khung chứa code riêng cách biệt với chữ viết trong bài đăng để cho thao tác copy của khách tham quan được thuận tiện hơn và ít nhầm lẫn hơn.

☼ Cách tiến hành:

1- Đăng nhập (Login) vào Blog

2- Vào Mẫu (Template)

3- Chọn Chỉnh sửa HTML (Edit HTML)

4-Bên dưới có rất nhiều mẫu. Chèn đoạn code bạn chọn vào trước thẻ ]]></b:skin>

Mẫu 1

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
color:#FFF;
text-shadow: 0 -1px 1px #a52676;
border:none;
background:#de45a6;
background: -moz-linear-gradient(top, #e54aac, #f374c5 95%, #d3469f);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #e54aac), color-stop(.9, #f374c5), to(#d3469f));
filter:  progid:DXImageTransform.Microsoft.gradient(startColorStr='#d3469f', EndColorStr='#f374c5'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#d3469f', EndColorStr='#f374c5')"; /* IE8 only */
box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9;
-webkit-box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9;
-moz-box-shadow: inset 5px 5px 5px #9d2a6e, 0 1px 0px #fad1e9;
}

Mẫu 2

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
background: #E6E6E6;
background: -moz-linear-gradient(top, #FFF, #f5f5f5 5%, #e2e2e2 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFF), color-stop(.03, #f5f5f5), to(#e2e2e2));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#e2e2e2'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#f5f5f5', EndColorStr='#e2e2e2')"; /* IE8 only */
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border:1px solid #d0d0d0;
border-bottom:1px solid #b5b5b5;
color:#5e5e5e;
text-shadow: 1px 1px 1px #FFF}

Mẫu 3

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
color:#FFF;
text-shadow: 0 1px 1px #0f739d;
background: #40addb;
background: -moz-linear-gradient(top, #d1edfa, #73cef5 5%, #49acd6);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #d1edfa), color-stop(0.03, #73cef5), to(#49acd6));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#73cef5', EndColorStr='#49acd6'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#73cef5', EndColorStr='#49acd6')"; /* IE8 only */
border-bottom:1px solid #2581a8;}

Mẫu 4

.code {
border-radius:20px 0;
max-height:250px;
min-height:50px;
margin : 10px;
padding : 10px;
clear : both;
list-style-type : none;
overflow:auto;
color:#FFF;
text-shadow: 0 -1px 1px #0d3474;
border:none;
background: #3675da;
background: -moz-linear-gradient(top, #4986e8, #76b8fc 95%, #4986e8);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0, #4986e8), color-stop(.9, #76b8fc), to(#4986e8));
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4986e8', EndColorStr='#76b8fc'); /* IE6,IE7 only */
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorStr='#4986e8', EndColorStr='#76b8fc')"; /* IE8 only */
box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;
-webkit-box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;
-moz-box-shadow: inset 0px 2px 5px #1c4c7d, 0 1px 0px #c9d5e8;}

5- Sau khi chọn được mẫu ứng ý rồi các bạn lưu mẫu lại.

Cách sử dụng khi chèn code!

- Sau này mỗi lần trình bày code thì bạn check vào phần HTML của bài viết hoặc trang và sử dụng cấu trúc như dạng sau:

<div class="code"> Nội dung đoạn code </div>

2. Tạo khng chứa code bằng cách copy đoạn mã sau vào trang, bài viết mà bạn muốn tạo

lưu ý khi làm việc với mã html nó rối lắm nên dịnh làm ở đâu thì như mình đánh

dấu ở bài viết là !!!!! thì trong mã html nó cũng là những ký tự đó , rất dễ để mình

xác định đúng chỗ.

CSS <pre class="code code-css" style="background: rgb(253, 253, 253); border-radius: 2px; border: 1px solid rgb(217, 217, 217); box-shadow: rgba(0, 0, 0, 0.08) 0px 1px 1px; box-sizing: border-box; font-family: monospace, monospace; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 20px 25px; overflow-wrap: break-word; overflow: auto; padding: 0px; position: relative; user-select: text; vertical-align: baseline;"><span style="background-color: white; border: 0px; box-sizing: border-box; font-family: "open sans"; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: 25.5px; margin: 0px; padding: 0px; vertical-align: baseline;"><label style="border: 0px; box-sizing: border-box; font-family: sans-serif; font-size: 13px; font-stretch: inherit; font-style: inherit; font-variant: inherit; left: 1px; line-height: inherit; margin: 0px; padding: 0px; pointer-events: none; position: absolute; text-align: center; top: 16px; user-select: none; vertical-align: baseline; width: 60px;">CSS</label> khung code</span></pre>

Các bạn copy đoạn mã trong khung ngay phía trên dòng này thì các bạn sẽ có cái khung để nhồi mã giống như vậy.

đoạn code ở trên được cho vào khung tuy nhiên nó có thanh cuốn .

các bạn cũng có thể tạo nhiều cột ( responsive) cho blogspots tại đây

nếu sau khin làm như trên ròi mà vẫn chưa ok thì như mình đầu tiên tạo bảng trong Word ( bảng 1 hàng , 1 cột ) sau đó chép dữ liệu vào bảng đó . Rồi cuối cùng sao chép cả bảng và cả dữ liệu trong đó vào bài viết thế là xong.!
Bài viết sưu tầm tại đây