Khung viền đẹp chứa nội dung cho blog chuyên nghiệp

{tocify} $title = {Mục lục bài viết}

Các dạng hiển thị nội dung HTML đẹp mắt cho Blogspot

1. Dạng 1: Khung nội dung có viền tùy chỉnh

Code:

<div style="border: 2px solid #008000; padding: 8px; word-wrap: break-word;">
  CHÈN NỘI DUNG VÀO ĐÂY
</div>

Demo:

Hãy đến với trang https://thuviengd.blogspot.com – nơi tổng hợp tài liệu phổ thông, các dạng bài tập ôn thi THPT Quốc gia và tuyển sinh lớp 10.

Các Dạng Viền Trong CSS

Dưới đây là các ví dụ trực tiếp về các dạng viền thường gặp trong CSS như solid, ridge, inset, outset,...

Dạng viền solid (đường liền nét)

Viền kiểu solid

Dạng viền ridge (chóp nổi)

Viền kiểu ridge

Dạng viền groove (chóp chìm)

Viền kiểu groove

Dạng viền inset (bóng đổ bên trong)

Viền kiểu inset

Dạng viền outset (bóng đổ bên ngoài)

Viền kiểu outset

Tham khảo bảng màu tại: Các hàm liệt kê màu và ColorFade, ColorValue và RGBA

Ví dụ có thêm bo tròn góc (border-radius):

<div style="border-radius: 25px; border: 2px solid #008000; padding: 8px;">
  CHÈN NỘI DUNG VÀO ĐÂY
</div>

CHÈN NỘI DUNG VÀO ĐÂY

---

2. Dạng 2: Khung nội dung có thanh cuộn

Code:

<div style="border: 2px solid #008000; max-height: 150px; overflow: auto; padding: 8px;">
  Đặt nội dung vào đây
</div>

Demo:

Hãy đến với trang thuviengd.blogspot.com – nơi chia sẻ nhiều tài liệu học tập cho học sinh THCS và THPT.

---

3. Dạng 3: Sử dụng thẻ <pre> để giữ định dạng gốc

Code:

<pre style="background-color: white; border: 0px; color: #333; font-size: 16px; overflow: auto;">
  {đặt nội dung bài viết}
</pre>

Demo:

Hãy đến với trang https://thuviengd.blogspot.com – nơi tổng hợp tài liệu phổ thông, 
dạng bài tập thi các môn khoa học tự nhiên, khoa học xã hội cho kỳ thi THPT Quốc gia.

---

4. Dạng 4: Khung nội dung có nút chọn tất cả

Code:

<form name="MyTextBoxForm">
  <input type="button" value="Chọn tất cả" onclick="this.form.MyTextBox.focus();this.form.MyTextBox.select();" />
  <textarea name="MyTextBox" rows="4" cols="60" style="background: #eee; border: 1px dashed #a0c4ea; color: #464646; width: 100%;">
    Đây là nội dung hiển thị
  </textarea>
</form>

Demo:

Đây là nội dung hiển thị

---

📌 Lời kết: Các dạng hiển thị nội dung HTML trên sẽ giúp bạn dễ dàng trình bày nội dung học tập, chia sẻ code hoặc viết blog một cách trực quan và đẹp mắt trên nền tảng Blogspot. Đừng quên tối ưu tốc độ tải trang và sử dụng đúng thẻ HTML hợp lý để tăng thứ hạng trên Google!