Tổng hợp khung chứa Code đẹp cho Blogspot

Vào Thứ Sáu, tháng 8 05, 2011 Question | Subscribe | Member | Comments

Tổng hợp khung chứa Code đẹp cho Blogspot
Bài viết này sẽ hướng dẫn các bạn một cách khá đơn giản nhưng cũng rất chuyên nghiệp để đặt đoạn code mình cần trích dẫn vào bài đăng trên blog. Với cách làm này đoạn mã hiển thị sẽ trông dễ nhìn hơn và người đọc dễ sao chép khi muốn sử dụng.

Chúng ta sử dụng CSS để cho hiện thị thuộc tính khung hiện code. Giống như bài viết "Đặt code trong khung trên bài viết của Blogger" lần trước mình đã giới thiệu (Xem ở đây). Bài này mình sẽ giới thiệu cho các bạn các mẫu pre code ( Khung chèn code ) đẹp cho blogspot.
Đây là các mẫu khung code mà mình thu thập được từ Internet.

☼ Bây giờ ta bắt đầu thủ thuật :

1. Đăng nhập blog
2. Vào Mẫu (Template)
3. Vào chỉnh sửa HTML (edit HMTL). Tìm 1 trong các đoạn code tương tự. (Mẹo: Bấm Ctrl + F để tìm với từ khóa pre hoặc code hoặc pre,code)
pre {....}
code {....}
pre, code {....}
- Nếu có thì bạn thay toàn bộ code css đó  bằng một trong các code bên dưới. 
- Nếu tìm không có thì bạn chèn thẳng 1 trong các bên dưới sau vào trước thẻ đóng ]]></b:skin>. Chèn xong bạn Save lại.

☼ Để sử dụng trong bài viết!

- Muốn sử dụng thì trong bài viết bạn check vào ô HTML của bài viết và sử dụng code sau :
<pre> ....
Code của bạn
......</pre>
hoặc
<code> ......
Code của bạn
.....</code>
-Lưu ý: Code phải được mã hóa. Bạn có thể sử dụng công cụ miễn phí tại đây

☼ Các mẫu để chèn vào Template!


Mẫu 1 :
Tổng hợp khung chứa Code đẹp cho Blogspot
Code :
pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(http://2.bp.blogspot.com/-Yeug3UxNNlA/T64kS3DDPTI/AAAAAAAADOM/y5tZ_Yg7Uvg/s1600/prepb3-khung-chua-code-namkna-blogspot-com.png) repeat;
overflow : auto;
text-align:left;
border : 1px solid #99cc66; 
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}
Mẫu 2 : (Mẫu này giới hạn 100 dòng thôi nhé )
Tổng hợp khung chứa Code đẹp cho Blogspot
Code :
.pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(http://2.bp.blogspot.com/-sPDBOBcieiM/T64koQD2v3I/AAAAAAAADOU/kZfC1Y4bTAg/s1600/prepb3-namkna-blogspot-com-1.jpg) no-repeat left top;
overflow : auto;
text-align:left;
border : 1px solid #99cc66;
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}
Mẫu 3 :
Tổng hợp khung chứa Code đẹp cho BlogspotCode :

.pre, code {
display:block;
margin:10px 0;
border:1px solid #E6DB55;
background:#FFFBCC url(http://2.bp.blogspot.com/-gXBbC_Drpi4/T64k9aW_fFI/AAAAAAAADOc/0-zHTzn-FKQ/s1600/pen-namkna-blogspot-com-1.png) top left no-repeat;
padding:10px 10px 10px 40px;}
Mẫu 4 :
Tổng hợp khung chứa Code đẹp cho Blogspot
Code :

