[Blogger] Tạo Read More tự động không dùng Javascript
Chủ Nhật, 13 tháng 2, 2011
|
Thủ thuật blogspot
Để làm được như vậy, bạn hãy thực hiện như sau. (Lưu ý nếu bạn đã áp dụng cách tạo Read More tự động sử dụng Javascript thì tháo nó ra khỏi Template trước khi áp dụng thủ thuật này)
Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.
Đặt đoạn code sau đây trước dòng ]]></b:skin>.
.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}
.item-snippet {color: #999; font-family:Arial; font-size: 12px;text-align:justify}
.jump-link {float:right}
.jump-link a,.jump-link
a:visited{background:#444343;margin-right:4px;padding:4px
8px;color:#FFF;text-shadow:1px 1px 1px
#000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.jump-link a:hover,.jump-link
a:active{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
Bước 2. Tìm <data:post.body/> và thay nó bằng đoạn code bên dưới.
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.thumbnailUrl'>
<img class='item-thumbnail' expr:alt='data:post.title' expr:src='data:post.thumbnailUrl'/>
<b:else/>
<img alt='no image' class='item-thumbnail'
src='http://lh4.ggpht.com/_u7a1IFxc4WI/TTjruHJjcfI/AAAAAAAAAk0/i11Oj6i_bHY/no-image.png'/>
</b:if>
<div class='item-snippet'><data:post.snippet/></div>
</div>
<div class='jump-link'>
<a expr:href='data:post.url' expr:title='data:post.title'><data:post.jumpText/></a>
</div>
<span class='post-comment-link'>
<b:if cond='data:post.allowComments'>
<a class='comment-link' expr:href='data:post.addCommentUrl'
expr:onclick='data:post.addCommentOnclick'><b:if
cond='data:post.numComments == 1'>1
<data:top.commentLabel/><b:else/><data:post.numComments/>
<data:top.commentLabelPlural/></b:if></a>
</b:if>
</span>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Lưu Template là OK.
Nếu bạn muốn ảnh đại diện nằm bên phải thì thay dòng
.item-thumbnail {float:left;margin-right:15px;width:75px;height:70px}
Bằng dòng
.item-thumbnail {float:right;margin-left:15px;width:75px;height:70px}
Điểm chú ý trong code của tôi tùy biến là phần mô tả tóm tắt bài viết (snippet), văn bản được căn đều hai bên (nhờ sử dụng class item-snippet có định dạng text-align:justify).