Tự động tóm tắt bài viết không dùng javascript kiểu 2

Tự động tóm tắt bài viết  không dùng javascript kiểu 2
Về cơ bản thủ thuật tự động tóm tắt bài viết không dùng javascript này cũng giống thủ thuật tự động tóm tắt bài viết ở trang chủ có ảnh thumbnail không sử dụng javascript như đã trình bầy ở bài trước.Ở thủ thuật này chỉ thêm nút Read more có thể hiệu chỉnh về vị trí,màu nền và thích thì thay bằng hình ảnh thay cho chữ xem thêm... mặc định của blogspot

Các bước thực hiện

Bước 1: Thêm class post-thumbnail để hiển thị hình ảnh.
Thêm đoạn mã dưới đây vào bên trên thẻ ]]></b:skin>
.post-thumbnail{float:left;margin-right:20px;border:1px solid #005595;border-radius:5px; background:#D2ECF5;width:72px;height:72px;padding:3px}
.jump-link {background:#ddd;margin-right:4px;padding:4px;color:#eee;font:14px Times;text-shadow:2px 1px 3px #000;text-decoration:none;border:1px solid #bbb;float:right}
.jump-link:hover{background:#777;color:#00ff00;text-decoration:none;border:2px solid #ffa500}

Bước 2. Auto readmore với hình ảnh và hiển thị ảnh mặc định cho bài viết không có ảnh:
Thay thế <data:post.body/> bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='post-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl' height='72px' width='72px'/>
<b:else/>
<img alt='no image' class='post-thumbnail' height='72px' src='http://lh3.ggpht.com/--Z8SVBQZ4X8/TdDxPVMl_sI/AAAAAAAAAAA/jhAgjCpZtRQ/no-image.png' width='72px'/>
</b:if>
<data:post.snippet/>
</div>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url'>
Read more
</a>
<b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>
Read more
</a>
</b:if>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Nguồn sưu tầm
Chúc thành công!
Nhận xét

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