☼ Và đây là cách thực hiện: - Mình sẽ hướng dẫn 2 cách: + Cách 1 : áp dụng code trược tiếp trên bài viết , với cách này bạn có thể cơ độn...

Thủ thuật tạo phần nổi bật trong bài viết

☼ Và đây là cách thực hiện:
- Mình sẽ hướng dẫn 2 cách:

+ Cách 1: áp dụng code trược tiếp trên bài viết, với cách này bạn có thể cơ động trong việc chỉnh sửa code.
+ Cách 2 : tạo thêm một class trong code CSS của template. với cách này sẽ không thuận tiện cho việc chỉnh sửa code (khi ta muốn tùy chỉnh màu, vị trí...), nhưng với cách này sẽ gọn gàng hơn, và có thể dùng nhiều lần mà không cần soạn lại code.

Tóm lại: Như đã nói ở trên, đối với cách 1 ta có thể tùy chỉnh code ngay trên bài viết, còn cách 2 muốn tùy chỉnh thì bạn phải vào trong code template. Ngoài ra ở cách 2, nếu bạn thay đổi các class đó sẽ làm ảnh hưởng đến tất cả các văn bản có sử dụng chung class đó. Vì thể nên tạo cố định các class này, ví dụ ta nên tạo 2 class bên trái và bên phải là đủ, và độ rộng nên lấy chuẩn luôn, không nên thay đổi lung tung. Tùy theo yêu cầu của mình mà hãy lựa chọn cho mình các cách thích hợp. Theo mình thấy thì cách 1 là 0k.

A. Cách 1: chèn code trực tiếp vào bài viết
- với cách này ta chỉ việc tạo 1 thẻ <div> rồi cho đoạn văn bản cần làm nổi bật vào nó là xong.
- Nó sẽ trông giống như bên dưới:

- Giải thích code :

+ border: #ccc 1px solid ; : đường viền
+ background: #CFE6F9; : màu nền
+ width: 150px; : độ rộng (chiều cao thì sẽ tự thay đổi tùy theo độ dài của đoạn văn bản của bạn)
+ float: right; : vị trí trong bài viết, có thể thay đổi trái(left) hoặc phải(right) tùy bạn.
+ text-align: justify; : căn giữa cho văn bản.
+ margin: 10px; , padding: 5px; : 2 đoạn code này để căn lề.

B. Cách 2: tạo thêm một class trong code CSS của template.
- Vào bố cục
- vào chỉnh sửa code HTML
- Chèn thêm đoạn code CSS bên dưới vào trước dòng ]]></b:skin>

.s-content {
border: #ccc 1px solid ;
margin: 10px;
padding: 5px;
background: #CFE6F9;
width: 150px;
float: right;
text-align: justify;
}

- Save template.

- Như vậy mỗi lần muốn làm nổi bật 1 đoạn văn bản nào đó, bạn chỉ việc thêm thẻ <div> như bên dưới:

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