Hiển thị ảnh đầu tiên trên tiêu đề bài viết cho blogspot

http://blog.doisong24.com/2017/08/hien-thi-anh-dau-tien-tren-tieu-de-bai.html
Các mẫu blogspot truyền thống của blogger khi xem tại trang bài viết thường là:Tiêu đề bài viết rồi tiếp theo là ảnh đầu tiên và tiếp nữa là nội dung...
Với phương thức này có rất nhiều thuận tiện như:
- Ta có thể post ảnh có kích thước to nhỏ tùy thích(tiện cho việc hạn chế dung lượng ảnh) và tùy chọn vị trí dựa vào công cụ soạn thảo văn bản của blogger.
- Sau khi tải ảnh đầu tiên lên không cần sửa code mà ảnh vẫn cân đối...

Ta cũng có thể chuyển đổi vị trí giữa ảnh đầu tiên và tiêu đề bài viết cụ thể là hiển thị ảnh đầu tiên lên trên tiêu đề bài viết trong blogspot-Show first Image above title for blogspot.
Nhược điểm của template loại này là:
- Ảnh đầu tiên cần có kích thước lớn(tối thiểu phải có chiều rộng bằng main hoặc post)
- Áp dụng vào những blog cũ đã có nhiều bài với kích thước ảnh đầu tiên không kiểm soát thì phải sửa ảnh nếu không thì ảnh bị lệch,bị nhòe....

Để hiển thị ảnh đầu tiên lên trên tiêu đề bài viết trong blogspot ta chỉ cần một đoạn javascript nhỏ gọn kết hợp với jquery.
Jquery ở đây không dùng được async='async'

Đặt ngay trước thẻ </head> đoạn code sau:

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script type='text/javascript'>//<![CDATA[
$(document).ready(function(){
 var body = $('.post-body').first();
 var container = $(body).parent();
 var image = $(body).find('img').first();
 var surround = $(image).parent();
 $(surround).prependTo(container);
});
//]]></script>
</b:if>

Cơ bản là vậy.Còn cụ thể vào template thì cần chỉnh sửa một chút cho post-body img.
Nhận xét

Không có nhận xét nào :