Như các bạn đã biết trong tiện ích Bài đăng phổ biến (Popularposts) của blogger có chức năng giúp bạn cho phép hiện thị ảnh thu nhỏ của bài viết. Tuy nhiên nó có nhược điểm là nó hiển thị toàn bộ hình ảnh của tất cả các bài đăng trong blogspot của bạn. Vậy vấn đề đặt ra ở đây là bạn chỉ muốn một bài nhất định hiển thị hình ảnh như chỉ muốn hiển thị ảnh của bài viết đầu tiên, hay chỉ hiển thị hình ảnh của bài viết cuối cùng trong tiện ích bài đăng phổ biến.
(Ảnh minh họa chỉ hiển thị ảnh thu nhỏ của bài viết đầu tiên trong tiện ích Popularposts của blogspot)
Bài viết này namkna sẽ hướng dẫn bạn làm điều đó chỉ với một đoạn CSS nhỏ (Bài viết được thực hiện theo yêu cầu của bạn Minh ngọc). Các bạn có thể yên tâm vì nó không làm ảnh hưởng đến tốc độ trang của bạn vì nó hoàn toàn từ CSS đơn giản thôi mà.
☼ Cách để hiển thị hình ảnh thu nhỏ (thumbnail) của bài viết bất kỳ trong tiện ích Popularposts của blogspot.
1. Đăng nhập vào blog.
2. Chọn mẫu (template)
3. Chọn Chỉnh sửa HTML (Edit HTML)
4. Dán đoạn mã bên dưới vào trước thẻ ]]></b:skin> trong mẫu của bạn:
/* Only show thumbnail ramdon post in popularposts of blogger http://namkna.blogspot.com/ */ /* thumbnail 1 */ #PopularPosts1 ul li:first-child .item-thumbnail{display:none} /* Thumbnail 2 */ #PopularPosts1 ul li:first-child + li .item-thumbnail{display:none} /* Thumbnail 5 */ #PopularPosts1 ul li:first-child + li + li + li + li .item-thumbnail{display:none} /* Thumbnail 3 */ #PopularPosts1 ul li:first-child + li + li .item-thumbnail{display:none} /* Thumbnail 4 */ #PopularPosts1 ul li:first-child + li + li + li .item-thumbnail{display:none} /* thumbnail 6 */ #PopularPosts1 ul li:first-child + li + li + li + li +li .item-thumbnail{display:none} /* thumbnail 7 */ #PopularPosts1 ul li:first-child + li + li + li + li + li +li .item-thumbnail{display:none} /* thumbnail 8 */ #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li .item-thumbnail{display:none} /* thumbnail 9 */ #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li .item-thumbnail{display:none} /* thumbnail 10 */ #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li .item-thumbnail{display:none}
» Tùy chỉnh code.
- Trong đoạn code trên mình đã đánh dấu vị trí hình ảnh của từng vị trí ảnh thumbnail. Nếu bạn muốn hiển thị ảnh thumbnail nào hiển thị thì bạn chỉ cần xóa đoạn đó đi là được.
- Ví dụ bạn muốn chỉ hiển thị ảnh thumbnail của bài viết đầu tiên trong tiện ích popularposts thì bạn xóa đoạn.
/* thumbnail 1 */ #PopularPosts1 ul li:first-child .item-thumbnail{display:none}
- Nếu bạn muốn chỉ thiện thị ảnh thu nhỏ thumbnail của bài viết cuối cùng trong tiện ích Popularposts thì bạn xóa đoạn thứ 10 như bên dưới:
/* thumbnail 10 */ #PopularPosts1 ul li:first-child + li + li + li + li + li + li + li +li +li .item-thumbnail{display:none}
- Nếu bạn muốn chỉ hiện thị hình ảnh thumbnail của bài viết thứ 3 từ trên xuống trong tiện ích Popularposts thì bạn xóa đoạn thứ 3 như bên dưới:
/* Thumbnail 3 */ #PopularPosts1 ul li:first-child + li + li .item-thumbnail{display:none}
Làm tương tự với những bài viết nào bạn muốn hiện thị thì hãy xóa đoạn code tương ứng của bài viết đó đi nha.
Cuối cùng hãy like nếu bài viết có ích và nhớ chia sẻ nó với mọi người để mọi người biết đến thủ thuật này nha.
Nhận xét
Bạn ơi làm cách nào để cho background của blog chỉ hiển thị ở bài viết mà không hiển thị ở trang chủ ko?
Trả lờiXóaBạn dán đoạn mã bên dưới vào sau thẻ ]]></b:skin>
Xóa<b:if cond='data:blog.pageType == "index"'>
<style>
Code css ở trang chủ, trang nhãn, và trang lưu trữ
</style>
<b:else/>
<style>
Code css ở trang bài viết
</style>
</b:if>
Nhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaChào bạn
Trả lờiXóaMình lớn tuổi và đang tập làm blogspot. Bạn hướng dẫn giúp mình cách tạo thumbnail cho tiêu đề tất cả các bài viết hiển thị nhé. Xin cám ơn.
Mình mới thêm các bài viết mới nó không hiển thị ảnh thumbnail, làm cách nào tự động hiện tiêu đề có ảnh thumb bạn giúp mình với nha, cám ơn.
Trả lờiXóaÝ bạn là thumbmail ở trang chủ hả. Nếu phần đó bạn chỉ cần tải ảnh trực tiếp lên blog và chọn một cách ở đây là được: XEM NGAY
Xóaảnh thumb dùng khi hiện trang chủ nó không tự co lại để full ảnh trong khung mà chỉ lấy 1 phần ảnh theo đủ diện tích khung @@! làm cách nào cho nó co lại được vậy AD? xin giúp đỡ
Trả lờiXóaBạn cho mình link trang đang bị lỗi đó nha. Mình vào trang 4truyentranh của bạn không thấy xuất hiện lỗi đó.
XóaNhận xét này đã bị quản trị viên blog xóa.
Trả lờiXóaanh nam ơi...cho mình hỏi tý..e tìm code để thêm tiện ích label dang thum cho trang chủ mà tìm ko được..anh chec giùm với...http://vectordohoa.blogspot.com
Trả lờiXóaBạn có thể tìm dạng bạn thích tại đây: : Xem và lựa chọn ngay
Xóa- Ps: label hiện tại không cho dán thêm hình ảnh thumbnail nên nếu muốn thêm ảnh bạn phải lam thủ công như bài này: : Thêm mô tả cho widget label của blogger
Tuy nhiên phải sửa những đoạn:
<span class="labeldesc"> - Đây là mô tả nhãn n</span>
thành:
<span class="labeldesc"> <img src="Link ảnh thumbnail"/></span>
Anh nam ơi cho em hỏi chút ảnh thumbnail bị mờ thì sửa thế nào vậy anh
Trả lờiXóaEm xem bài viết này nha: Tăng độ phân giải ảnh thumbnail của blogger
Xóacho hỏi namkna 1 tí, những bài đăng hiện ra ở trang chủ của blog có nhiều template phải upload ảnh trong bài đăng thì nó mới hiện thubnail, vậy làm thế nào để edit lại cho nó tự động lấy ảnh đầu tiên hoặc ngẫu nhiên vậy b? thanks ví dụ blog phim thì rất cần lấy ảnh thumbnail của bài đăng....nếu ko upload lên mà chỉ copy ảnh, hay up bằng url ảnh thì nó ko hiện,....
Trả lờiXóaChỉ cần ảnh đó được lưu trữ trên Picasa nó sẽ tự động lấy ảnh thumb dù bạn tải lên hay copy nha bạn.
XóaVấn đề là bạn nên tải ảnh lên trang của bạn để dùng lâu dài bởi những ảnh copy sẽ không được lâu nếu như người upload nó xoá nó đi nha bạn.
sao ảnh mình tại lên picasa rồi post mà nó ko hiện thumbnail nữa, trong khi đó trước giờ vẫn hiện ? đột nhiên hôm nay lại bị @_@
Trả lờiXóa