Làm Readmore trong Blogger giống WordPress

Cách cài đặt script

Trước tiên, các bạn vào phần chỉnh sửa template, chọn kiểu chỉnh sửa HTML, và đánh dấu vào ô Expand Widget Templates. Nhớ sao lưu trước khi thực hiện. Tốt hơn hết là bạn nên download template về máy tính và chỉnh sửa ở file này.

Tìm đến thẻ </head> và chèn đoạn mã sau vào ngay trước đó:

<div class="codeview">

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <script type='text/javascript'>
    //<![CDATA[
    function strip(s,n){return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0,n-1).join(' ')}
    function createSummary(id) {
        var p = document.getElementById(id), content = p.innerHTML;
        if (/<!--\s*more\s*-->/.test(content)) {
            p.innerHTML = content.split(/<!--\s*more\s*-->/)[0];
        } else {
            var imgTag = '', img = p.getElementsByTagName('img');
            if (img.length >= 1) {
                imgTag = '<img class="thumb" src="'+img[0].src+'" />';
            }
            p.innerHTML = imgTag + strip(content, 125) + '...';
        }
    }
    //]]>
    </script>
</b:if>

</div>

Bạn lưu ý, hình ảnh thumbnail sẽ có class CSS là .thumb, bạn nên tùy biến CSS cho nó, VD như tôi làm như sau (chèn đoạn này vào phần trước ]]></b:skin>):
<div class="codeview">

.thumb{float:left;display:inline;margin:5px 10px 10px 0;width:120px}

</div>
Đồng thời, bạn có thể tùy biến số từ hiển thị (trong trường hợp tự động sinh đoạn văn bản thu gọn) ở trong đoạn code trên (thay số 125 bằng số tùy ý bạn).

Sau đó, tìm đến thẻ <data:post.body/> và thay thế bắng đoạn mã sau:
<div class="codeview">

<b:if cond='data:blog.pageType != &quot;item&quot;'>
    <span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>
    <script type='text/javascript'>createSummary(&quot;p<data:post.id/>&quot;);</script>
    <a expr:href='data:post.url' title='Đọc tiếp'>Đọc tiếp &amp;rarr;</a>
<b:else/>
    <data:post.body/>
</b:if>

</div>
Xong!

Hy vọng rằng script này sẽ có ích đối với bạn.