Ẩ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ì? Để giải thích câu hỏi này thì ta sẽ quay lại một bài viết ở trước kia, mình có hướng dẫn các bạn "Thay thế ảnh thumbnail hiện ở trang chủ", đâ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.

Ẩn hình ảnh ở đầu bài viết Blogger
Có thấy ai đây không?

Ở bài viết đó thì mình hướng dẫn bạn ẩn ảnh này một cách thủ công, và đó cũng là lý do mình lập ra bài này ẩn hình ảnh đầu tiên một cách tự động. 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 :D

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.

19 bình luận

  1. avatar says

    17:38 Ngày 25 tháng 09 năm 2014

    cậu ơi sao dưới cuối mỗi trang bài viết của mình nó lại có một lằn gạch ngang vậy(ở trang nào cũng bị), bạn cho hỏi bỏ nó bằng cách nào vậy?

  2. avatar says

    17:40 Ngày 25 tháng 09 năm 2014

    mình nghĩ nó là cái lằn để chứa nhãn của chuyên mục nên nếu bỏ thì ở trang chủ nó sẽ bị mất cái lằn đó, vậy có cách nào chỉ cho nó hiển thị ở trang chủ nhưng ko cho nó xuất hiện ở trang tĩnh ko vậy bạn?

  3. avatar says

    18:18 Ngày 25 tháng 09 năm 2014

    Trang tienganhgioi mình không thấy cái gạch ngang nào cả :D

  4. avatar says

    20:26 Ngày 25 tháng 09 năm 2014

    ở trang tĩnh ấy bạn à, không phải ở trang bài viết đâu
    Bạn xem thử trang này đi TẠI ĐÂY
    Bạn kéo xuống đến cuối bài viết sẽ thấy ngay :v

  5. avatar says

    20:34 Ngày 25 tháng 09 năm 2014

    Chèn cái này lên trên thẻ </head> là giải quyết xong
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    <style type='text/css'>
    .post-footer {display: none;}
    </style>
    </b:if>

  6. avatar says

    21:18 Ngày 25 tháng 09 năm 2014

    cám ơn bạn rất nhiều, mình rất thích sự nhiệt tình và mau mắn của bạn :v

  7. avatar says

    11:43 Ngày 30 tháng 10 năm 2014

    có được đâu bạn
    http://shopngocoanh.blogspot.com/2014/10/demo.html
    mình làm như bạn thấy có lý mà k được

  8. avatar says

    11:57 Ngày 30 tháng 10 năm 2014

    Mình check qua thì không thấy cái thẻ div mặc đình Blogger thêm vào, bạn đừng loại bỏ thẻ div bao quanh bên ngoài thẻ a và img trong bài viết nha. Nếu bạn không bỏ thì bạn có thể thử căn phải căn giữa hay căn trái gì đó cho cái ảnh đó để nó tự động thêm vào, sau đó cái ảnh đó nó tự ẩn đi thôi.

  9. avatar says

    15:03 Ngày 20 tháng 06 năm 2015

    Trước khi anh nâng cấp giao diện thì dùng ok. Giờ anh nâng cấp lên phiên bản mới của giao diện đang sử dụng thì không được. Em kiểm tra cho anh phát nhé. Tất cả các bài viết từ cũ đều ảnh hưởng.

  10. avatar says

    15:23 Ngày 20 tháng 06 năm 2015

    Anh áp dụng cho trang nào để lại link em kiểm tra cho.

  11. avatar says

    16:27 Ngày 20 tháng 06 năm 2015

    Trang này em nhé : http://www.izdesigner.com/

  12. avatar says

    18:23 Ngày 20 tháng 06 năm 2015

    Cái vụ này hồi trước có mốt số template bị nhưng em chưa biết cũ thể lỗi ỡ đâu mà một số css không nhận. Chắc anh phải tạm cho nó vào cặp thẻ style và dục dưới thẻ body thử nhé.

  13. avatar says

    19:51 Ngày 20 tháng 06 năm 2015

    Cám ơn em nhé. Để anh thử xem sao.

  14. avatar says

    09:33 Ngày 23 tháng 02 năm 2016

    Ad hỗ trợ mình vơi! tình hình là mình muốn tạo cột ngang ngay cuối bài post để tiện cho đặt quảng cáo cuối bài. rộng 468 px. mình làm theo 1 bài hướng dẫn mà nó nhảy lên đầu tieu đề bài post. bạn hướng dẫn mình nhé! đã lục tung mà k còn bài nào khác!

  15. avatar says

    00:57 Ngày 27 tháng 02 năm 2016

    A có nhận cover giao diện k anh

  16. avatar says

    14:32 Ngày 19 tháng 10 năm 2016

    Có cách nào làm được như mình mô tả ở hình này không Lâm ui
    https://lh3.googleusercontent.com/-QGaJ58-F3fE/WAchWEwDuXI/AAAAAAAAUVo/OIAhmLnM7YA8i9o-87qw6KXG0_caL-qRACLcB/s1600/cats.png

    CSS gọi bài thứ 2-3-4... trong blogger template nữa.

    Cảm ơn Lâm nhiều

  17. avatar says

    14:53 Ngày 19 tháng 10 năm 2016

    Em nghĩ là anh vào Blogger template tạo một cái Section Add cái widget recent post vào để lấy ra bài viết đầu tiên rồi style nó lại.

    Còn show từ bài viết thứ 2 trở đi thì
    http://www.kslzone.net/2014/01/ieu-kien-cho-gia-tri-cua-vong-lap-loop.html
    anh vào vòng loop trong widget post, cái includable main đó, thêm i vào như bài
    <b:if cond='data:i == 0'>
    (để trống)
    </b:if>
    là được.

    Hơi công phu xíu :D

  18. avatar says

    14:57 Ngày 19 tháng 10 năm 2016

    Một cách nữa là vẫn tạo 1 cái section với add cái widget html như em nói. Xong rồi dùng javascript cắt toàn bộ html của đầu tiên ở phần dưới lôi lên đó rồi style lại :D

  19. avatar says

    19:31 Ngày 23 tháng 10 năm 2016

    Chắc tạo 1 tấm hình thêm đoạn mô tả rồi đưa lên cho nhanh :D. Hì hì

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.