Minh Vũ's Blog

Just another WordPress.com weblog

Sử dụng kỹ thuật mở rộng bài đăng theo kiểu hiển thị Peekaboo (Blog mới)

Posted by xpss trên 04/10/2009

Như bạn thấy, mỗi bài đăng trên blog này chỉ hiển thị phần đầu và mỗi khi bạn bấm trên Đọc tiếp… thì bài viết mới hiện ra đầy đủ, không phải tải lại, giúp blog nhanh hơn. Kỹ thuật này được phát triển bởi Ramani, khác với cách chèn đọc thêm mà tôi có dịp giới thiệu trước đây. Để sử dụng kỹ thuật này trên blog, hãy thực hiện theo các bước sau:

Bước 1: Đăng nhập vào Blogger và chọn thẻ Template để sao lưu template của bạn.
Bước 2: Tại Edit HTML (Chỉnh sửa HTML) bạn kéo thanh trượt tìm tìm thẻ (có thể nhấn đồng thời hai phím Ctrl + F để tìm) sau đó chép toàn bộ đoạn code dưới đây, dán phía trên thẻ này và lưu lại.

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
        var spans = post.getElementsByTagName(‘span’);
        for (var i = 0; i < spans.length; i++) {
             if (spans[i].id == “fullpost”) {
                 if (fade) {
                    spans[i].style.background = peekaboo_bgcolor;
                    Effect.Appear(spans[i]);
                } else spans[i].style.display = ‘inline’;
             }
             if (spans[i].id == “showlink”)
                 spans[i].style.display = ‘none’;
             if (spans[i].id == “hidelink”)
                 spans[i].style.display = ‘inline’;
        }
}

function hideFull(id) {
var post = document.getElementById(id);
        var spans = post.getElementsByTagName(‘span’);
        for (var i = 0; i < spans.length; i++) {
             if (spans[i].id == “fullpost”) {
                 if (fade) {
                   spans[i].style.background = peekaboo_bgcolor;
                   Effect.Fade(spans[i]);
                 } else spans[i].style.display = ‘none’;
             }
             if (spans[i].id == “showlink”)
                 spans[i].style.display = ‘inline’;
             if (spans[i].id == “hidelink”)
                 spans[i].style.display = ‘none’;
        }
        post.scrollIntoView(true);
}

function checkFull(id) {
var post = document.getElementById(id);
        var spans = post.getElementsByTagName(‘span’);
        var found = 0;
        for (var i = 0; i < spans.length; i++) {
             if (spans[i].id == “fullpost”) {
                 spans[i].style.display = ‘none’;
                 found = 1;
             }
             if ((spans[i].id == “showlink”) && (found == 0))
                 spans[i].style.display = ‘none’;
        }
}


Bước 3: Bạn click chọn Expand Widget Templates sau đó tìm id=’post’ (có thể dùng Ctrl + F để tìm) có trên đoạn mã. Bây giờ hãy bổ sung các đoạn mã màu đỏ nằm đúng vị trí như dưới đây. Lưu ý: Một số template sẽ không có uncustomized-post-template nhưng bạn cũng không phải lo.


  <div class='post uncustomized-post-template' expr:id='”post-” + data:post.id’>

   
   
     

     
       

     
       
     

     

   

  

  

      

       

    

        #fullpost {display:none;}
       

       
         

Đọc thêm …

       
       

Tóm tắt …

       
       

          checkFull(“post-” + “”);
       
    


    


  

Bạn có thể tùy biến Đọc thêm … và Tóm tắt … nằm trong đoạn mã trên theo ý thích của mình.
Bước 4: Thay đổi cách đăng bài. Bây giờ mỗi bài đăng của bạn phải thực hiện theo cấu trúc sau:

Phần đầu hay tóm tắt

Phần còn lại hay mở rộng


Bạn có thể tham khảo thêm nội dung Sử dụng kỹ thuật mở rộng bài viết của Template ba cột mà trước đây tôi có dịp giới thiệu để biết cách dùng chi tiết hơn.
Cập nhật thêm (Bước 3):
Để thao tác đơn giản hơn, thay vì bổ sung các đoạn mã màu đỏ như bước 3 ở trên bạn hãy copy hết tất cả mã nằm trong khung đó và thay thế đoạn mã nằm trong khung dưới đây có trong Edit HTML (Nhớ check Expand Widget Templates ở trên khung quản lý đoạn mã trước):
























Chúc thành công!

Advertisements

Trả lời

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Đăng xuất / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Đăng xuất / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Đăng xuất / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Đăng xuất / Thay đổi )

Connecting to %s