Auto readmore cho Blogger 2013
Trước đây mình đã giới thiệu Auto readmore không sử dụng javascript cho Blogger với khả năng tăng tốc cho blog và thân thiện với các bộ máy tìm kiếm. Một trong những nhược điểm mình nhận được qua nhận xét của các bạn là hình ảnh hơi nhỏ. Dùng javascript có thể nâng cao kích cỡ ảnh mà không làm ảnh bị nhòe, tuy nhiên vì tiêu đề là không sử dụng javascript nên mình không cập nhật thêm. Trong bài này mình sẽ hướng dẫn một auto readmore mới mà hình ảnh được giữ nguyên kích cỡ ban đầu và tuyệt vời hơn nữa là cũng không cần đụng chạm đến javascript.
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ
Bước 2: Thay thế toàn bộ
Bước 1: Thêm đoạn mã dưới đây vào trước thẻ
]]></b:skin> trong template của bạn..dp-thumbnail{margin-bottom:20px;border:1px solid #ccc;box-shadow:0 0 transparent inset,0 5px 0 -4px #fff,0 5px 0 -3px #ccc;padding:10px 0;width:100%;height:90px;text-align:center}
.dp-thumbnail img{border:0;padding:0;max-width:96%;max-height:90px}
.dp-thumbnail span{font-size:26px;line-height:70px;font-weight:bold}
Bước 2: Thay thế toàn bộ
<data:post.body/> bằng đoạn mã dưới đây:<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='dp-thumbnail'>
<b:if cond='data:post.firstImageUrl'>
<img expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
<b:else/>
<b:if cond='data:post.thumbnailUrl'>
<img expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<span>No thumbnail</span>
</b:if>
</b:if>
</div>
<data:post.snippet/>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Hình ảnh phải được lưu trên Picasa, video từ Youtube. Tự động hiển thị thông báo với bài viết không có hình ảnh và video.
Hướng dẫn thủ thuật Blogger, Blogspot
42
Nhận xét