Thu gọn tiêu đề bài viết trên WordPress, Blogspot bằng CSS
Như tiêu đề đã nói, hôm nay mình chia sẻ với các bạn cách làm tiêu đề bài viết chỉ hiển thị 2 dòng trên WordPress (Blogspot luôn) hay còn gọi là thu gọn hay rút gọn tiêu đề bằng CSS.
Nội dung
Ứng dụng hoặc thủ thuật này có hữu ích không?
Đọc tiêu đề nghe có vẻ là dành riêng cho WordPress nhưng không, ai cũng có thể làm được trên Blogspot hoặc viết mã thủ công, vì đơn giản đó là một thủ thuật với CSS.
Bạn có thể áp dụng thủ thuật này ở những vị trí như: tiêu đề bài đăng trên trang chủ, bài đăng gần đây, bài đăng phổ biến, bình luận gần đây, …
Tác dụng hay lợi ích của nó còn phụ thuộc vào quan điểm thẩm mỹ của bạn, bạn có thể thích hoặc không, nhưng với tôi thì nó có lợi như sau:
- Lược bỏ những tiêu đề quá dài so với mặt bằng chung để danh sách trở nên đồng đều và chuyên nghiệp hơn;
Thu gọn tiêu đề bài đăng WordPress bằng CSS
- Tiêu đề bị thiếu một đoạn văn cũng có thể gây tò mò cho người đọc, họ cũng có thể click vào để xem tiêu đề của bài viết đó là gì: v
Cách thu nhỏ tiêu đề bài đăng trong WordPress với CSS
Như mình đã nói ở trên, nó dành cho tất cả các loại website chứ không riêng gì WordPress, ở đây mình áp dụng trên WordPress nên mình sẽ làm như sau:
Bước 1: Tìm ID hoặc class của nhóm tiêu đề mà 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ủ Hocban.vn thì mình tìm class:
.widget-category-posts .small-post .entry-title
Bước 2: Thêm vào bên dưới nó CSS sau (bao gồm cả lớp ở trên) là tiêu đề mà nó được rút gọn:
.widget-category-posts .small-post .entry-title {
text-overflow: ellipsis;
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
Trong đó, dòng cuối cùng -webkit-line-clamp: 2; thì số 2 là số dòng tối đa mà tiêu đề sẽ được rút gọn.
Trong trường hợp không thể áp dụng CSS ở trên, bạn có thể sử dụng đoạn mã sau:
.tieu-de {
display: inline-block;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
Tuy nhiên, tôi cũng chỉ áp dụng điều này ở một số kích thước màn hình chứ không phải tất cả. Tiêu đề bài viết này mà mình áp dụng cho các comment gần đây là do tên người comment nhiều vô kể, độ dài ngắn khác nhau nên phải dùng để rút gọn.
Thực hiện trên Blogspot
Tương tự với WordPress, bạn cần xem ID / class là gì để thu gọn tiêu đề, sau đó vào phần tùy chỉnh nâng cao của Template >> tìm CSS bổ sung và thêm CSS tương tự như trên. là được.
Như vậy là mình đã chia sẻ cách rút gọn tiêu đề bài viết trên WordPress, các bạn cùng làm thử xem có đẹp hơn không nhé! ????
Các bài báo được đề xuất
- Tự động thay đổi màu nền của đối tượng theo thời gian bằng cách sử dụng CSS
- Bộ sưu tập nút WordPress đẹp – Kiểu nút HTML và CSS
4/5 – (8 bình chọn)
Thông tin thêm
#Thu #gọn #tiêu #đề #bài #viết #trên #WordPress #Blogspot #bằng #CSS
[rule_3_plain]
#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.
MỤC LỤC NỘI DUNG1 Tính ứng dụng, hay thủ thuật này nó có ích lợi gì ?2 Cách thu gọn tiêu đề bài viết trên WordPress bằng CSS3 Thực hiện trên Blogspot4 Bài viết được đề xuất
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;
Thu gọn tiêu đề bài viết trên WordPress bằng CSS
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.
Trong trường hợp áp dụng CSS trên không được thì bạn sử dụng đoạn bên dưới đây nhé:
.tieu-de {
display: inline-block;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
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ài viết được đề xuất
Tự động thay đổi màu nền một đối tượng theo thời gian bằng CSS
Bộ sưu tập nút bấm đẹp cho WordPress – HTML and CSS Button Styles
4/5 – (8 votes)
window.addEventListener(‘DOMContentLoaded’, function() {
jQuery(document).ready(function( $) {
$.post( ‘https://hocban.vn/wp-admin/admin-ajax.php’, {action: ‘mts_view_count’, id: ‘6250’});
});
});
#Thu #gọn #tiêu #đề #bài #viết #trên #WordPress #Blogspot #bằng #CSS
[rule_2_plain]
#Thu #gọn #tiêu #đề #bài #viết #trên #WordPress #Blogspot #bằng #CSS
[rule_2_plain]
#Thu #gọn #tiêu #đề #bài #viết #trên #WordPress #Blogspot #bằng #CSS
[rule_3_plain]
#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.
MỤC LỤC NỘI DUNG1 Tính ứng dụng, hay thủ thuật này nó có ích lợi gì ?2 Cách thu gọn tiêu đề bài viết trên WordPress bằng CSS3 Thực hiện trên Blogspot4 Bài viết được đề xuất
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;
Thu gọn tiêu đề bài viết trên WordPress bằng CSS
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.
Trong trường hợp áp dụng CSS trên không được thì bạn sử dụng đoạn bên dưới đây nhé:
.tieu-de {
display: inline-block;
max-width: 220px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
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ài viết được đề xuất
Tự động thay đổi màu nền một đối tượng theo thời gian bằng CSS
Bộ sưu tập nút bấm đẹp cho WordPress – HTML and CSS Button Styles
4/5 – (8 votes)
window.addEventListener(‘DOMContentLoaded’, function() {
jQuery(document).ready(function( $) {
$.post( ‘https://hocban.vn/wp-admin/admin-ajax.php’, {action: ‘mts_view_count’, id: ‘6250’});
});
});
