Hầu như tất cả các nền tảng blog, kể cả Blogger, đều có chức năng “văn bản trích dẫn”. Điều này rất hữu ích khi bạn muốn đánh dấu các phần từ các văn bản khác hoặc nơi bạn cần để làm nổi bật thông tin từ bên trong bài viết của riêng bạn. Văn bản được trích dẫn có thể được tùy chỉnh để trông khác với phần chính của bài viết của bạn và những khác biệt này làm cho nó nổi bật.

Trong bài viết này, tôi sẽ mô tả cách sử dụng chức năng “trích dẫn văn bản” trong blog Blogger cũng như cách tùy chỉnh giao diện của nó.

Cách trích dẫn văn bản

Việc chọn văn bản để trích dẫn khá dễ dàng. Ví dụ, trong Blogger, bạn có thể “trích dẫn văn bản” bằng cách chọn nó và nhấn nút “trích dẫn văn bản”.

Bạn cũng có thể chọn văn bản để trích dẫn bằng cách thêm “

”Xung quanh văn bản.

Giao diện mặc định là một thụt đầu dòng đơn giản và điều này không thực sự giúp ích trong việc phân biệt nó với phần còn lại của bài viết. Vì vậy, nó rất hữu ích để thay đổi giao diện của văn bản được trích dẫn mặc định.

Chỉnh sửa giao diện của văn bản được trích dẫn

Chỉnh sửa giao diện văn bản được trích dẫn yêu cầu chỉnh sửa thiết kế HTML cơ bản của blog của bạn. Tôi đã giới thiệu cách chỉnh sửa điều này trong bài viết trước của tôi về Blogger Favicons.

Trước tiên, mở bảng điều khiển Blogger của bạn và chọn " Thiết kế ".

Tiếp theo, trên cửa sổ chính của Blogger, chọn “ Chỉnh sửa HTML” .

Thao tác này sẽ mở trình soạn thảo mẫu HTML. Ở đây kiểm tra " Mở rộng mẫu Widget" để đảm bảo rằng tất cả các mã HTML cho blog của bạn có thể nhìn thấy.

Sau đó, cuộn xuống và tìm phần chứa từ “ blockquote ”. Tất cả các tùy chọn có liên quan cho văn bản được trích dẫn sẽ nằm giữa “{” và “}”.

Tùy chỉnh giao diện của văn bản được trích dẫn

Các tùy chọn tôi sử dụng cho văn bản được trích dẫn trên TechComet blog cá nhân của tôi như sau:

 blockquote {margin: 1em 20px; nền: #dfdfdf; padding: 8px 8px 8px 8px; font-style: nghiêng; }

Điều này tạo ra hiệu ứng sau khi tôi chọn văn bản để báo giá:

Các văn bản là hơi thụt vào, nó được in nghiêng và có một nền màu xám mềm mại. Những thay đổi này thực sự làm cho văn bản được trích dẫn nổi bật hơn và dễ dàng phân biệt với văn bản chính của bài viết.

Có một số tùy chọn khác nhau mà bạn có thể thêm vào văn bản được trích dẫn của mình và tôi sẽ thảo luận chúng bên dưới.

Ký quỹ

Trước tiên, bạn sẽ muốn thụt lề văn bản của bạn để nó không phải là trong cùng một dòng như phần còn lại của bài viết của bạn. Bạn có thể làm điều này bằng cách điều chỉnh số lượng pixel mà lề là từ phần còn lại của văn bản. Tôi đã đặt tôi thành 20px. Điều chỉnh giá trị này khi bạn thấy phù hợp.

 lề: 1em 20px

Màu nền

Tiếp theo, bạn có thể thay đổi màu nền bằng cách điều chỉnh thẻ “ nền” . Tôi đã chọn một màu xám nhạt. Các màu trong mã HTML được thể hiện bằng sáu "hexdigits". Bạn có thể có được một danh sách các màu sắc và hexdigit tương ứng của họ từ đây.

 nền: #dfdfdf

Đệm

Số lượng "đệm" bạn sử dụng xác định khoảng cách mà văn bản được trích dẫn là từ cạnh của hộp được tạo bởi màu nền. Số lượng pixel càng nhỏ, văn bản càng gần với cạnh của hộp.

Con số đầu tiên là khoảng cách (tính bằng pixel) từ đầu hộp văn bản trích dẫn đến đầu văn bản, con số thứ hai là thụt lề phải, con số thứ ba là thụt lề dưới và con số thứ tư là thụt lề trái (Trong ngắn, 4 con số bắt đầu từ đầu và đi theo chiều kim đồng hồ).

 padding: 8px 8px 8px 8px

Kiểu phông chữ

Bạn cũng có thể in đậm hoặc in nghiêng văn bản được trích dẫn để thực sự làm cho văn bản trông khác với phần còn lại của bài viết của bạn.

 kiểu phông chữ: kiểu phông chữ nghiêng: in đậm

Biên giới

Tuy nhiên, tôi chưa chọn thêm đường viền vào văn bản được trích dẫn của tôi, nếu bạn muốn, bạn có thể thực hiện việc này bằng cách sử dụng thẻ “ đường viền” . Bạn phải chọn độ dày, phong cách và màu sắc của đường viền của bạn.

 border: 2px solid #dfdfdf border: 2px rải rác #dfdfdf

Phần kết luận

Trong hầu hết các blog hiện đại, thường có các phần được trích dẫn từ các trang web và blog khác. Để làm nổi bật blog của bạn và thêm một liên lạc “chuyên nghiệp” vào đó, tôi khuyên bạn nên dành thời gian và tùy chỉnh giao diện văn bản được trích dẫn của bạn.

Hãy cho chúng tôi biết văn bản được trích dẫn như thế nào trong các bài viết của bạn!