Drop Cap chữ cái đầu tiên của bài viết trên Blogger

Drop Cap là thuật ngữ chỉ việc tạo chữ đầu tiên của đoạn văn lớn hơn bình thường và lấn xuống một vài dòng trong đoạn văn. Nếu bạn thường xuyên đọc sách bào thì bạn sẽ thấy rất nhiều Drop Cap này. Hôm nay mình xin hướng dẫn các bạn đưa hiệu ứng Drop Cap phổ biến này vào mỗi bài viết tại Blogger bằng cách sử dụng CSS đơn giản.

Drop Cap chữ cái đầu tiên của bài viết trên Blogger

Bước 1: Đăng nhập vào Blogger >> Mẫu >> Chỉnh sửa HTML

Bước 2: Tìm đến thẻ ]]></b:skin> và thêm đoạn CSS sau vào bên trên

p:first-letter {
display:block;
margin:5px 0 0 5px;
float:left;
color:#0033CC;
font-size:60px;
font-family:Georgia;
}

bạn có thể chỉnh sửa màu chữ, cỡ chữ, và kiểu chữ ở đoạn CSS trên.

Bước 3:  Tìm đến toàn bộ thẻ

<data:post.body/>

thêm cặp thẻ p vào đó (nếu có rồi không cần phải thêm nữa)

<p><data:post.body/></p>

Bước 4: Lưu lại giao diện hiện tại.

Đơn giản chỉ với vài dòng css nhỏ nhắn và xinh xắn bạn đã thành công thêm Drop Cap cho toàn bộ bài viết trên blog của bạn. Thủ thuật này không những không làm ảnh hưởng đến tốc độ tải trang mà còn hỗ trợ cho bạn nhiều tùy chỉnh nữa.