Thu gọn tiêu đề bài viết trên WordPress, Blogspot bằng CSS
Như tiêu đề thì hôm nay mình chia sẻ đến các bạn cách làm cho tiêu đề bài viết chỉ hiển thị 02 dòng trên WordPress (Blogspot luôn), nó còn có cách gọi khác là thu gọn hoặc rút gọn tiêu đề bằng CSS.
Tính ứng dụng, hay thủ thuật này nó có ích lợi gì ?
Đọc tiêu đề nghe có vẻ nó được dành riêng cho WordPress nhưng mà không, mọi người có thể thực hiện trên Blogspot hoặc web code tay cũng đều được, vì nó đơn giản là một thủ thuật với CSS ấy mà.
Các bạn có thể áp dụng thủ thuật này ở những chỗ như: tiêu đề bài viết trên trang chủ, recent post (bài viết gần đây), popular post (bài đăng phổ biến), recent comment (bình luận gần đây),…
Tác dụng hay ích lợi của nó cũng tùy thuộc vào quan điểm thẩm mỹ của bạn, cũng có thể bạn thích hoặc không nhưng đối với mình thì nó có lợi như sau:
- Cắt gọn những tiêu đề quá dài so với mặt bằng chung để cái danh sách nó được đều và chuyên nghiệp hơn;
- Tiêu đề bị khuất mất một đoạn cũng có thể gây tò mò với người đọc, họ cũng có thể click vào xem xem rốt cuộc cái bài đó nó có tiêu đề gì :v
Cách thu gọn tiêu đề bài viết trên WordPress bằng CSS
Như ở trên mình có nói là nó dành cho tất cả các loại web chứ không riêng gì WordPress, ở đây mình áp dụng trên WordPress nên sẽ làm như sau:
Bước 1: Tìm ID hoặc class của nhóm tiêu đề bạn muốn thu gọn, ví dụ ở đây mình muốn thu gọn tiêu đề của danh sách bài viết mới trên trang chủ của Hocban.vn thì mình tìm đến class:
.widget-category-posts .small-post .entry-title
Bước 2: Thêm vào bên dưới nó đoạn CSS sau (đã bao gồm class ở trên luôn) là tiêu đề nó được rút gọn rồi đấy:
.widget-category-posts .small-post .entry-title { text-overflow: ellipsis; overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
Trong đó, cái dòng cuối cùng -webkit-line-clamp: 2;
thì số 2 tức là số dòng tối đa mà tiêu đề sẽ được rút gọn.
Tuy nhiên mình cũng chỉ áp dụng cái này trong một số kích thước màn hình thôi chứ không áp dụng hết. Phần tiêu đề bài viết này mình áp dụng cho recent comment là chính vì tên của người bình luận nó vô chừng, đủ kiểu dài ngắn khác nhau nên phải dùng nó để gọt lại bớt cho gọn.
Thực hiện trên Blogspot
Tương tự như đối WordPress, bạn cần xem ID / class cần thu gọn tiêu đề nó là gì, tiếp theo là truy cập vào phần tùy chỉnh nâng cao của Template >> tìm đến chỗ CSS bổ sung và thêm CSS tương tự như trên vào là được.
Như vậy là mình đã chia sẻ xong cách thu gọn tiêu đề bài viết trên WordPress rồi đấy, anh em cũng làm thử xem có đẹp hơn không nhé ! 😀
Bạn có thể làm riêng 1 bài hướng dẫn về blogspot ko?
Có nhiều bài ngắn gọn nhỏ nhỏ hay hay của bác Tịnh hay lên top google quá nhỉ, đang dev lại themes con web truyện, dạo quanh quanh kiếm hàng :))
Lượng truy cập Hocban.vn đến chủ yếu từ mấy bài viết đó đó bác. Chứ em lâu rồi ko đăng bài FB hay comment dạo các blog khác.
Thanks bạn. Trước nay vẫn khó chịu với tiêu đề dòng dài dòng ngắn. May mà có bài này.
Ò ò, lúc nãy tưởng bạn tự làm theme này. Theme mình cũng sửa lại từ theme Smartline của Themezee. Dạo này cộng đồng chơi blog thấy anh em im ru, chủ yếu tập trung quẩy ở một số blog như Canhme và Facebook. Bạn có ý tưởng gì để cho nó sôi động lại trên các blog không nhỉ 😀
Bạn có thể xem theme Bimber trên themeforest đó. Mình đang sử dụng theme này rồi tùy chỉnh lại để hợp với mình luôn.
Theme blog trên là bạn tự thiết kế luôn à ?
Có. Blog của mình đây: cunglaptrinh.com
Thế bạn có viết blog cá nhân không ?
Không bạn. Web công ty thôi.
Nếu web của bạn là Homedy kia thì nó quá chuyên nghiệp rồi 😀
Cho mình hỏi để tạo một hộp box ngoài trang chủ để thông báo một việc gì đó. Ví dụ như: thay đổi tên miền thì nên dùng đoạn code hay plugin nào? Cảm ơn.
Cái này nếu mà bác làm kiểu thông báo trước kiểu lưu ý thì có thể tạo một cái widget ngoài trang chủ, rồi soạn văn bản, đổi màu chữ cho nó sặc sỡ lên là được. Hoặc cũng có thể làm như bên Sidebar của Hocban.vn cũng được.
Các mẫu cho bác đây, dán vào widget text ở chế độ soạn HTML, sau đó chọn chế độ Visual edit cho dễ sửa nhé !
Hiện em dùng lệnh này -webkit-line-clamp: 2; cho web nhưng khi xem bằng firefox thì lệnh này không được áp dụng, nó báo fail? Giờ sửa thế nào bác?
Nó có cái phần CSS cho trình duyệt nữa, em thì chưa có mần đến phần đó, bác đăng chi tiết link demo lên nhóm này để được hỗ trợ nhé !
https://www.facebook.com/groups/Wordpresscoban/
id thì thay bằng dấu chấm (.) còn class thay bằng dấu thăng (#) sao nhỉ chú
Ngược lại nghen bác, bác học HTML CSS theo 2 serie trên Hocban.vn nhé !
Dạo này không thấy bạn ra bài mới. Bạn dùng gói hosting nào của bên AZDIGI vậy?
Em nghỉ viết 22 ngày đó bác 😀 Em dùng gói 20GB bên AZDIGI nhé bác !
bạn nhiều site phết.
Haha, hiện tại em chỉ có site Hocban.vn với Tịnh Nguyễn Blog thôi bác, còn lại là web demo đó, ko phải web đang xài đâu :v
Thì 3 site là nhiều rồi. Hihi
Em nhiều site á bác ? :v
Ui cha. Mình thì mình cứ để nguyên thôi. Ý kiến riêng của mình là wordpress đã thiết kế để làm sao tiêu đề bài viết ở mức độ vừa phải giữa các ký tự cho chuẩn SEO thôi
Dù sao cũng học tập cách viết của bạn
Thanks!
Haha, cái này nó thu gọn tiêu đề trong danh sách bài viết chứ để nó đẹp hơn chứ ko liên quan gì đến SEO hết á 😀
Công nhận trang bác tịnh load nhanh thật !
Mới chuyển host qua bên AZDIGI đó Phước ĐT :v
Mới đổi sang hosting mới thấy nhanh phết đấy bác 😀
Hề hề, xài cũng được phết bác ạ :p dạo này em mắc quá không viết bài với đi chém gió với anh em được 😀
Ít bình loạn quá nạ, dẫy lên nào ace ê :v
Không, cho cái site chia sẻ theme WordPress ấy mà :v Sưu tầm được bao nhiêu theme đẹp mà ko giới thiệu anh em thì cũng phí :v
Quào, dâm cho blog.hocban à :3 định làm chủ đề gì đó?
Ko, sửa theme cho site mới. Mà theme ngon nhiều chức năng quá nên mần hơi bị lâu :v
Đang làm cái dâm (theme) khác cho em nó à? :3
Dạo này Tịnh Nguyễn bỏ bê con Hocban.vn cũng tội nghiệp ghê, do đang bận làm một số thứ nên ko dành nhiều thời gian cho nó được, xong vụ này là sẽ cho nó quẩy lên 😀
Ơ blog bác không có reply cho cấp thứ 2 à? k thấy nút trả lời đâu
Có 02 cấp bình luận à Phan Hùng, hôm có viết một bài về lý do chọn 02 cấp comment, anh em tham khảo qua nhé !
Cám ơn bạn về kiến thức này. Mình đang tìm hiểu thêm về css.
Khà khà, em cũng có tài liệu học CSS cho người mới (dân không chuyên) bác có yêu thích thì đọc thử nhé !
Học CSS Cơ Bản
Trước cái thời e làm WAPSITE có sử dụng nhưng chuyển qua web thì thôi rồi 😀
Vì trên điện thoại nên phải giới hạn tiêu đề lại đúng không nhờ ? Dạo trước cái recent comments của Hocban.vn cái dài cái ngắn nhìn rất mất cân đối, nhờ cái này cũng đỡ hơn 😀