Tạo hiệu ứng Drop Cap cho bài viết trong Blogger bằng CSS3

How to Create Drop Caps (Big First Letter) in Blogger

Drop Cap là thuật ngữ chỉ việc chữ cái đầu dòng, đầu đoạn văn trình bày lớn hơn các chữ cái khác. Nếu bạn thường đọc báo giấy hoặc sử dụng Microsoft Office chắc hẳn bạn đã rất quen thuộc với thuật ngữ này.

Hôm nay Iris Tips sẽ chia sẻ cho các bạn cách tạo hiệu ứng Drop Cap cho các bài viết trong Blogger bằng CSS3 theo 2 cách sau đây.

Cách 1: Thủ công

1Thường thì trong template đã tích hợp sẵn tiện ích này, bạn chỉ việc mang ra mà dùng thôi bằng cách mỗi khi viết bài bạn hãy chuyển sang tab HTML và dán đoạn code bên dưới vào

<span class="first-letter">Ký tự cần Drop Cap</span>

Ví dụ: Bạn cần viết chữ Drop Cap với ký tự "D" lớn hơn thì bạn hãy viết <span class="first-letter">D</span>rop cap

2Nếu trong template bạn không có sẵn thì bạn thêm dòng CSS này vào trước thẻ ]]></b:skin>

.first-letter{float:left;color:#00acd6;font-size:75px;line-height:60px;padding-top:4px;padding-right:8px;padding-left:3px;font-family:Georgia}

Cách 2: Tự động

1Nếu bạn không muốn mỗi bài đăng phải thêm đoạn code trên thì hãy dùng cách này. Cách này sẽ tự động tạo hiệu ứng Drop Cap cho ký tự đầu tiên trong bài viết của bạn.

2Bạn hãy vào Chủ đề >> Chỉnh sửa HTML và dán đoạn CSS bên dưới vào trước thẻ ]]></b:skin>

.post-body:first-letter{display:block;margin:0px;padding:0px;float:left;line-height:40px;color:#00acd6;font-size:50px;}

3Vậy là xong rồi đấy. Đây là một hiệu ứng khá đẹp và cũng dễ thực hiện để trang trí các bài viết của bạn trong Blogger thêm sinh động phải không nào!

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm