Tạo phím " Read more " cho blogspot

 humghn.com 

Nhắc đến cụm từ " Read more " hay còn gọi với cái tên " Đọc tiếp " thì đã không còn xa lạ gì với các bạn . Đó là một cụm kí tự liên kết mà sau khi bạn nhấp vào nó thì hệ thống sẽ chuyển bạn đến trang nội dung chi tiết của bài viết bạn đang xem . 

Thông thường , phần hiển thị phía trên của cụm từ " Read more " là các từ đường ngắt nối bời dấu ngắt nối trong bài viết . Một số trường hợp không để dấu ngắt nối , hệ thống sẽ tự động lọc ra những từ đầu tiên để cho lên trên từ " Read more " . Trong đó bao gồm cả tiêu đề bài viết . 

Để thực hiện việc thêm cụm từ " Read more " bạn thực hiện các bước sau :

Bước 1 : Đăng nhập blogspot , chọn " Mẫu " . nhấp tiếp vào mục " Chỉnh sửa HTML "

Bước 2 : Bạn thêm đoạn code sau đây trên thẻ </head>

<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, 168) + '...';
        }
    }
    //]]>
    </script>
</b:if>

168 là số chữ cái hiển thị trên phần Readmore ; bạn có thể đổi bằng bao nhiêu kí tự tùy ý thích của bạn
Bước 3 : Thêm đoạn code sau vào trước thẻ ]]></b:skin>

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

Bước 4 : Thay thể thẻ <data:post.body/> bằng đoạn code sau

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

Sau đó các bạn lưu lại và hưởng thụ thành quả thôi .
Chúc các bạn thành công !