Thư viện

Sự kiện

Thứ Năm, tháng 5 19, 2011

Một số khung chứa code đẹp cho blogger

Trước đây thủ thuật blogger đã đưa ra một số mẫu trình bày code khá đẹp và hôm nay mình cũng muốn đóng góp thêm 1 số mẫu trình bày code khác khá bắt mắt.

Chia sẻ:
Đ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:Một số khung chứa code đẹp cho blogger

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

12 nhận xét:

  1. Bài viết rất hay! Bạn vào trang này thử tiện ích của mình nha: http://www.backlink.docchieu.tk/

    Trả lờiXóa
  2. Thank bạn nhiều nha. Mình làm được rồi.
    Mì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

    Trả lờiXóa
  3. 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óa
  4. Mình đã giải quyết được vấn đề đó rồi. Nhưng lại gặp phải vấn để khác.
    Bạ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 !!

    Trả lờiXóa
  5. 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ếtPate nội dung vào đó:
    <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: &quot;Courier New&quot;; 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!

    Trả lờiXóa
  6. Nam giúp với!
    Mì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é!

    Trả lờiXóa
    Trả lời
    1. 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óa
  7. Ô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óa
    Trả lời
    1. Bà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:

      Bạ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

      Xóa
  8. Mình copy để lại nguồn đc ko vậy?
    http://vuduyan.blogspot.com

    Trả lờiXóa