Hướng dẫn tuỳ biến khối trích dẫn "block quotes" trong blogspot

Block quotes thông thường là dấu ngoặc kép (" ") trong đoạn văn bản để đảnh dấu làm nổi bật phần được trích dẫn từ nguồn khác; Trong Blog, "Blockquotes: được dùng trong phần thân bài viết để đánh dấu điểm nổi bật, hoặc trích dẫn, hoặc để ghi chú trích dẫn, "Blockquotes" có thể có mầu nền khác với phần thân bài viết.

Trong hầu hết các mẫu Blogger đều xác minh định nghĩa khối "block quotes" xuất hiện trong mẫu giữa 2 thẻ lệnh  <b:skin>. Trong Blog này tôi đã tuỳ biến màu nền của "Block quotes" để làm nổi bật hơn so với "Block quotes" gốc. Trong bài viết này tôi sẽ đưa ra các ví dụ và hướng dẫn bạn  tuỳ biến "Blockquotes" để có điểm đặc trưng riêng cho các bạn.

Nếu bạn không quen với "Blockquotes", bạn có thể hơi phân vân về cách sử dụng chúng trong bài viết. Bạn không phải lo ngại vì chúng rất dễ sử dụng.

Nếu bạn soạn bài viết trong Blogspot, để đánh dấu "Blockquotes" đoạn văn bản nào đó, bạn chỉ cần bôi đen đánh dấu và click vào nút (") như hình dưới.

Nút này cũng có trong trình soạn thảo HTML, cũng rất dễ sử dụng như đã nêu trên, ngoài ra bạn cũng thể chọn đoạn văn bản cần "Blockquotes" bằng cách để đoạn văn bản của bạn trong tag <blockquotes>, giống như ở dưới:

<blockquote>Write your quotations here</blockquote>

 

Xác nhận định nghĩa  "block quotes" trong mẫu blog như thế nào?

Trong các mẫu blog (phần giữa của thẻ <b:skin> và </b:skin> ), bạn có thể tìm thấy nó giống như dưới:

blockquote {
margin:1em 20px;
}

Như bạn thấy, một số dòng lệnh trên xác nhận "Blockquotes" sẽ xuất hiện như thế nào khi bạn cho đăng bài viết của bạn. Theo mặc định, bất kỳ đoạn văn bản nào xuất hiện trong thẻ lệnh <blockquote> sẽ được hiển thị canh lề bên trái. Và hầu hết các "Blockquotes" đều được xác định bời các lề margin để phân chia rõ ràng giữa các đoạn văn bản trích dẫn của chúng và phần văn bản của bài viết chính. Như các bạn thấy trong ví dụ trên.

Trong mẫu Blog của bạn, bạn có thể nhận thấy có ".post" được thêm vào trước "blockquote". Thành phần này sẽ "định nghĩa" xác nhận khối "Blockquotes" sẽ hiển thị như thế nào trong bài viết, tại vị trí mà người viết thêm khối trích dẫn. Tuy nhiên, nếu bạn dự định sử dụng các phần sidebar/footer/header theo phong cách dạng "Khối trích dẫn" thì bạn nên bỏ  ".post" để mọi Trích dẫn xuất hiện trong bài viết giống nhau trong bài viết.

Tuỳ chỉnh để thực hiện một vài phong cách "trích dẫn" mới

Trong phần tiếp theo, tôi xin trình bày với các bạn tuỳ biến thông thường hay được sử dụng để các khối trích dẫn của bạn khác biệt so với mẫu mặc định, đó là: Tuỳ biến  borders, backgrounds và font styles.

Borders

Thêm khung borders để sử dụng trong Khối trích dẫn để tạo ảnh hưởng về tác động bằng trực giác, nó sẽ phân chia rõ ràng giữa khối trích dẫn và bài viết. Cách thông thường nhất để thêm Border cho dòng trích dẫn là thêm dòng mã lệnh màu đỏ như dưới:

blockquote {
margin:1em 20px;
border: 1px solid #000000;
padding: 5px;
}

Khi đã thêm dòng định nghĩa về border vào trong mẫu thì hiệu quả thực hiện như dưới:

Một  solid black border - Khung màu đen liền bao quanh khối trích dẫn được định nghĩa trên là: 1px (chiều rộng viền khung 1pixel),  solid (liền không rời) #000000 (màu đen). "padding" trong ví dụ này là khoảng cách từ vị trí văn bản tới lề khung viền.

Dưới đây là ví dụ khác về Khối trích dẫn khi thay đổi kiểu dáng về  border:

blockquote {
margin:1em 20px;
border: 3px dotted #ff0000;
padding: 10px;
}

Kết quả:

Viền bao quàn chấm đỏ có đọ rộng 3 pixels, khoảng cách với lề là 10 pixels

bạn có thể thử nghiệm để tạo các hiệu ứng khác về border với các thuộc tính của chúng kể cả về màu sắc. Các bạn có thể tham khảo về các thuộc tính của chúng tại Tizag's excellent tutorial.

Sử dụng Màu nền và hình ảnh

Bạn cũng có thể sử dụng sự kết hợp giữa Màu nền và hình ảnh để tạo ra một Khối trích dẫn theo định nghĩa của riêng bạn:

blockquote {
margin:1em 20px; background: #cccccc;
}

Hiệu ứng tạo ra kết quả như dưới:

Đây là ví dụ về khối trích dẫn sử dụng hiệu ứng màu nền

Ví dụ trên tôi lấy ví dụ với màu (#cccccc) màu xám, bạn thay đổi  màu nền sao cho phù hợp với màu sắc của mãu blog. Bạn cũng có thể thêm vào khoảng cách với lề (trong ví dụ trên không có).

Bạn cũng có thể sử dụng hình ảnh để thêm vào định nghĩa Khối trích dẫn như ví dụ này

Ví dụ này sử dụng hình ảnh kết hợp tạo Khối trích dẫn, bạn có thể tham khảo các lệnh dưới về tạo định nghĩa cho khối trích dẫn sử dụng hiệu ứng hình ảnh.

blockquote {
margin:1em 20px;
background: #dfdfdf url(http://bloggerbuster.com/images/blockquote-top.gif) top left no-repeat;
padding: 30px 10px 10px 10px;
}

Ngoài ra bạn có thể sử dụng hình ảnh dấu trích dẫn "quote marks" pha trộn màu nền để sử dụng như ví dụ dưới:

blockquote {
margin:1em 20px;
background: #e0e0e0 url(http://bloggerbuster.com/images/bg_blockquote.gif) top left no-repeat;
padding: 8px 8px 8px 65px;
}

Dựa vào các ví dụ trên bạn hãy tạo cho mình một mẫu về khối trích dẫn đẹp và nổi bật theo ý bạn.

Sừ dụng font chữ

Ngoài hai phương pháp nêu trên bạn có thể sử dụng kiểu dáng font chữ để tạo Khối trích dẫn, hoặc kết hợp cả 3 để tạo. Bạn sử dụng bằng cách định nghĩa kiểu dáng chữ đậm, chữ nghiêng... hoặc màu sắc khác biệt. Ví dụ:

Đây là ví dụ về khối trích dẫn sử dụng cả 3 kết hợp về phong cách font đó là chữ đậm, nghiêng và màu đỏ...

Để tạo ra hiệu ứng đó bạn có thể tham khảo dòng dưới:

blockquote {
margin:1em 20px;
font-weight; bold;
font-style: italic; color: #ff0000;
}

Trên đây là các phương thức về khối định nghĩa mà tôi học được từ blog của Armanda, áp dụng với blog của mình (phattrienso) thành công nên đã dịch và giới thiệu với các bạn để các bạn tham khảo. hy vọng hữu ích với bạnn, và cũng rất mong 1 lời góp ý động viên của các bạn.

Nguồn tham khảo tại: http://www.bloggerbuster.com

Share on Facebook Share on Twitter Share on Google Plus

About Chinhnd

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.