Làm sao để đặt code trong một khung độc đáo trên blog ?


Thông thường, khi giới thiệu code , chúng ta hay đặt chúng ngay trên bài viết. Vì cùng nằm trên một nền nên nhiều khi trông rất lộn xộn . Vậy phải làm sao để phần giới thiệu ở nền blog chính thức , còn đoạn code ở trong một khung có nền tùy chỉnh ? Chúng ta sẽ biết sau khi đọc xong bài viết sau đây !
Đầu tiên, các bạn hãy vào Trình bày (Layout) và chọn tab Chỉnh sửa HTML mà không cần bật Mở rộng mẫu tiện ích . Sau đó , hãy thêm đoạn code dưới đây ngay trên thẻ ]]></b:skin>
.codeview {
margin : 15px 35px 15px 15px;
padding : 10px;
clear : both;
list-style-type : none;
background : #f9f9f9 url(http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif) no-repeat right bottom;
border-top : 1px solid #eeeeee;
border-right : 2px solid #cccccc;
border-bottom : 2px solid #cccccc;
border-left : 1px solid #eeeeee;
}
.codeview li {
font-size : 13px;
line-height : 24px;
font-family : "Courier New", "MS Sans Serif", sans-serif, serif;
color : #333333;
font-weight : normal;
margin : 0;
padding : 0;
}
Ghi chú : Bạn có thể thay đổi phần chữ màu đỏ theo ý thích

Vậy là các bạn đã tạo xong thuộc tính đặt code trong một khung độc đáo rồi đấy .
Từ giờ , bạn có thể thêm code vào bất cứ đâu trên bài viết với thẻ <div> sau
<div class="codeview">
Điền code vào đây
</div>

17 Nhận xét on "Làm sao để đặt code trong một khung độc đáo trên blog ?"

Niềm đau on 21 September 2008 at 18:09 said...

Blog bạn p.triển mạnh nhỉ! hìhì! G9

Benjami Tennyson on 21 September 2008 at 20:36 said...

Hì hì, cảm ơn bạn Quân . Người ta nói : "Có công mài sắt có ngày nên kim mà" , mình chỉ cố gắng làm hết sức thôi ^^!

y5cafe on 23 September 2008 at 10:10 said...

Đây là một trong những tips về css mà tôi thích.
Bài viết rất hay, chúc Blog ngày một lớn mạnh :)

Benjami Tennyson on 23 September 2008 at 23:32 said...

Sẽ cố gắng nhiều hơn để giúp đỡ mọi người trong cộng đồng blogger ^_^

Klose on 13 April 2009 at 16:17 said...

bạn ơi cho mình hỏi làm sao để tạo box cho phép người đọc nhận tin qua email như của bạn vậy.
Cảm ơn!

Benjami Tennyson on 14 April 2009 at 21:53 said...

Bạn để lại địa chỉ mail đi, mình gửi hướng dẫn qua cho bạn (Gmail càng tốt). Chứ ghi tại khung comment này dài dòng lắm. Thân !

phattrien@so on 24 May 2009 at 21:53 said...

Thông thường mình dùng thủ thuật Blockquote để thực hiện thủ thuật này.

Cho mình xin bài này paste lên www.vnpressnet.com nhé, có link bạck tới ngưồn bài viết này.

Duy Khánh on 17 June 2009 at 22:31 said...

Cùng câu hỏi làm sao để tạo box cho phép người đọc nhận tin qua email như của bạn vậy.
Cảm ơn!
Mail: ndkhanh1989@gmail.com

boyproDX on 20 June 2009 at 23:32 said...

@Duy Khánh : Bạn xem hướng dẫn tại đây nhé. Sr đã comment trễ, do khung cm gặp trục trặc (-.-)

- --((¯`º»((¯`º» anle147 «º´¯))«º´¯))-- - on 22 July 2009 at 12:33 said...

Ban oi! sao mình làm như ban nói rui` mà khi post code van ko dc la sao thế? help me!

boyproDX on 22 July 2009 at 15:15 said...

@anle147 : Hiện tại mình đang dùng thủ thuật này và thấy vẫn hoạt động mà bạn, nên đảm bảo code không có gì sai sót. Có thể trong lúc soạn thảo, bạn đã đặt thẻ div class="codeview" sai vị trí, hãy kiểm tra lại như sau :
- Chỉ dùng thẻ div class="codeview" khi soạn thảo ở chế độ chỉnh sửa HTML (không phải chế độ Viết).
- Nhớ đóng thẻ /div sau khi chèn.
- Khung code chỉ hiển thị khi post bài lên blog (Chế độ Xem trước sẽ không hiển thị).

Phạm Quốc Duy on 31 July 2009 at 17:03 said...

Sao mình tạo cái ảnh khác kính thước i như cái
http://i259.photobucket.com/albums/hh283/boy_proDX/framecode.gif và thay vào thì nó không hiển thị được vậy bạn. Có thể giúp mình không?

blogerkg on 1 November 2009 at 14:53 said...
This comment has been removed by the author.
Ugotfile on 31 March 2010 at 05:53 said...

cho minh hoi ti nha ban,minh dung thu thuat nay tren blog no khong chay vay.http://ezidl.blogspot.com/ thanks.

Viet Dung on 1 May 2010 at 19:27 said...

khi mình đưa vào thì nó hiển thị ngay cái ứng dụn đó chứ ko còn đoạn code đó nữa.

http://www.cuasotintuc.com/

khanhqnu on 14 June 2011 at 23:19 said...
This comment has been removed by the author.
khanhqnu on 14 June 2011 at 23:23 said...

Chào bạn! mình làm theo cách của bạn thành công. Nhưng mình gặp phải trường hợp là code mình đưa lên có chứa các kí tự đặt biệt (các thẻ <,>..) và khi đưa lên thì nó không hiển thị đc. Vậy làm sao để giải quyết vấn đề này? thank bạn!

:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Post a Comment

Cám ơn bạn đã đọc bài viết tại blog của boyproDX.
Nếu cảm thấy blog có nhiều bài hữu ích , các bạn hãy Bookmark(nhấn Ctrl_D) hoặc Đăng kí nhận tin qua RSS site mình để không bỏ qua các bài viết tiếp theo của mình. Chúc các bạn vui vẻ !

Logo Exchange (Tạm ngưng)

 

Chuyên trang blog về tin học | Copyright © 2009 | Best view at 1024x768 with Firefox 3