Auto Readmore với Thumbnail lớn không dùng Javascript

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

Bước 1

Thay đoạn mã <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 :

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"'>
<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/AVvXsEiF5ygbldp3MBFHdhkcO0ObBCbr1iuRdS8l0SVNhrMS3srUE9irOp9sMztKqYjYwQhcEJTlhLxXxpFqMe4gkREbzAdDT0BWg56Ehz8XNGzQCT1Pdphdq1uxEKbfJoJyRid1AqnC9eo8Ci4/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>

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ước 2

Bổ sung đoạn CSS sau trước ]]></b:skin> hoặc </style>:
- 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ữ đượ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:

<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSnippet("summary<data:post.id/>");</script>

Tiếp theo là chèn đoạn code bên dưới lên trên thẻ <head>

<script type='text/javascript'>
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>

Thay thế giá trị của snippet_count = 500bằng số lượng ký tự bạn muốn thể hiện

To insert a link, use tag [url=http://your_link]your-link[/url]
To insert the code , use the tag <i rel="code">your-code</i>
The long code can use the tag <i rel="pre">your-long-code</i>
To insert an image , use the code [img]URL Image[/img]
To insert a title , use tag <b rel="h4">Your Title here...</b>
To creat Bold text <strong>Your text here...</strong>
To create Italic text used tag <em>Your text here...</em>

:) :( :p :D :o ;) 8-) 8:) :/ :'( 3:) O:) :* <3 ^_^ -_- o.O O.o >:o :v :3

Cancel

dzbasic blogger template