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'
Thực hiện
Đặ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 == "item"'>
<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.