Blogspot có một kiểu hiện thị mặc địch là toàn bài viết trên site index hoặc các page khác bạn muốn tạo bài viết ngắn gọn và có hình thumbnail như những trang website khác không?
Xin hướng dẫn tạo bài viết thu gọn (readmore) tự động lấy hình trong bài viết thu nhỏ lại (thumbnail) nếu không có thì lấy hình mặc đinh (no_image.jpg)
Bước 1: Backup teamplate của bạn
điều này để phục hồi lại như củ nếu trong quá trình làm bị lỗi! (RẤT QUAN TRỌNG)
Đâu tiên đăng nhập vào blogspot vào: Dashboard > Design > Edit HTML
Đánh dấu vào : “Expand widget templates”
rồi nhấn Download Teamplate Full để tải xuống đầu đủ teamplate
Bước 2: Chèn Code vào blog
Tìm đến dòng : <data:post.body/> (Nhấn Ctrl +F để tìm)
Rồi copy đoạn code sau ghi đè lên:
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:post.snippet'>
<b:if cond='data:post.thumbnailUrl'>
<div class='Image thumb'>
<img expr:src='data:post.thumbnailUrl'/>
</div>
</b:if>
<data:post.snippet/>
<b:if cond='data:post.jumpLink != data:post.hasJumpLink'>
<div class='jump-link'>
<a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Bước 3: Cấu hình CSS
Tìm dòng : </b:skin>
Chèn vào trước nó đoạn code sau:
.thumb img {
float: left;
margin: 0 10px 10px 0;
}
Tuy nhiên bạn có thể làm theo ý bạn để có hình tốt hơn như left hoặc right
Và giờ hảy tải lại trang để xem kết quả!
Link bài viết: http://allsoftware-freedownload.blogspot.com/2011/04/blogger-auto-read-more-with-thumbnail_20.html
|
Đăng ký tên miền ngắn gọn miễn phí |
|
