Ẩ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.
Ở 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.
 |
| 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;
}
lúc 17:38 25 tháng 9, 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?
lúc 17:40 25 tháng 9, 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?
lúc 18:18 25 tháng 9, 2014
Trang tienganhgioi mình không thấy cái gạch ngang nào cả :D
lúc 20:26 25 tháng 9, 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
lúc 20:34 25 tháng 9, 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 == "static_page"'>
<style type='text/css'>
.post-footer {display: none;}
</style>
</b:if>
lúc 21:18 25 tháng 9, 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
lúc 11:43 30 tháng 10, 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
lúc 11:57 30 tháng 10, 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.
lúc 15:03 20 tháng 6, 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.
lúc 15:23 20 tháng 6, 2015
Anh áp dụng cho trang nào để lại link em kiểm tra cho.
lúc 16:27 20 tháng 6, 2015
Trang này em nhé : http://www.izdesigner.com/
lúc 18:23 20 tháng 6, 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é.
lúc 19:51 20 tháng 6, 2015
Cám ơn em nhé. Để anh thử xem sao.
lúc 09:33 23 tháng 2, 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!
lúc 00:57 27 tháng 2, 2016
A có nhận cover giao diện k anh
lúc 14:32 19 tháng 10, 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
lúc 14:53 19 tháng 10, 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
lúc 14:57 19 tháng 10, 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
lúc 19:31 23 tháng 10, 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ì