Hướng dẫn tạo khung BlockQuote đơn giản trong bài viết

Để thêm phần hấp dẫn hơn trong mắt người đọc nội dung bài viết trên Blog của bạn nên hôm nay Giới thông tin sẽ hướng dẫn các bạn tạo khung BlockQuote đơn giản trong bài viết để làm cơ sở nền cho bạn có thể tìm hiểu thêm và tạo ra nhiều khung BlockQuote thật đẹp, thật bắt mắt để thu hút người đọc nhiều hơn.

Tạo một khung BlockQuote đơn giản cho bài viết Blogspot

Đầu tiên, bạn cần phải tìm hiểu mục đích của BlockQuote là gì?

BlockQuote là 1 đoạn văn bản trong bài viết, nhưng đây là đoạn văn cần được nổi bật trong nội dung và thường thì BlockQuote được sử dụng cho một số mục đích như: Tạo đoạn trích dẫn, Bài tóm tắt nội dung chủ đề chính cũng có thể là làm nổi bật nội dung hướng dẫn cho người đọc thực hiện theo.

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?

Các bước tùy chỉnh BlockQuote trong nội dung bài viết Blogger

Bước 1: Bạn cần đăng nhập vào trình quản lý Blogger của bạn.

Trình quản lý Blogger

Bước 2: Chọn vào Mẫu và chọn tiếp Chỉnh sửa HTML

Vào chỉnh sửa Code cho Template Blogger

Bước 3: Tìm kiếm đoạn code ]]></b:skin>

Tìm kiếm tới vị trí đoạn code ]]></b:skin>

Bước 4: Dán đoạn code bên dưới vào phía 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;

}

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é.

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.

 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.

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 đã kết thúc.

Chúc bạn thực hiện thành công theo hướng dẫn.

Xem thêm: Hướng dẫn cách hiển thị profile G+ trên google search