Để tạo đoạn phân cách Readmore, chúng ta nhấn vào nút More (có hình trang giấy ngăn đôi), nếu chuyển sang kiểu soạn thảo HTML, sẽ thấy có thẻ <!--more--> được chèn vào vị trí đó. Khi đó, phần phía trên thẻ <!--more--> này sẽ được hiển thị ở trang chủ và các trang category, phần còn lại sẽ chỉ xem được khi vào xem 1 bài viết. Cách làm này có 1 điểm lợi là giữ được định dạng HTML.

- Nếu trong bài viết của bạn có thẻ <!--more--> (), nó sẽ lấy đó làm dấu phân cách, phần trước thẻ đó sẽ được hiển thị ở trang chủ và giữ nguyên định dạng HTML, phần sau đó chỉ hiển thị khi đọc 1 bài viết.

- Nếu trong bài viết của bạn không có thẻ <!--more-->, thì script sẽ tự động sinh ra đoạn văn bản thu gọn ở trang chủ như script auto readmore thông thường. Lúc này định dạng HTML sẽ không còn (hình ảnh thumbnail vẫn được duy trì).

<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>

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

<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 class='post-body'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' 
style='float:right;padding-top:20px;'><a 
expr:href='data:post.url'> Read more … 
"<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div

<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>

<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>

<div class='post-body'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'><br/>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
<div expr:id='"summary" + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb("summary<data:post.id/>");
</script> <span class='rmlink' 
style='float:right;padding-top:20px;'><a 
expr:href='data:post.url'> Read more … 
"<data:post.title/>"</a></span>
</b:if>
<b:if cond='data:blog.pageType == "item"'><data:post.body/></b:if>
</b:if>
<div style='clear: both;'/> <!-- clear for photos floats -->
</div>

 Blogger thay đổi giao diện Edit HTML     Truyện cười Vova phần 7 [Tổng hợp]     Multi Color Popular Posts có số đếm cho blogspot (v3)     Tạo nút bàn phím (Keyboard) từ CSS3 cho Blogger/blogspot     Đăng ký và cài đặt google analytics cho blogspot     Sửa lỗi "feed filesize is larger than 576K..." khi đăng ký FeedBruner     SEO và Google Adwords nên chọn cách nào?     Google Sandbox là gì và cách khắc phục?     Khung Author box đẹp từ CSS3 cho blogger     Truyện cười ngày 1-4 (cá tháng tư - nói dối)      + Add WWidget on namkna BlOg'S

<script type='text/javascript'>
            var w2bWidth="100";
            var w2bScrollAmount="10";
            var w2bScrollDelay="50";
            var w2bDirection="left";
            var w2btargetlink="no";
            var w2bnumPosts="10";
            var w2bBulletchar =">>>";
            var w2bimagebullet="yes";
            var w2bimgurl="LINK ẢNH";
            var w2bfontsize="16";
            var w2bbgcolor="transparent";
            var w2blinkcolor="FF0000";
            var w2blinkhovercolor="3366CC";
</script>
<script  type='text/javascript'  src='http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/rc-post_rpscroller_v3.js'  ></script>
<script type='text/javascript' src="http://viettin365.com/feeds/posts/default?alt=json-in-script&callback=w2bAdvRecentPostsScrollerv3&max-results=10" ></script>

Bây giờ bạn thay thế các chữ màu đỏ và màu xanh để phù hợp với Blog mình. Bạn nên chọn hình ảnh có kích thước nhỏ để cho phù hợp (khoảng 40x40 là đẹp nhất)

Một số ảnh bạn có thể lựa chọn (Bấm vào hình để lấy link)

Các bạn tải hình về máy sau đó Upload lên hot riêng của mình nha, tại mình không có điều kiện mua tài khoản Vip tại Photobooket nên dung lượng sử dụng bị giới hạn nhiều :))

Các bạn có thể Upload trực tiếp lên Blog của bạn rồi lấy link đó dán vào code trên

Chúc các bạn thành công!