Cách tạo khung blockquote đẹp cho bài đăng blogger

Một đoạn trích dẫn hay còn gọi là blockquote sẽ giúp cho bài đăng thêm sinh động, thuyết phục. Tuy nhiên các bạn thường bỏ qua mục này do mục trích dẫn mặc định của blog trông hơi bị nhàm chán.

Ở bài này mình sẽ hướng dẫn với các bạn một mẹo rất nhỏ mà cực kỳ hữu ích cho các bạn để các bạn có thể tùy chỉnh khung blockquote trông đẹp mắt và hấp dẫn hơn, đồng thời cũng sẽ giúp cho blog trông chuyên nghiệp và đáng tin cậy hơn nhiều lần nhé.

Nếu các bạn biết tùy biến thì đoạn trích dẫn có thể dùng làm khung chứa code, hay hightlight đoạn văn nổi bật nhất của mình, hay cũng có thể làm đoạn tóm tắt ý đắt giá nhất phần cuối bài giúp độc giả dễ nhớ hơn nội dung mình vừa đọc

Phần demo như bên trên cho các bạn hình dung trước một kiểu tùy chỉnh đoạn trích dẫn cho blog của mình. Khi các bạn đã cài vào blog, thì các bạn có thể chỉnh theo ý thích và nội dung để pù hợp với blog cảu các bạn

Đoạn code nhỏ gọn và không dính đến đoạn css chính của template nên các bạn cứ yên tâm sẽ chẳng ảnh hưởng đến tốc độ tải trang của blog các bạn hết

1. Mẫu blockquote mặc định của blog

Mỗi một blog được xây dựng từ Blogger đều được hỗ trợ sẵn BlockQuote nhưng mặc định được thiết kế vô cùng đơn giản chỉ là 1 khoản trắng thụt vào đầu dòng tương tự như tính năng của nút Tab trong định dạng văn bản Word. Tất nhiên rồi, chỉ như vậy thôi thì chưa thể làm nổi bật được nội dung mà bạn muốn truyền tải rồi phải không nào?

Kiểu khung trích dẫn khá nhàm chán và không hấp dẫn cho bài đăng

2. Tạo blockquote tùy biến đẹp

Các bạn chỉ việc chép hết đoạn code bên dưới vào và dán nagy bên trên trên dòng code ]]></b:skin>:

.post blockquote {
border-style:solid;
border-color:#066bc7;
border-width:2px;
padding:25px;
background:#F0FFF0;
max-height:200px;
oveflow:auto;
}

Lúc này các bạn chỉ cần lưu template Html lại là xong nhé
Khi viết bài, các bạn chỉ việc bôi đen nội dung cần trích dẫn rồi nhấp vào nút tạo blockquote ở menu phía trên. Đoạn trích dẫn sẽ được tự động cập nhật theo kiểu mới khi bạn publish bài đăng xong

Nhấp vào nút tạo blockquote ở menu phía trên để tạo nhanh một dòng đăng trích dẫn

3. Tùy biến các thông số

Dán đoạn code tạo khung BlockQuote vào
* Lưu ý: Bạn có thể tùy chỉnh những thông số bên trong đoạn code vừa dán vào sao cho bạn thấy hợp lý với trang web của bạn nhất nhé.
Giải thích những thông số trong đoạn code:

border-style:solid; 

Đây là đoạn code hiển thị kiểu định dạng viền khung. Viền khung có các kiểu định dạng sau đây: dotted, dashed, solid, double, groove, ridge, inset, outset bạn có thể chọn khung đẹp nhất đối với bạn nhé. Ở phần demo trên bài mình dùng kiểu dotted, với độ rộng khung viền là 2.5 px

Một lưu ý nhỏ là các bạn có thể tạo khung viền tại một cạnh nào đó trên dòng trích dẫn. Ví dụ như :  border-left:solid; tức là chỉ đóng viền cạnh trái dòng trích dẫn mà thôi, thay vì đóng viền hết cả 4 khung

border-color:#066bc7;

Đây là đoạn code chọn màu cho viền khung. Bạn có thể lên Google tìm và tra bảng màu để chọn màu mà bạn thích. Hoặc các bạn cũng có thể tham khảo bài : cách chọn mã màu cho blogspot để quyết định tông màu đẹp phù hợp cho blog của các bạn nhé

 border-width:2px;

Đây là đoạn code thể hiện kích thước hay thường gọi là độ dày của viền khung.

padding:25px;

Khoản cách giữa phần nội dung với 4 cạnh của khung.

background:#F0FFF0; 

 Đây là tùy chọn màu nền Background cho đoạn trích dẫn

max-height:200px; 

Cuối cùng là thông số độ rộng của toàn khung hiển thị trong phần nội dung bài viết của bạn.



Như vậy là hướng dẫn tạo khung BlockQuote trong nội dung bài viết Blogger đã xong nhé
Chúc bạn thực hiện thành công mẫu trích dẫn đẹp cho blog của mình nhé