Đóng khung và tạo thanh trượt kéo cho bài viết trong blog

Đóng khung và tạo thanh trượt kéo cho bài viết trong blog

Xin chào các bạn. để một bài viết của các bạn được nhiều người biết đến .. thì không chỉ đến nội dung hay mà còn phải gọn đẹp nữa..

Vậy làm sao để nội dung bài viết blog được gọn đẹp ?

Hôm nay mình sẽ hướng dẫn mọi người cách làm thế nào để viết một bài viết gọn gàng trong khung và có thanh trượt giúp tiết kiệm diện tích chiều dài của blog của các bạn

Bước 1:
Tạo bài viết mới bằng cách vào Dashboard - Posting - New Post, chọn thẻ Edit HTMLvà dán code sau vào:

<div style="border: 1px solid red; padding: 10px;">

Bài viết

</div>

Bước 2:
Chuyển sang thẻ Compose: sẽ thấy có 1 khung bao quanh "Bài viết", lúc này đơn giản chỉ cần đưa nội dung cần thiết vào.
Ngược lại, ta cũng có thể soạn thảo bên thẻ Compose trước sau đó chuyển qua Edit HTML: thêm thẻ mở <div> ở trên và thẻ đóng </div> ở dưới bài viết là được.

Tùy biến:
Chúng ta có thể tùy biến các thuộc tính của dòng code này:

<div style="border: 1px solid red; padding: 10px;">

chẳng hạn như sau:

Color: có thể sử dụng các màu chuẩn như: white, red, black, lime, yellow, orange, aqua (như bài viết này)... hoặc sử dụng mã màu hex code (lựa màu tùy thích ở đây)

Width: độ dày đường khung, thường 1px là vừa.

Style: thường dùng là 'Solid', ta có thể thay đổi bằng các thược tính sau: dotted, dashed, double, groove, ridge, inset và outset

Padding: cần thiết để nội dung khỏi tràn đụng vào khung, có thể thay đổi các giá trị từ 0 đến 10px

Ngoài ra, ta có thể tùy biến thêm bằng cách đưa vào một số thuộc tính định dạng văn bản trong khung như:

Background-color: màu nền
Color: màu chữ, VD: color: orange; hoặc color: #6acfff;
Text-align: canh lề bài viết, có thể: left, center hay right.
Margin: tùy ý
Ví dụ:
<div style="border: 1px solid orange; color: aqua; margin: 10px 0; padding: 10px; text-align: center;">
Bài viết
</div>

Tạo thanh trượt trong bài viết cho blogger

Thủ thuật này khá đơn giản, khi đăng bài mới bạn để chế độ HTML và copy đoạn code phía dưới dán vào phía dưới khung soạn bài viết (xem hình)

Đoạn code đây:

<div style="border: 10px solid orange; color: aqua; margin: 10px 0; padding: 10px; text-align: left; height: 400px;

width: 620px;
overflow:auto;">
Nội dung bài viết của bạn ở đây
</div>

 

Bạn thay đổi các dòng lệnh màu đỏ theo ý của mình, trong đó:

border 10px: độ rộng của khung

solid orange: màu của khung (bạn có thể thay red, white, yellow, black, pink, blue, green....)

color aqua: màu của chữ (tương tự màu khung, bạn có thể thay red, yellow, orange, white, black, green, blue, pink...)

height: độ cao của khung (nếu vượt qua độ cao này sẽ có thanh trượt xuất hiện bên phải của khung)

Width: độ rộng của khung

Tiếp sau đó, bạn bấm vào thẻ VIẾT (cạnh thẻ HTML phía trên lúc nãy) để quay về viết bài như bình thường, cuối cùng bấm xuất bản và chiêm ngưỡng bài viết của mình nha.

Để tạo nhiều kiểu khung khác nhau bạn có thể thay đổi chữ solid (màu vàng) bằng các dòng chữ phía dưới:
dotted
dashed
solid
double
groove
inset
outset

Chúc bạn thành công