•·.·´¯`·.·•Dân Vip•·.·´¯`·.·•
Bạn có muốn phản ứng với tin nhắn này? Vui lòng đăng ký diễn đàn trong một vài cú nhấp chuột hoặc đăng nhập để tiếp tục.


•·.·´¯`·.·•Hãy cho nhau nguồn cảm hứng và thăng hoa của tuổi teen•·.·´¯`·.·•
 
Trang ChínhGalleryTìm kiếmLatest imagesĐăng kýĐăng Nhập
Top posters
Anh3 All
Đặt code trong khung trên bài viết của Blogger Vote_lcap1Đặt code trong khung trên bài viết của Blogger Voting_bar1Đặt code trong khung trên bài viết của Blogger Vote_rcap1 
redwolf
Đặt code trong khung trên bài viết của Blogger Vote_lcap1Đặt code trong khung trên bài viết của Blogger Voting_bar1Đặt code trong khung trên bài viết của Blogger Vote_rcap1 
sugus candy
Đặt code trong khung trên bài viết của Blogger Vote_lcap1Đặt code trong khung trên bài viết của Blogger Voting_bar1Đặt code trong khung trên bài viết của Blogger Vote_rcap1 
Ca sĩ Minh Hằng
Đặt code trong khung trên bài viết của Blogger Vote_lcap1Đặt code trong khung trên bài viết của Blogger Voting_bar1Đặt code trong khung trên bài viết của Blogger Vote_rcap1 
Hoa Quỳnh Anh
Đặt code trong khung trên bài viết của Blogger Vote_lcap1Đặt code trong khung trên bài viết của Blogger Voting_bar1Đặt code trong khung trên bài viết của Blogger Vote_rcap1 
2 cù nèo
Đặt code trong khung trên bài viết của Blogger Vote_lcap1Đặt code trong khung trên bài viết của Blogger Voting_bar1Đặt code trong khung trên bài viết của Blogger Vote_rcap1 
Latest topics
» Nhật Ký Online
Đặt code trong khung trên bài viết của Blogger Icon_minitimeFri Aug 08, 2008 12:30 am by 2 cù nèo

» ADMIN SHOW HÀNG
Đặt code trong khung trên bài viết của Blogger Icon_minitimeThu Aug 07, 2008 8:33 am by Anh3 All

» Bạn sẽ là nàng công chúa nào ?
Đặt code trong khung trên bài viết của Blogger Icon_minitimeThu Aug 07, 2008 8:11 am by sugus candy

» Thăm BLoG cuả sugus candy ^o^
Đặt code trong khung trên bài viết của Blogger Icon_minitimeThu Aug 07, 2008 8:09 am by sugus candy

» Album Doll 6
Đặt code trong khung trên bài viết của Blogger Icon_minitimeMon Aug 04, 2008 12:25 am by Anh3 All

» Album Doll 5
Đặt code trong khung trên bài viết của Blogger Icon_minitimeMon Aug 04, 2008 12:21 am by Anh3 All

» Album Doll 4
Đặt code trong khung trên bài viết của Blogger Icon_minitimeMon Aug 04, 2008 12:18 am by Anh3 All

» Album Doll 3
Đặt code trong khung trên bài viết của Blogger Icon_minitimeMon Aug 04, 2008 12:15 am by Anh3 All

» Album Doll 2
Đặt code trong khung trên bài viết của Blogger Icon_minitimeMon Aug 04, 2008 12:11 am by Anh3 All


 

 Đặt code trong khung trên bài viết của Blogger

Go down 
Tác giảThông điệp
Anh3 All
Tổng Tư Lệnh
Tổng Tư Lệnh
Anh3 All


Nam
Tổng số bài gửi : 111
Age : 38
Đến từ : Miền đất chết
Job/hobbies : ngông cuồng
Humor : ngạo mạn
Registration date : 11/07/2008

Đặt code trong khung trên bài viết của Blogger Empty
Bài gửiTiêu đề: Đặt code trong khung trên bài viết của Blogger   Đặt code trong khung trên bài viết của Blogger Icon_minitimeTue Jul 15, 2008 9:01 am

Tôi viết hướng dẫn này chia sẻ một trong những cách đơn giản nhưng không kém chuyên nghiệp để đặt code nằm trên khung trong bài đăng của Blogger. 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.

CSS điều khiển thuộc tính khung hiện code:

Để hiển thị code bạn cần đặt chúng giữa hai thẻ mở và đóng trong bài viết của mình. Muốn đẹp hơn bạn có thể thêm khung bằng cách sử dụng các thuộc tính về màu chữ, màu nền, font chữ, đường viền, kích thước rộng và cao, thanh trượt, cách viền ... bằng cách thêm code CSS vào thẻ mở, ví dụ: .

Một cách chuyên nghiệp hơn chúng ta sẽ tạo ra một class mới và đặt chúng vào CSS của template (đặt vào bất kỳ vị trí nào giữa hai thẻ ]]> ). Việc làm này sẽ giúp bạn sử dụng khung hiển thị code thống nhất ở tất cả các bài viết có dùng khung và dễ chỉnh sửa thuộc tính khi muốn thay đổi. Ví dụ ở đây tôi tạo ra lớp pre-formatting có CSS như sau:

.pre-formatting{
color: #333333;
background: #999999;
border: 2px solid #999999;
overflow: auto;
font-family: "Tahoma", Tahoma;
padding: 10px;
}
Đương nhiên trong template nên bạn có thể sử dụng các biến lấy giá trị cho từng thuộc tính đã được định nghĩa trước đó. Ví dụ:

.pre-formatting{
color: $textcolor;
background: $bgcolor;
border: 2px solid $bordercolor;
overflow: auto;
font: $headerfont;
padding: 10px;
}
Cách sử dụng:

Để code xuất hiện mang thuộc tính của CSS đã lưu trước đó chúng ta sẽ sử dụng chế độ HTML để soạn bài và đặt code như sau:

Code
Câu hỏi đặt ra ở đây là chúng ta đã dùng class pre-formatting, vậy tại sao phải thêm CSS điều khiển height (chiều cao của khung), có dư thừa chăng? Câu trả lời phụ thuộc vào đoạn code mà bạn dùng. Nếu đoạn code đó ngắn bạn chọn giá trị chiều cao khung nhỏ và ngược lại, không nhất thiết phải thêm vào CSS của template vì chúng ta không biết trước đoạn code mỗi lần dùng. Không dư thừa chút nào!

Cũng xin lưu ý bạn phải chuyển đổi các ký tự đặc biệt thành mã HTML (ví dụ: < thành <> thành >) trước khi đặt giữa hai thẻ trên. Và mách nhỏ hãy lưu đoạn code đó vào Post Template (Mẫu đăng bài) trong Settings (Cài đặt) | Formatting (Đang định dạng) để không cần phải gõ mỗi lần dùng:
Về Đầu Trang Go down
http://bantoi.dannet.vn
 
Đặt code trong khung trên bài viết của Blogger
Về Đầu Trang 
Trang 1 trong tổng số 1 trang
 Similar topics
-
» Làm thế nào để sử dụng khung nhận xét của Blogger?
» Cách đặt code quảng cáo của Chợ Điện Tử vào template Blogger
» Tên miền cho Blogger miễn phí: BlogSpotvn.com
» Người đẹp trong Games

Permissions in this forum:Bạn không có quyền trả lời bài viết
•·.·´¯`·.·•Dân Vip•·.·´¯`·.·• :: Thế Giới Blog :: Thủ thuật Blog-
Chuyển đến