Ẩn hình ảnh ở đầu bài viết Blogger

Hôm nay thì mình xin giới thiệu đến các bạn một thủ thuật mình đang sử dụng cho blog hiện tại ẩn hình ảnh ở đầu bài viết. Công dụng của nó là gì? đây là mẹo nhỏ giúp các bạn đặt một ảnh khác ở trang chủ nhờ việc ẩn đi hình ảnh đầu tiên của bài viết.

Giải thích thêm cách thức hoạt động của nó như này, thủ thuật này sử dụng CSS, sẽ ẩn tự động hình ảnh đầu tiên nhưng chỉ khi nó nằm ở trên cùng ở bài viết, có nghĩa là không có bất cứ chữ hoặc thứ gì ở trên nó.

Mặc dù mình thấy thủ thuật này tương đối đơn giản nhưng có cảm giác là nó rất là hiệu quả đối với mình. Việc để hình ảnh ở trên cùng bài viết mà không có chữ gì hết (nếu hình không nằm float ở một bên) thì với mình nhìn bài viết ở đâu tương đối là hơi kì. Thì tận dụng không làm cái đó thì mình nghĩ không sử dụng ẩn nó đi luôn cho lành.

Ngoài ra cái lý do chính là, bạn có biết là những hình ảnh bạn tìm ở trên Google nếu như không tùy chỉnh về bản quyền, thì hầu hết những hình ảnh mà bạn tìm thấy bạn không có quyền sử dụng nó. Đây cũng là một trong những lý do lớn nhất mà rất nhiều người có nội dụng tốt những vẫn không đăng ký được Google Adsense. Do đó thì có "MƯỢN" thì để xài cho người ta nhìn thấy ở trang chủ thôi

Không dài dòng nữa, chúng ta tiến vào thực hiện công việc thôi.

Ẩn hình ảnh ở đầu bài viết Blogger

Giải thích luôn, khi chúng ta tải thêm một ảnh mới và thêm nó vào bài viết bằng công cụ có sẵn ở khung soạn thảo, thì hình ảnh này sẽ được tự chèn bên ngoài nó một thẻ div có class là separator, thì lợi dụng điểm này thì mình sẽ viết ra một dòng css ẩn đi cái thẻ div đầu tiên ngay sau phần thẻ chứa bài viết. 

Như vậy việc bạn cần làm chỉ là vào "Mẫu » Chỉnh sửa HTML" chèn đoạn css này lên trên thẻ ]]></b:skin>

.post-body .separator:first-child { display: none !important;}

hầu hết các template bây giờ, cái thẻ div bao quanh nội dung của bài viết có tên là post-body, nên mình hướng dẫn chung luôn, nếu template của bạn khác thì thay nó bằng cái khác nhé, còn không biết thì cứ comment để lại địa chỉ blog ở dưới cho mình.

Lời kết

Như vậy công việc bạn phải làm hết sức đơn giản, và đoạn code mà mình cung cấp nó còn đơn giản tàn bạo nữa. Bây giờ nếu như bạn muốn đặt một hình ảnh thumbnail mặc định bất kì thế nào cho bài viết của mình chỉ cần tải nó lên và đặt tại đầu bài viết là mọi chuyện sẽ ổn