Cách Thêm Dummy Text (Văn Bản Mẫu) Vào Blogger Bằng CSS

Khi bạn thiết kế theme cho Blogger, viết bài hướng dẫn (tutorial) về code, hay đơn giản là muốn thử nghiệm một bố cục mới, việc có một đoạn văn bản mẫu (dummy text) là cực kỳ cần thiết. Nó giúp demo của bạn trông đầy đặn, chuyên nghiệp hơn thay vì để trống.

Việc sử dụng văn bản thật đôi khi rất rườm rà và không trực quan. Trong bài viết này, TruongDevs sẽ hướng dẫn bạn cách thêm dummy text vào Blogger chỉ bằng vài dòng CSS đơn giản, giúp bạn tạo ra các khối văn bản giả lập nhanh chóng.

Cách thêm Dummy Text (văn bản mẫu) vào Blogger bằng CSS

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

Tại sao nên dùng Dummy Text bằng CSS?

Nói nôm na, dummy text (hay văn bản giả) là một đoạn văn bản giữ chỗ, không có ý nghĩa cụ thể. Nó được dùng để lấp đầy không gian trong một thiết kế để người xem hình dung được bố cục khi có nội dung thật.

Thay vì mỗi lần demo lại phải lên mạng copy "Lorem Ipsum" nhàm chán, việc tạo dummy text bằng CSS có lợi thế hơn hẳn:

   
• Nhanh gọn: Chỉ cần chèn một class HTML đơn giản.
   
• Sạch sẽ: Không làm "bẩn" code HTML hay nội dung thật của bài viết.
   
• Chuyên nghiệp: Giúp khu vực demo của bạn trông trực quan, đồng đều và dễ hình dung.
   
• Linh hoạt: Dễ dàng tạo ra các đoạn văn bản có độ dài khác nhau.

Preview

Hướng dẫn thêm Dummy Text vào Blogger (2 Kiểu)

Mình sẽ chia sẻ 2 style CSS phổ biến nhất mà bạn có thể dùng. Bạn chỉ cần chọn một style mà bạn thấy phù hợp, dán vào theme và bắt đầu sử dụng.

   
1. Bước 1: Đăng nhập vào Blogger Dashboard.
   
2. Bước 2: Đi đến mục Chủ đề (Theme) > Nhấp vào mũi tên > Chọn Chỉnh sửa HTML (Edit HTML).
   
3. Bước 3: Nhấn Ctrl + F (hoặc Cmd + F trên Mac) để mở hộp tìm kiếm và tìm chính xác thẻ ]]></b:skin>.
   
4. Bước 4: Dán đoạn code CSS (Style 1 hoặc Style 2 bên dưới) ngay TRÊN thẻ ]]></b:skin> đó.
   
5. Bước 5: Lưu chủ đề lại.

Style 1: Các dòng văn bản nét mảnh (Cổ điển)

Đây là kiểu cổ điển, tạo ra các vạch xám mô phỏng các dòng văn bản. Rất nhẹ và hiệu quả, phù hợp với mọi loại theme.

Code CSS (Dán vào Theme)

/* Dummy Text Style 1 by TruongDevs */
.dummy-text { display: block; }
.dummy-text i { display: block; height: 16px; margin-bottom: 8px; background: #f2f1f7; border-radius: 2px; }
.dummy-text i.img { margin: 0 auto; max-width: 85%; height: 180px; border-radius: 10px; }

Cách sử dụng (Dán vào bài viết)

Khi viết bài, bạn chuyển sang chế độ Soạn HTML (HTML View) và dán code này vào nơi bạn muốn hiển thị văn bản mẫu:

<p class="dummy-text">
  <i style="margin-left:10%;"></i>
  <i></i>
  <i></i>
  <i style="width:30%;"></i>
</p>

<!-- Mẹo: Dùng thêm class "img" để tạo ảnh giả -->
<p class="dummy-text">
  <i class="img"></i>
</p>

Style 2: Các dòng văn bản mờ (Hiện đại)

Kiểu này sử dụng độ mờ rgba(0,0,0,0.05) để tạo hiệu ứng, nhìn hiện đại và "phiêu" hơn một chút. Chiều cao của nó sẽ tự động điều chỉnh theo cỡ chữ (1.5em).

Code CSS (Dán vào Theme)

/* Dummy Text Style 2 by TruongDevs */
.dummyText i { display: block; background-color: rgba(0,0,0,0.05); margin-bottom: 10px; height: 1.5em; border-radius: 2px;}
.dummyText i.img { height: auto; min-height: 200px; margin: 2rem 10%; }

Cách sử dụng (Dán vào bài viết)

Tương tự như trên, chuyển sang Soạn HTML và dán code:

<p class="dummyText">
  <i style="margin-left:10%;"></i>
  <i></i>
  <i></i>
  <i style="width:30%;"></i>
</p>

<!-- Dùng class "img" để tạo ảnh giả -->
<p class="dummyText">
  <i class="img"></i>
</p>

Mẹo nhỏ từ TruongDevs

Mẹo nhỏ từ TruongDevs: Bạn hoàn toàn có thể tùy chỉnh lại các thuộc tính trong CSS cho phù hợp với blog của mình. Ví dụ:

• Thay đổi màu background (ví dụ: #e0e0e0) cho đậm hơn.
• Thay đổi height (ví dụ: 14px) và margin-bottom (ví dụ: 10px) để điều chỉnh khoảng cách dòng.
• Ở Style 2, bạn có thể đổi background-color: rgba(0,0,0,0.05) thành màu biến CSS của theme (ví dụ: var(--text-color-light)) để nó tự động đổi màu theo chế độ Sáng/Tối.

Đừng ngại thử nghiệm để tìm ra kiểu dáng phù hợp nhất với thiết kế của bạn nhé!

Kết luận

Vậy là xong! Chỉ với vài bước cơ bản và một đoạn code CSS ngắn, bạn đã có thể thêm dummy text vào Blogger một cách cực kỳ chuyên nghiệp. Kỹ thuật này đặc biệt hữu ích cho các bạn làm blogger Coder, designer, hay bất kỳ ai muốn trình bày demo bố cục một cách trực quan mà không tốn nhiều công sức.

TruongDevs hy vọng thủ thuật nhỏ này sẽ giúp ích cho công việc phát triển blog của bạn. Nếu bạn có bất kỳ câu hỏi nào hoặc có style CSS nào hay hơn, đừng ngần ngại để lại bình luận bên dưới nhé. Chúc bạn thành công!

0.0/5.0

0 ratings

Thank you for your rating!

5

0 votes

4

0 votes

3

0 votes

2

0 votes

1

0 votes