Đ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 2border-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;
}
.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}
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;}
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;}
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>
Nhận xét
Thank bạn nhiều nha. Mình làm được rồi.
Trả lờiXóaMình muốn đặt một đoạn code bên góc trái giống cái bản " ai nói. Tổng giám đốc...." của bạn thì làm như thế nào?
Bnj biết thì pm mình tại đây nha, nó sẽ gửi trả lời cho mình tại mail
Replly Hoc lam giau Bạn có thể nói rõ giống phần nào trong Blog của mình để mình giải thích cho:D
Trả lờiXóahay lam. cam on ban!
Trả lờiXóaMình đã giải quyết được vấn đề đó rồi. Nhưng lại gặp phải vấn để khác.
Trả lờiXóaBạn đã có share 1 code tạo khung màu xanh mình nhận được rồi. Mà mình muốn có đoạn code chứa đoạn code đó ( tức là cái khung mà bạn đang dùng để share đonạ code đó ). Bạn có thể share cho mình được không ?
thuyoanhhhcmg@gmail.com.
Thanks bạn nhiều !!
Amin Replly hoclamgiau: Mình đã Share Code mà bạn yêu cầu ngay phía dưới bài đó http://namkna.blogspot.com/2011/05/khung-chua-code-mau-xanh.html bạn vào đó mà Copy nha. Code đó bạn Pate vào HTML sau đó bấm vào ô Viết và Pate nội dung vào đó:
Trả lờiXóa<div style="background-color: #f4f4f4; border: 1px solid gray; cursor: text; font-family: consolas,'Courier New',courier,monospace; font-size: 8pt; line-height: 12pt; margin: 20px 0px 10px; max-height: 200px; overflow: auto; padding: 4px; width: 97.5%;">
<div style="border: 1pt solid black; padding: 0in;">
<div class="MsoNormal" style="border: medium none; padding: 0in;">
<span style="font-family: "Courier New"; font-size: 10pt;">Nội dung Code</span></div>
</div>
</div>
Tốt nhất bạn nên vào theo Link bên trên vì phần Comment đôi khi bị xai các ký tự
Chúc thành công!
Nam giúp với!
Trả lờiXóaMình muốn đăng nhận xét có chứa các đoạn code như nhận xét của bạn thì làm thế nào vậy? Mình đưa vào nhưng khi bấm xuất bản nhận xét thì nó báo là: ...Nhận xét của bạn không được để thẻ DIV,....chẳng hạn?
Và nó chẳng hiện gì!
Mong Nam giúp nhé!
Muốn đưa code vào nhận xét bạn phải mã hóa nó. Bạn có thể sử dụng công cụ này: Mã hóa Code
Xóaok rất xấu
Trả lờiXóaÔi…, tôi đã làm đúng theo hướng dẫn của bạn trong việc tạo khung cho code sao mà mãi vẫn không được vậy bạn ơi? Xin bạn hãy giúp tôi tạo khung chứa code trong bài viết này, bạn nhé: http://timhuonggiuadoi.blogspot.com/2013/10/css3-flying-drop-down-menubar-cho_1685.html
Trả lờiXóaBài viết đó mình viết mà để sử dụng code bạn hãy mã hóa trước khi đưa vào phần HTML nha bạn nếu không nó không hiển thị đâu:
XóaBạn lưu ý chèn với cấu trúc như bên dưới:
<div class="code">
Nội dung đoạn code đã mã hóa
</div>
Bạn hãy dùng công cụ sau để mã hóa nha: Công cụ mã hóa code dành cho blogger
Mình copy để lại nguồn đc ko vậy?
Trả lờiXóahttp://vuduyan.blogspot.com