Tạo khung chứa mã 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.Thủ thuật blogger này sẽ giúp bạn làm tốt việc đó.

A. Loại 1

1- Đăng nhập vào Blogger

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:&nbsp; 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: 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>

 B. Loại 2

Mẫu khung chứa code

Bạn là một Blogger chuyên chia sẻ các thủ thuật blog và bạn muốn code được đặt trong khung để nó được rõ ràng hơn, độc giả cũng dễ copy code hơn. Hôm nay, mình xin chia sẻ với các bạn cách tạo một khung chứa code đơn giản cho blog của mình.

#Cách thêm khung chứa code

Chỉ cần dán đoạn css dưới vào trên thẻ ]]></b:skin>

/*khung chua code*/
pre.code {
display: block;
font: 1em 'Courier New', Fixed, monospace;
font-size: 100%;
color: #666666;
background: #fff ;
overflow: auto;
text-align: left;
border: 1px solid #99cc66; 
padding: 0px 20px 0 30px;
margin: 1em 0 1em 0;
line-height: 17px;
max-height:300px}

Trong đó:

• color: #666666 là màu chữ trong khung
• background: #fff là màu nền của khung
• border: 1px solid #99cc66;là độ rộng đường viền(1px) và màu đường viền(#99cc66)
• max-height:300px là chiều cao tối đa

#Sử dụng khi viết bài

Khi muốn chèn code, bạn chọn thẻ HTML ở thanh công cụ rồi sử dụng đoạn html sau

<pre class="code">
Đặt code vào đây
</pre>

C. Loại 3
Mỗi khi viết bài cần chèn code bạn chỉ cần coppy đoạn code đó sau đó Vào HTML bên góc trái phía trên sau đó bấm lại phần Viết để chèn mã code cần chèn nhé 

<form name="MyTextBoxForm"><input name="button" onclick="javascript:this.form.MyTextBox.focus();this.form.MyTextBox.select();" type="button" value="Select all"/>
<textarea cols="59" name="MyTextBox" rows="18" wrap="on" style="background:#eee; color:#464646; border:1px #A0C4EA dashed;">NỘI_DUNG_CODE</textarea> </form>

cols="59" // Bề rộng khung chứa code
 rows="18" // Số dòng trong khung chứa code
 wrap="on" // Trong một dòng, chữ dài quá khung sẽ hiện thanh trượt kéo ngang qua
 wrap="off" // Nhiều dòng chữ quá số dòng khung quy định sẽ hiện thanh trượt kéo xuống

• Code cần được mã hóa trước khi đặt vào.
• Mẹo: Đặt code trên vào bình thường rồi chọn Viết, sau đó thay code vào dòng Đặt code vào đây