Tạo nút Read More tự động không dùng Javascript và có hỗ trợ ảnh
|
vuongsungdong1. Đăng nhập Blogger, vào Design >> Edit HTML, chọn Expand Widget Templates.
2. Đặ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}
.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}
3. 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>
<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>
4. Lưu Template là OK.
CHÚ Ý: 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).
Posted in
THỦ THUẬT
vuongsungdong
lúc 03:46 21 tháng 8, 2012
ừm cái này thì mình hiểu rùi.bạn add yahoo mình đi rùi mình nói cho chứ bạn ko hiểu đâu. nick mình là vuongsungdong bạn nhé.
vuongsungdong
lúc 03:47 21 tháng 8, 2012
ừm cái này thì mình hiểu rùi.bạn add yahoo mình đi rùi mình nói cho chứ bạn ko hiểu đâu. nick mình là vuongsungdong bạn nhé.