Tạo một Drop cap chỉ với css cho blogspot

Thủ thuật tạo một Drop cap tự động nhằm mục đích có được chữ cái đầu tiên to, kích thước lớn trong văn bản trên blogspot và chữ cái lớn đầu tiên này được trang trí đôi chút với đường viền, nền, màu sắc... đẹp mắt.

Thủ thuật này là hoàn toàn tự động cho cả blog khi ta viết bài mới. Nhưng với điều kiện dòng văn bản phải ở trước ảnh đầu tiên. Nếu văn bản ở sau ảnh đầu tiên thì có hướng dẫn cụ thể cuối bài này.
DEMO
Để cài đặt thủ thuật này ta cần thêm đoạn CSS sau vào trước thẻ ]]></b:skin> trong template:
.post-body:first-letter {
font-size:400%;
font-weight:bold;
font-family:Georgia,Serif;
float:left;
margin-right:10px;
line-height:60px;  
padding:0 5px;
text-shadow: 4px 4px 0 #566074, 7px 7px 0 #fff;
}
Lưu ý
- CSS trên nên đặt trong thẻ điều kiện chỉ ở trang bài viết.
- Thủ thuật này chỉ tự động khi chữ đầu tiên ở trước ảnh đại diện của bài viết nhưng thường ta hay post ảnh trước sau đó mới tới chữ nên thủ thuật này không làm việc. Vì vậy trường hợp chữ bắt đầu sau ảnh thì ta phải dùng mẫu sau:
Bên HTML ta dùng code sau
<div class='post-body'>Nội dung văn bản</div>
Để tránh có khoảng cách (khoảng trống) giữa chữ cái đầu tiên với chữ cái tiếp theo tại dòng trích dẫn (Snippet hay summary) trong phần tự động tóm tắt bài viết ngoài trang chủ thì phần "Nội dung văn bản" không được là chữ cái đầu tiên mà là 2 hay 3 dòng miễn sao nội dung đó phải có số ký tự nhiều hơn số ký tự đoạn trích dẫn ngoài trang chủ.
- Nếu chỉ có nhu cầu tạo Drop cap cho một số bài mà không cần cho cả blog thì bỏ css đó trực tiếp vào cuối bài viết theo mấu:
<style>
.post-body:first-letter {
font-size:400%;
font-weight:bold;
font-family:Georgia,Serif;
float:left;
margin-right:10px;
line-height:60px;  
padding:0 5px;
text-shadow: 4px 4px 0 #566074, 7px 7px 0 #fff;
}
</style>
- Ai có kiến thức về css thì có thể tùy biến nền, đường viền, màu sắc...cho lung linh hơn.
Chúc vui vẻ
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji