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

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ở <pre> và đóng</pre> 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ụ: <pre style="color: #333333; background: #999999; width: 100%; height: 50px; overflow: auto; padding: 10px;">.

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ẻ <b:skin><![CDATA[/* và ]]></b:skin> ). 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:

<pre style="height: 100px;" class="pre-formatting">Code</pre>


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 < và > 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:



NHÀ CUNG CẤP DỊCH VỤ CHUYÊN NGHIỆP
PHÁT TRIỂN
WEBDESIGN - HOSTING - DOMAIN
Đánh giá:

0 comments :

Post a Comment

DỊCH VỤ

Liên hệ nhanh

DANH MỤC CHÍNH

Xã hội Thời sự kinh doanh Đời sống Công nghệ Quốc tế Website Cảm nang việc làm Thiên tai Phần mềm Sức khoẻ Lối sống Siêu bão Lễ hội Văn hoá Kiến thức Giáo dục 20/10 Doanh nghiệp Tình yêu - Giới tính Lễ Phật Đản Giao thông Pháp luật Thủ thuật Công dụng của đầu dừa Chuyện lạ Giải trí Thiết kế web Sản phẩm mới Y tế Công dụng Kinh tế Bảo mật Khuyến mãi - Giảm giá Võ Nguyên Giáp Ô tô 20/11 Giới tính Mưa lũ Ngày Nhà giáo Việt Nam Xe máy hosting Khoa học Sinh viên Du lịch Dịch vụ Người mẫu Seo web Facebook Hướng dẫn sử dụng Làm đẹp Thị trường Blogger Bất động sản Hack Hướng dẫn làm dầu dừa Khám phá Ngày của Mẹ Thời trang Video Dinh dưỡng Dầu dừa nguyên chất Ngày Phụ nữ Việt Nam NukeViet Triều cường máy chủ Chăm sóc tóc Dân chơi Google Khuyến mãi Kinh nghiệm Kinh nghiệp Lễ Vu Lan Tên miền Viễn Thông Hướng dẫn Kỹ năng bán hàng Nhân vật SEO Windows WordPress Themes Điện thoại Backlink CSS3 Cây lược vàng Dịch vụ vệ sinh HTML5 Hoa hau Hội thảo Mẹ và bé Mã màu Mỹ phẩm từ dầu dừa Themes Thể thao WordPress hà thủ ô Dầu dừa trắng da Giảm cân với dầu dừa Hoa hậu Hà Nội Hướng dẫn nâng cấp Khắc phục lỗi Mua dầu dừa ở đâu Nứt gót chân Template Thông tin về dầu dừa Tin tức Trị mụn trứng cá Tuyển dụng - Việc làm

Thống kê

Translate

Quan tâm nhiều

Theo thời gian

Contact Form

Name

Email *

Message *

Follow by Email