pre, code {
overflow:auto;
background-image:url(http://1.bp.blogspot.com/-xmVC04argMI/T64lMTfUw_I/AAAAAAAADOk/oJn4sikxpKo/s1600/Note-namkna-blogspot-com.png);
background-color:#FFF77A;
background-repeat:no-repeat;
padding-top:50px;
padding-left:5px;
padding-right:5px;
padding-bottom:5px;
border:#FF9900 thin dashed;
color:#000;}
Mẫu 5 :
Tổng hợp khung chứa Code đẹp cho Blogspot
Code :
pre, code {
color:#281800;
font-family:Courier New;
font-size:13px;
line-height:17px;
background-image:URL(https://lh4.googleusercontent.com/_kck7-TEWM-M/TWtvurFWTlI/AAAAAAAAAlM/qNLb07OebIw/code_tag_bg.jpg);
display: block;
padding-left: 4px;
padding-right: 4px;
border: 1px #FC0 dashed;
overflow:auto;
word-wrap:break-word;}
Mẫu 6 :
Tổng hợp khung chứa Code đẹp cho Blogspot
Code :
pre, code {
background-image: url(http://2.bp.blogspot.com/-EKGzAgQsvO0/T64mvX5i2bI/AAAAAAAADPE/cKMm0xTRK1k/s1600/code-2-namkna-blogspot-com.png);
background-position: 15px 15px;
background-repeat: no-repeat;
background-color: #FDD;
width: 118%;
border: #C72B2C dashed thin;
padding: 15px;
padding-left: 70px;
color: #D24E50;}
Mẫu 7 :
Tổng hợp khung chứa Code đẹp cho Blogspot
Code :
pre, code {
-moz-box-shadow: 0 0 10px #DDDDDD;
background: url(http://1.bp.blogspot.com/-l5BDeH7iWWE/T64lzANUiUI/AAAAAAAADOs/oSKgKQUn_ls/s1600/Svip4u-namkna-blogspot-com.png) repeat scroll 0 0 #FFFFFF;
border: 2px solid #CCCCCC;
clear: both;
color: #333333;
display: block;
font-size: 12px;
line-height: 15px;
margin: 10px auto 10px 30px;
overflow: auto;
padding: 15px;
white-space: pre;
width: 85% !important;
word-wrap: break-word;}
Mẫu 8 :
Tổng hợp khung chứa Code đẹp cho Blogspot
Code :
pre, code {
background:#eee;border:1px solid #ddd;clear:both;
font-family:Consolas,Monaco,"Courier New",Courier,monospace;
overflow-x:auto;
padding:10px;
white-space:pre-wrap;
word-wrap:break-word;}
Mẫu 9 :
Tổng hợp khung chứa Code đẹp cho Blogspot
Code :
pre, code {
display:block;
font: 1em 'Courier New', Fixed, monospace;
font-size : 100%;
color: #666666;
background : #fff url(http://3.bp.blogspot.com/-UjesxwQFTVI/T64mLmVqv2I/AAAAAAAADO0/Xwk7sv6PLpc/s1600/imgbg-namkna-blogspot-com-hot.png) repeat;
overflow : auto;
text-align:left;
border : 1px solid #99cc66; 
padding : 0px 20px 0 30px;
margin:1em 0 1em 0;
line-height:17px;}
Mẫu 10 :
Tổng hợp khung chứa Code đẹp cho Blogspot
Code :
pre, code {font-family:"Courier New",monospace;
font-size:16px;
display:block;
margin:10px 0 15px;
border:4px dotted #C9C9C9;
background:#E9E9E9 url(http://1.bp.blogspot.com/-a29oJOGjLi8/T64mZ2XGHMI/AAAAAAAADO8/OvxZKchOl4A/s1600/code-namkna-blogspot-com.png) top right no-repeat;padding:10px;overflow:auto;
}
Kết: Đây là các mẫu code mình thu thập được từ các blog,forum khác nhau. Do sử dụng công cụ Viewsource nên có thể đụng chạm với một số bạn. Chúc các bạn vui vẻ.

Có 41 nhận xét & bạn hãy gửi ý kiến của mình!

  1. bác chi em cách bỏ code trong bài đăng vs, em làm mãi mà nó chả hiển thị đc:((

    Trả lờiXóa
  2. @ Quang: Thực ra các Code trên chỉ khác nhau về phần hình ảnh thôi. Bạn chọn mẫu bạn thích sau đó chèn trước thẻ ]]></b:skin> trong Thiết kế - Chỉnh sửa HTML
    - Bi giờ để chèn code vào bài viết bạn viết code như sau:
    <code>
    Code của bạn
    </code>
    hoặc
    <pre>
    Code của bạn
    </pre>
    Bạn có thể xem chi tiết hơn Ở ĐÂY
    - Chúc thành công!

    Trả lờiXóa
  3. @Fairstar
    Nhớ là viết bài trong chế độ HTML nhé

    Trả lờiXóa
  4. @vlpm4st3rĐúng rồi tích vào HTML và viết :3) :3) :3)

    Trả lờiXóa
  5. Ngồi máy từ sáng mà mải chỉnh sửa trong blog mà quên mất, vừa add xong :1) :1) :1) :3)

    Trả lờiXóa
  6. @vlpm4st3r Ok để lát anh vào xác nhận :3) :3) :3) :3)

    Trả lờiXóa
  7. Úi, anh online mà không có thói quen vào yahoo à :C) :D) :D)
    À, pri cái thủ thuật bên blog em, vừa post xong, kaka.
    P/s: Blog đang chỉnh sửa temp, lúc đầu muốn dùng 3 cột, giờ lại thích 2 cột, giờ mới tải notepad++ về để edit T_T, cugnx ko biết làm đc ko nữa :B) :B) :B)

    Trả lờiXóa
  8. http://blogtructuyenvn.blogspot.com/2012/03/hien-thi-video-youtube-trong-bai-ang.html

    Trả lờiXóa
  9. @vlpm4st3r Danh có mấy khi vào Yahoo đâu. Nhiều thư quá vào đọc không xuể nên ít vào lắm.:3) :3)
    Uk dùng Notepad ++ được đó :3) :3)

    Trả lờiXóa
  10. Bác share khung code có con lăn bên phải như blog bác nhé ! Em thấy nó rất hay :G)

    Trả lờiXóa
  11. Bạn có thể share cái này cho mình không ^^
    Email : yultaesun@gmail.com
    http://i.imgur.com/cyA50.png

    Trả lờiXóa
  12. Cái này hình như ko áp dụng được 1 số mẫu. Cụ thể như template của mình. Đặt Code này trong CSS bài viết thì OK
    nhưng đặt trong temp thì ko thấy j hết.
    Bạn test dùm mình:

    Trả lờiXóa
  13. Trả lời
    1. Dùng code này để chèn vào bài viết nha: <pre> nội dung code </pre>
      joawcj:
      <code> nội dung code </code>

      Xóa
  14. Thanks Nam Tạ. Mình dùng ".post-body code {" chèn vào
    http://itviet360.com

    Trả lờiXóa
  15. Cám ơn bạn đã chia sẽ, nó rất hữu ích với mình. ly le

    Trả lờiXóa
  16. Ủa anh Nam sau khi chèn vào thì nó bị lỗi như thế này :|

    http://img832.imageshack.us/img832/4934/u5y9.png

    *** Lúc trước em nghĩ là do Code, nhưng Mẫu Code nào em cũng áp dụng đều bị như thế :| Chắc do Temp của em có vấn đề anh chỉ giùm em cách Fix với! Thanks anh

    Trả lờiXóa
    Trả lời
    1. DO xung khắc code am ak. Em sửa:

      html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, address, big, cite, code, pre,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}


      thành:

      html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote,a, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}

      Xóa
    2. Đã edit lại nhưng vẫn bị như cũ ?? Còn cách nào khác không anh????

      Xóa
    3. Do bải viết đó em chèn code giữa 2 thẻ <code> và </code>

      Em hãy chèn vào cặp thẻ <pre> và </pre>

      Xóa
    4. À nếu sử dụng thẻ < pre> thì đúng thật là không bị lỗi.

      Nhưng em tạo .post NOTE hay .post DOWNLOAD (cũng áp dụng các khung Code trên) mà sử dụng như thế này lại bị lỗi, anh chỉ giùm em cách Fix được không??

      Tại em định làm như cách này (đúng như ý em muốn hỏi, bạn ở trên có post ảnh) : http://i.imgur.com/cyA50.png

      Xóa
    5. Em để lại URL bài viết đó anh sourcode cho/

      Xóa
    6. Cho mình hỏi làm thế nào để xóa cái code nó bị lỗi có dạng expr:class='"loading" + data:blog.mobileClass'> phía trên góc trái của blog mình http://yeutienganh123.blogspot.com/ Cám ơn bạn nhiều nha :)

      Xóa
    7. Vào template tìm đoạn code đó và xóa đi:

      expr:class='"loading" + data:blog.mobileClass'>

      nó nằm ngay sau thẻ <body>

      Xóa
  17. Mình tìm rồi mà ko thấy Nam ơi, mình chỉ thấy cái này à:

    expr:class='"loading" + data:blog.mobileClass'>


    <script type="text/javascript">
    function setAttributeOnload(object, attribute, val) {
    nên mình ko dám xóa, bạn có cách nào ko. Cám ơn bạn trước nhé

    Trả lờiXóa
    Trả lời
    1. Nhân tiện bạn cho mình hỏi cách khắc phục blog load chậm ko luôn nha. Thanks

      Xóa
    2. Chính là cái đứng độc lập expr:class='"loading" + data:blog.mobileClass'> đó,

      Xóa
    3. Có nhiều nguyên nhân đẫn đến load chậm, bạn có thể xem bài viết này nha:

      http://namkna.blogspot.com/2011/07/tang-toc-o-loand-blog-bang-cach-ghep.html

      Xóa
  18. Bạn đưa khung search vào thanh menu bằng cách nào vậy. Thanks

    Trả lờiXóa
    Trả lời
    1. Tùy từng thanh menu mà đưa vào vụi trí khác nhau. Hãy cho mình biết bạn muốn chèn vào menu nào nha.

      Xóa
  19. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  20. Em làm mà phải dán lên .post nó mới hiển thị.

    Trả lờiXóa
  21. cho mình hỏi trên blogger mình không không thể đăng bài viết mới có chứa [ code ] xem giúp mình mới http://www.vusteven.info/2013/11/tao-hop-nhan-xetbinh-luan-moi-cho_21.html#.Uo9VmMRdWJo

    Trả lờiXóa
    Trả lời
    1. Code bạn chèn vào html của bài viết thì phải mã hóa code đi nha bạn. Bạn có thể dùng công cụ sau" MÃ HÓA CODE

      Xóa
  22. Cảm ơn anh Namkna đã share, có 1 số hình ảnh hư rồi, nhờ anh fix lại giùm nha :D

    Trả lờiXóa