Auto Readmore với Thumbnail lớn không dùng Javascript
Updated on January 11, 2016
Auto readmore này sử dụng data:post.firstImageUrl , giúp ta thêm auto readmore với ảnh đại diện với kích cỡ bất kỳ. Và thủ thuật này không sử dụng javascript nên sẽ giúp blog chạy nhanh hơn.
Trước khi bắt đầu, bạn cần backup template để đề phòng bất trắc
<data:post.body/> trong template của bạn bằng một trong các đoạn mã dưới đây, lưu ý là nếu template của bạn có 2 đoạn thì thay hết, nếu template của bạn có 3 đoạn thì thay mã thứ hai và thứ ba mà bạn tìm thấy :
]]></b:skin> hoặc </style> :
- Hình ảnh hiển thị bên trái
Tăng số lượng chữ được trích dẫn snippet
Để tăng số lượng chữ trích dẫn bạn cần sử dụng Javascript như sau:
Thay thế đoạn code màu đỏ bên trên bằng đoạn sau:
<head>
snippet_count = 500 bằng số lượng ký tự bạn muốn thể hiện
Trước khi bắt đầu, bạn cần backup template để đề phòng bất trắc
Bước 1
Thay đoạn mãAuto readmore với ảnh đại diện
<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img class='thumbnail' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
</a>
</b:if>
<div class="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>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Auto readmore với ảnh đại diện và ảnh mặc định cho bài viết không có ảnh
<b:if cond='data:blog.pageType != "item"'>Chú ý là bên trong đoạn mã thay thế cũng có chứa <data:post.body/> nên phải thay cho đúng.
<b:if cond='data:blog.pageType != "static_page"'>
<div>
<b:if cond='data:post.firstImageUrl'>
<a expr:href='data:post.url'>
<img class='thumbnail' expr:alt='data:post.title' expr:src='data:post.firstImageUrl'/>
</a>
<b:else/>
<a expr:href='data:post.url'>
<img alt='no image' class='post-image' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi4A_Yph6sZC_ku3RAcnKH_jQH-JIvaIEqIi-gixrDgFPXwN74zTWjLMMKb4wLFTQVtcnH-eyc_L7eh7OQLcQaucqH7PnJgRWrzMhZtCR3wBqJRfU_WgyNaPxWkr2k0MRmcwKq7GT4N3HY/s1600/No-image-available-technohalf.png'/>
</a>
</b:if>
<div class="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>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>
Bước 2
Bổ sung đoạn CSS sau trước- Hình ảnh hiển thị bên trái
.thumbnail {float: left; margin-right: 12px}- Hình ảnh hiển thị bên phải
.thumbnail {float: right; margin-left: 12px}
Để tăng số lượng chữ trích dẫn bạn cần sử dụng Javascript như sau:
Thay thế đoạn code màu đỏ bên trên bằng đoạn sau:
<div expr:id='"summary" + data:post.id'><data:post.body/></div>Tiếp theo là chèn đoạn code bên dưới lên trên thẻ
<script type='text/javascript'>createSnippet("summary<data:post.id/>");</script>
<script type='text/javascript'>Thay thế giá trị của
snippet_count = 500;
//<![CDATA[
function removeHtmlTag(strx,chop){
if(strx.indexOf("<")!=-1)
{
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
strx = s.join("");
}
chop = (chop < strx.length-1) ? chop : strx.length-2;
while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++;
strx = strx.substring(0,chop-1);
return strx+'...';
}
function createSnippet(pID){
var div = document.getElementById(pID);
var summ = snippet_count;
var summary = '<div class="snippets">' + removeHtmlTag(div.innerHTML,summ) + '</div>';
div.innerHTML = summary;
}
//]]>
</script>
0 comments for Auto Readmore với Thumbnail lớn không dùng Javascript