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 {....}
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 :
Code :
pre, code { display:block; font: 1em 'Courier New', Fixed, monospace; font-size : 100%; color: #666666; background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjTDJPiLmMXVs-9mqmjbif8PX9h1wNf9ggmAXesQMVDcu6Aq_m-Btoj4AHqFys9wUd1vbHTtXS0ZpWXpmpWQaBuM574VvEPnmfpBltO9-ahh_Qs9PrI9lK21hmFmjx27jmDpx7Y6FSMUSE/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é )
Code : .pre, code { display:block; font: 1em 'Courier New', Fixed, monospace; font-size : 100%; color: #666666; background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguIaQz0E-tiY-omu4IO6O8Opvm6Bp9opDdjgRvcQ8AVWcHXTU6jQD5Xb2KkFlhL6S4F-7iSIjtcHvXS13lb0CIxEg5wZAAMGwRsIIborzU9QH3QaptJT4zhll1ADZFXqdmxb9OF_HaxT0/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 :
Code :
.pre, code {
display:block;
margin:10px 0;
border:1px solid #E6DB55;
background:#FFFBCC url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiwy7qz77pdO9uMXdFkWf4c4L2obW3lL8iAK4-uKLld832ICK9fdLuISDbcd2t9WGCPRSylwj7di-zGzJdrH3TDg_PMQfvrNent5q-ojB61RrmqhWyzmCTmxdS2yEc7tWmOASqtFHCFt2s/s1600/pen-namkna-blogspot-com-1.png) top left no-repeat;
padding:10px 10px 10px 40px;}
Mẫu 4 :pre, code { overflow:auto; background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjVy0IThuppf09c1nIju8EKtT5pZO1OqtarTejpvR_5lO6k3g2IdlnkCM2jffvgU51mDmrCHz65FQmZTjtdOnzcXU1TfXo2kyTHBAezwr4_pGd1tk716afbhX-2YgplQmLPna9T5Vz-c30/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 :
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 :
pre, code {
background-image: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicGaW5qz_wod45J2cN9dvTqkVa3vApMXDjNIHk6vYPQF6H7ualadtX2DnvsDhgtWllVtz3YzruE8QoeNd0vhGdT9-5ioXTX8b6rQQSYkh4QfP3aA8WVxeH3jbunEKThTm3oLdhdr0sa5M/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 :pre, code { -moz-box-shadow: 0 0 10px #DDDDDD; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEji2TcYnaVYnp0_X58irPt1tzJAqRtAefZTm93antWKnKOUDjVmTG9KjMKxNzJFnei-ggFMvoNLGYFqmH76kIWqHEipTgTJ4ggu3mpbVk8CaO8r3kCO6bzXBZySMQG_cfL3CZA0u6mPFyE/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 :
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 :
Code :
pre, code { display:block; font: 1em 'Courier New', Fixed, monospace; font-size : 100%; color: #666666; background : #fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5RbhulBmvd1uVyOX-2xy_o-LhAa1_8LS4j2ZKk0jPjmeo6lMm4tQ4JS5dY5UPa1tftJy59s7RUTFKN7a5wTNoCZzIuMk80iBCZNmNvAG83fvcuPv6hpI7tvJItgepTR9__cm6R47_ZUs/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 :
pre, code {font-family:"Courier New",monospace; font-size:16px; display:block; margin:10px 0 15px; border:4px dotted #C9C9C9; background:#E9E9E9 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgYNp7zUORClib5HkFBZGvV13zodhT4M6Jiiet8terv0Z2uPXlo2dYXGRtOp9Gvoy9ZCGn-x0eDXDkvhVdZAXTJR0t1_rEfdLqSSdbgR_jdfr4So7Vp6aRlXaGavrPVrIOQfUtu3rdMmeY/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ẻ.
Nhận xét
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@ 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
Trả lờiXóa- 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!
@Fairstar
Trả lờiXóaNhớ là viết bài trong chế độ HTML nhé
@vlpm4st3rĐúng rồi tích vào HTML và viết :3) :3) :3)
Trả lờiXóaNgồ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@vlpm4st3r Ok để lát anh vào xác nhận :3) :3) :3) :3)
Trả lờiXóaÚi, anh online mà không có thói quen vào yahoo à :C) :D) :D)
Trả lờiXóaÀ, 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)
http://blogtructuyenvn.blogspot.com/2012/03/hien-thi-video-youtube-trong-bai-ang.html
Trả lờiXóa@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)
Trả lờiXóaUk dùng Notepad ++ được đó :3) :3)
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@Tanchau123Của bạn đây:3) :3) :3)
Trả lờiXóaBạn có thể share cái này cho mình không ^^
Trả lờiXóaEmail : yultaesun@gmail.com
http://i.imgur.com/cyA50.png
@YulTaeSun Sonehttp://namkna.blogspot.com/2011/07/at-code-trong-khung-tren-bai-viet-cua.html
Trả lờiXóaCá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
Trả lờiXóanhưng đặt trong temp thì ko thấy j hết.
Bạn test dùm mình:
itviet360.com
Trả lờiXóaDùng code này để chèn vào bài viết nha: <pre> nội dung code </pre>
Xóajoawcj:
<code> nội dung code </code>
Thanks về bài viết.
Trả lờiXóavanchuyennha.blogspot.com
Thanks Nam Tạ. Mình dùng ".post-body code {" chèn vào
Trả lờiXóahttp://itviet360.com
Cám ơn bạn đã chia sẽ, nó rất hữu ích với mình. ly le
Trả lờiXóaCác bác chèn link |o|
XóaỦa anh Nam sau khi chèn vào thì nó bị lỗi như thế này :|
Trả lờiXóahttp://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
DO xung khắc code am ak. Em sửa:
Xóahtml, 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;}
Đã edit lại nhưng vẫn bị như cũ ?? Còn cách nào khác không anh????
XóaDo bải viết đó em chèn code giữa 2 thẻ <code> và </code>
XóaEm hãy chèn vào cặp thẻ <pre> và </pre>
À nếu sử dụng thẻ < pre> thì đúng thật là không bị lỗi.
XóaNhư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
Em để lại URL bài viết đó anh sourcode cho/
XóaCho 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óaVào template tìm đoạn code đó và xóa đi:
Xóaexpr:class='"loading" + data:blog.mobileClass'>
nó nằm ngay sau thẻ <body>
Mình tìm rồi mà ko thấy Nam ơi, mình chỉ thấy cái này à:
Trả lờiXóaexpr: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é
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óaChính là cái đứng độc lập expr:class='"loading" + data:blog.mobileClass'> đó,
XóaCó nhiều nguyên nhân đẫn đến load chậm, bạn có thể xem bài viết này nha:
Xóahttp://namkna.blogspot.com/2011/07/tang-toc-o-loand-blog-bang-cach-ghep.html
Bạn đưa khung search vào thanh menu bằng cách nào vậy. Thanks
Trả lờiXóaTù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óaEm làm mà phải dán lên .post nó mới hiển thị.
Trả lờiXóacho 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óaCode 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óathanks bạn nhiều <3
XóaCả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óaTất cả vận chạy oke mà e.
Xóabạn check họ mình site http://chuabenhviemdacodia.blogspot.com/ áp dụng không được
Trả lờiXóa