Tôi xin giới thiệu với các bạn cách tạo Read more tự động có hỗ trợ thumbnail ảnh không phải sử dụng các thẻ span (class=fullpost) để ngăn phần miêu tả và phần post đầy đủ, hỗ trợ tính năng Page mới của Blogger
Các bước thực hiện như sau
Vào Template => Edit HTML, tích chọn ô "Expand widget", rồi tìm đến thẻ
]]></b:skin>
chèn đoạn sau vào phần trước thẻ ]]></b:skin>
.thumb{float:left;display:inline;margin:5px 10px 10px 0;width:120px}Tiếp theo tìm đến thẻ:
</head>.
Và chèn đoạn mã sau trong thẻ <head>, ngay trước </head>.
<script type='text/javascript'>
function stripTags(s, n) {
return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0, n - 1).join(' ')
}
function createSummaryAndThumb(id) {
var p = document.getElementById(id),
imgtag = '',
img = p.getElementsByTagName('img');
if (img.length >= 1) {
imgtag = '<img class="thumb" src="' + img[0].src + '" />';
}
p.innerHTML = imgtag + stripTags(p.innerHTML, 125) + '...';
}
</script>
Trong template, để kích hoạt auto readmore, bạn tìm đến phần:
<data:post.body/>
Sửa thay nó bằng đoạn mã dưới đây:
<b:if cond='data:blog.pageType == "index"'>
<span expr:id='"p" + data:post.id'><data:post.body/></span>
<script type='text/javascript'>createSummary("p<data:post.id/>")</script>
<a expr:href='data:post.url' title='Read more' rel="nofollow">Read more →</a>
<b:else/>
<b:if cond='data:blog.pageType == "archive"'>
<span expr:id='"p" + data:post.id'><data:post.body/></span>
<script type='text/javascript'>createSummary("p<data:post.id/>")</script>
<a expr:href='data:post.url' title='Read more' rel="nofollow">Read more →</a>
<b:else/>
<data:post.body/>
</b:if>
</b:if>
Hy vọng vài phần tích và cải tiến nhỏ ở trên có thể giúp các bạn hiểu phần nào đoạn mã mà mình đang dùng. Thân ái.
Không có nhận xét nào:
Đăng nhận xét