Thư viện

Sự kiện

Thứ Ba, tháng 5 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.

    Trả lờiXóa
  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

    Trả lờiXóa
    Trả lời
    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 đó./.

      Xóa
  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 !!!!

    Trả lờiXóa
    Trả lời
    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

      Xóa
  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 !

    Trả lờiXóa
    Trả lời
    1. Em gửi Templăte vào mail tavannam01@gmail.com anh chỉnh cho.

      Xóa
    2. Vâng em cảm ơn nhiêu !

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

    Trả lờiXóa
  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?

    Trả lờiXóa
  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..

    Trả lờiXóa
    Trả lời
    1. Không có gì đâu cô ak. Cháu rất vui vì cô đã làm được :)

      Xóa
  8. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  9. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  10. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  11. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  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/

    Trả lờiXóa
  13. Email em đây: isoff9@gmail.com giúp dùm

    Trả lờiXóa
    Trả lời
    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

      Xóa