Ảnh thu nhỏ của bài viết đầu tiên trong tiện ích Popularposts của Blogger

Ảnh thu nhỏ của bài viết đầu tiên trong tiện ích Popularposts của Blogger 1
– 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.
 
– 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ẻ ]]>

trong mẫu của bạn:

 
——————————————————————–
/* 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.
Đánh giá 5 sao bài viết:
[LN: 0 SS: 0]

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *