Drop cap là một trong những typography bạn thường thấy ở trên các báo. Nó là ký tự đầu tiên trong bài viết thường rất to, có màu nổi bật, và lấn xuống một vài dòng bên dưới. Cách thực hiện rất là đơn giản. Bạn chỉ việc thêm đoạn CSS sau vào file custom.css là được.
.custom .entry-content p:first-child:first-letter {font-size: 3.571em; line-height: 0.76em; padding: 0.04em 0.12em 0 0;color: #888; float: left;}
Đối với các theme khác bạn chỉ việc thay .custom .entry-content thành class mà bạn muốn áp dụng. Bạn có thể tùy chỉnh các hiệu ứng css cho nó nổi bật hơn.
Chúc các bạn vui với thủ thuật nhỏ này.
Bài viết liên quan
Bài viết cùng chuyên mục
{ 4 trackbacks }
{ 21 comments… read them below or add one }
Cám ơn nhé, hoạt động tốt, xin phép chuyển thể sang TA nhé
Tinh´s last blog ..TechCrunch Chính Thức Bị Hacked
Ok thôi bác
Cái của bác bị xung đột với thẻ Quote, khi mà quote thì chữ đầu tiên trong quote cũng thành drop cap luôn mới chán chứ.
Tinh´s last blog ..Yahoo: Công Cụ Tìm Kiếm Mặc Định Của Firefox Trên Ubuntu
Vâng, thế nên HT hạn chế sử dụng thẻ quote, chờ tìm cách khắc phục
Thôi kệ, có dùng là tốt rồi bác ạ, với cả bài viết chủ yêu cho mình viết ra, quote code thôi, lo gì các bác nhỉ
Mr.tỏi@blogtinhoc.info´s last blog ..[Thesis TUT] Chèn nút “Back to top” vào Thesis.
Thanks! Hy vọng HT viết thêm nhiều bài nữa về Thesis để Minh tổng hợp lại và chia sẻ cho anh em mê THesis
Minh@Minh Meo’s Blog´s last blog ..Trao giải Premium WordPress Hosting – Tết Âm Lịch contest tuần #4
HT nghèo ý tưởng lắm, hy vọng có thể tiếp tục viết những thủ thuật về thesis cho anh em
Dạo này em bỏ bê blog của mình lang thang vô blog của các bác học tập thủ thuật về thesis.
Em cũng vậy thôi. Đi lang thang tìm ý tưởng
Bác có thể chỉ giúp em cách tích hợp plugins notes vào TheSis.
Nó chỉ đơn giản là một đoạn CSS thôi, bạn cứ soi code là ra thôi
Cám ơn anh, để em xem thử, à, mình vẫn làm cho nó xuất hiện trong bài viết bằng cách như khi mình dùng plugin àh. vd nhé [note] Aloha[/note]
Phải thêm thủ công, nếu muốn dùng shortcode như vậy thì cần thêm đoạn code để thực hiện shortcode. Tham khảo các bài về shortcode trên HT Blog để viết riêng cho mình một đoạn. Nếu không được thì HT sẽ viết
Bác viết giúp em đi, em cám ơn nhiều. Em đã tậu được một tên miền mình thích rồi. Với thời hạn 5 năm mà giá cũng được, chỉ có điều em không thích trang quản lý. Cần khoảng bn để chuyển sang godaddy bác nhỉ.
cho em hỏi chút anh hutruc…
em thêm code vào thì chỉ thấy hiện dropcap ở ngoài trang chủ nhỉ?
chứ trong bài viết thì không thấy hiện.
+ em dùng cái blogussion…bài nào có thumb img thì không hiện dropcap
và em hỏi thêm chút….
sao em để link thumb img cho bài viết, khi click vào bài đó thì trên title lại vẫn có cái ảnh thumb nhỉ?
anh giúp xem giúp em nhé !
nghiadoi´s last blog ..Happy New Year
Do hiện thumb nên nó không chính xác nữa. Bỏ thumb đi là xong (VD HT chuyển cái GreetBox xuống dưới đấy)
ủa lạ nhỉ? em comment ở bài dropcap…tự dưng comment chuyển sang trang khác…anh xóa ở bài kia giúp em nhé !
” cho em hỏi chút anh hutruc…
em thêm code vào thì chỉ thấy hiện dropcap ở ngoài trang chủ nhỉ?
chứ trong bài viết thì không thấy hiện.
+ em dùng cái blogussion…bài nào có thumb img thì không hiện dropcap
và em hỏi thêm chút….
sao em để link thumb img cho bài viết, khi click vào bài đó thì trên title lại vẫn có cái ảnh thumb nhỉ?
anh giúp xem giúp em nhé !”
nghiadoi´s last blog ..Happy New Year
Đã fix rồi
Bạn tham khảo thêm bài http://hutruc.com/loai-bo-autop-trong-wordrpess/ nếu bị lỗi DropCap khi blockquote
1. Em thêm đoạn code sau vào file functíon.php của theme.
/****************************** Note ******************************/ function note($atts, $text = null) { return '<p class="note">'.$text.'</p>'; } add_shortcode("note", "note");Thêm đoạn CSS này vào style.css là oki:
Cách sử dụng: [note]nội dung cần ghi chú[/note]
P/s: Áp dụng trong bài viết (cái này chẳng nên áp dụng trong comment nhỉ)
2. Vụ này HT không rành lắm, bạn nên hỏi anh Tỉnh hoặc bác Minh mèo thì hay hơn