Car Reviews

Auto Show

Sự kiệnThông tinChi tiết
Vietnam Motor Show 20165/10 đến 9/10 tại I.C.E, 91 Trần Hưng Đạo, Hà Nội Tham gia
Vietnam International Motor Show 201626/10 đến 30/10 tại SECC, 799 Nguyễn Văn Linh, Sài Gòn Tham gia

Tuesday, May 24, 2011

Tạo Readmore trong Blogger ves 1

Tạo nút read mỏe trong blogspot - tăng tốc độ blogspot bằng cách tạo read mỏe

Chia sẻ:
Tạo Readmore trong Blogger ves 1
Để 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.
Chức năng Scrip:
- 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ắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger
2. Vào phần thiết kế (Design)
3. Chọn Chỉnh sửa HTML
4. Chọn Mở rộng tiện ích .
5.
Tìm đến thẻ </head> và chèn đoạn mã sau vào ngay trước đó:
<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>
6. Thêm đoạn CSS dưới vào trước thẻ ]]></b:skin>.
.thumb{float:left;display:inline;margin:5px 10px 10px 0;width:120px}
- 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).

7. Tìm thẻ <data:post.body/> và thay thế bắng đoạn mã 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>
Lưu template lại và xem kết quả
- Hiện nay đã có bản cập nhất mới hơn và load ổn định hơn các bạn xem Tại đây
Chú thành công!

24 nhận xét:

  1. Chào bạn
    Bạn có thể chỉ giúp mình cái này được ko,mình sử dụng theme này mà khi xem bài đăng lại có 2 banner quảng cáo của google,bạn có thể chỉ mình cách bỏ 2 cái này đi được ko,hoặc là thay bẳng cái banner khác được ko.thank bạn nhiều,đây là theme mà mình dùng:
    http://bandatlonganbinhchanh.blogspot.com/2012/08/khu-dan-cu-my-hanh-hoang-gia.html
    vị trí banner: 1 cái dưới tiêu đề, 1 cái dưới cuối bài viết.

    ReplyDelete
    Replies
    1. Gửi template dể mình check.

      Delete
  2. anh xem site http://vinet24h.blogspot.com/

    em muốn chuyển tiện ích read more của em giống như của anh -em làm mãi mà không được-anh xem chỉ em với

    ReplyDelete
    Replies
    1. Phần đó phải tùy biến toàn bộ code css và XML của data.post:body cơ em ak. Hiện anh chưa chia sẻ thủ thuật đó./.

      Delete
  3. vậy có thể chuyển sang một read more khác không anh-em chán read more của em rùi !!!!

    ReplyDelete
    Replies
    1. Tất hhiên là được em ak. Em chỉ cần gỡ bở readmore cũ và thay bằng một trong các loại ở đây.

      http://namkna.blogspot.com/search/label/Blogspot%20Readmore

      Delete
  4. vâng đúng thế ! em rất thích mấy cái của anh -nhưng mà mọi hôm em lấy cái template trên mạng -em không biết gỡ read more cũ ra như thế nào
    anh giúp em với !

    ReplyDelete
    Replies
    1. Em gửi Templăte vào mail tavannam01@gmail.com anh chỉnh cho.

      Delete
    2. Vâng em cảm ơn nhiêu !

      Delete
  5. dạo này anh bận à ! rảnh giúp em tí nhé

    ReplyDelete
  6. Nam Kha ơi cho cô xin code và hướng dẫn cách làm khung thống kê truy cập , comments và bài viết như của cháu ở trang http://demo-blog-namkna.blogspot.com/ này được ko cô cảm ơn?

    ReplyDelete
  7. Cảm ơn NK cô đã làm được bẳng thông kê mà cô rất thích rồi . cô cảm ơn cháu nhiều lắm..

    ReplyDelete
    Replies
    1. Không có gì đâu cô ak. Cháu rất vui vì cô đã làm được :)

      Delete
  8. This comment has been removed by the author.

    ReplyDelete
  9. This comment has been removed by the author.

    ReplyDelete
  10. This comment has been removed by the author.

    ReplyDelete
  11. This comment has been removed by the author.

    ReplyDelete
  12. Giúp dùm mình... bài viết mình có hiện "ReadMore" nhưng không mở bài viết được...Phải làm sao đây..giúp dùm mình. Thank
    Blog mình đây...
    http://vuaocvuduy.blogspot.com/

    ReplyDelete
  13. Email em đây: isoff9@gmail.com giúp dùm

    ReplyDelete
    Replies
    1. Bạn phải áp dụng thì mình mới hỗ trợ được chứ ://////////

      Tuy nhiên theo mình thấy. Bạn hãy sử dụng cách mới nhất ở đây nha: XEM NGAY

      Delete