Namkna Blog

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

05/08/2011 | 41 nhận xét
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ảm ơn bạn đã đọc bài viết! Hãy like nếu bài viết có ích →

41 nhận xét

Quang
19/10/11 23:59 xóa commnet

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

Reply
Fairstar
20/10/11 00:42 xóa commnet

@ 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!

Reply
vlpm4st3r
5/3/12 11:46 xóa commnet

@Fairstar
Nhớ là viết bài trong chế độ HTML nhé

Reply
Fairstar
5/3/12 13:41 xóa commnet

@vlpm4st3rĐúng rồi tích vào HTML và viết :3) :3) :3)

Reply
vlpm4st3r
5/3/12 14:52 xóa commnet

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)

Reply
Fairstar
5/3/12 16:17 xóa commnet

@vlpm4st3r Ok để lát anh vào xác nhận :3) :3) :3) :3)

Reply
vlpm4st3r
5/3/12 17:06 xóa commnet

Ú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)

Reply
vlpm4st3r
5/3/12 17:07 xóa commnet

http://blogtructuyenvn.blogspot.com/2012/03/hien-thi-video-youtube-trong-bai-ang.html

Reply
Fairstar
6/3/12 14:40 xóa commnet

@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)

Reply
Tanchau123
11/5/12 22:38 xóa commnet

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)

Reply
Fairstar
12/5/12 15:39 xóa commnet
YulTaeSun Sone
17/7/12 22:43 xóa commnet

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

Reply
Phong vũ
15/12/12 15:01 xóa commnet

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:

Reply
Tứ Liêm Trần
15/12/12 15:16 xóa commnet

Thanks về bài viết.
vanchuyennha.blogspot.com

Reply
Nam Tạ
16/12/12 14:06 xóa commnet

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>

Reply
Phong vũ
23/1/13 00:14 xóa commnet

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

Reply
Nhơn
15/2/13 18:38 xóa commnet

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

Reply
Nam Tạ
18/2/13 20:31 xóa commnet

Các bác chèn link |o|

Reply
Kelvin Oscar
1/7/13 09:23 xóa commnet

Ủ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

Reply
Nam Ta
1/7/13 11:03 xóa commnet

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;}

Reply
Kelvin Oscar
1/7/13 22:07 xóa commnet

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

Reply
Nam Ta
3/7/13 17:28 xóa commnet

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>

Reply
Kelvin Oscar
3/7/13 19:16 xóa commnet

À 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

Reply
Nam Ta
4/7/13 15:26 xóa commnet

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

Reply
Tommy Bảo
18/7/13 07:34 xóa commnet

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

Reply
Nam Ta
18/7/13 08:27 xóa commnet

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>

Reply
Tommy Bảo
1/8/13 10:56 xóa commnet

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é

Reply
Tommy Bảo
1/8/13 10:59 xóa commnet

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

Reply
Tommy Bảo
1/8/13 11:02 xóa commnet

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

Reply
Nam Ta
1/8/13 17:22 xóa commnet

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.

Reply
Nam Ta
1/8/13 17:23 xóa commnet

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

Reply
Nam Ta
1/8/13 17:24 xóa commnet

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

Reply
Huu Khanh
8/8/13 14:34 xóa commnet
Nhận xét này đã bị tác giả xóa. Reply
thuthuat-vui
22/8/13 18:46 xóa commnet

Em làm mà phải dán lên .post nó mới hiển thị.

Reply
Vũ Steven
21/11/13 20:02 xóa commnet

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

Reply
Nam Ta
22/11/13 07:19 xóa commnet

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

Reply
Vũ Steven
22/11/13 12:43 xóa commnet

thanks bạn nhiều <3

Reply

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

Reply
Nam Ta
25/1/14 22:10 xóa commnet

Tất cả vận chạy oke mà e.

Reply

Đăng nhận xét

Cám ơn đã đọc bài viết!
» Không sử dụng những từ ngữ thô tục, vi phạm thuần phong mỹ tục
» Mọi thắc mắc, gợi ý hoặc bình luận xin chia sẻ bên dưới hoặc Gửi thư
» Hãy viết bằng tiếng Việt có dấu để mọi người có thể đọc!
» Nếu chèn code hãy mã hóa trước khi chèn vào nhận xét.
» Chèn link bằng thẻ: <a href="Link" rel="nofollow">Tên</a>
» Tạo chữ <b>đậm</b> <i>Ngiêng</i>
Cảm ơn bạn đã để lại nhận xét!

Mã Hóa Code