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

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 (bài đăng phải tải lại một lần nữa) 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ẻ </head> (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.

<b:if cond='data:blog.pageType != "item"'>
<script type="text/javascript">

var fade = false;
function showFull(id) {
var post = document.getElementById(id);
     var spans = post.getElementsByTagName('span');
     for (var i = 0; i &lt; 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 &lt; 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 &lt; spans.length; i++) {
          if (spans[i].id == "fullpost") {
              spans[i].style.display = 'none';
              found = 1;
          }
          if ((spans[i].id == "showlink") &amp;&amp; (found == 0))
              spans[i].style.display = 'none';
     }
}

</script>

</b:if>

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.

<b:includable id='post' var='post'>
<div class='post uncustomized-post-template' expr:id='"post-" + data:post.id'>

 <a expr:name='data:post.id'/>
 <b:if cond='data:post.title'>
   <h3 class='post-title'>
   <b:if cond='data:post.url'>
     <a expr:href='data:post.url'><data:post.title/></a>

   <b:else/>
     <data:post.title/>
   </b:if>
   </h3>
 </b:if>

<div class='post-header-line-1'/>

<div class='post-body'>

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

     <p><data:post.body/></p>

  <b:else/>

     <style>#fullpost {display:none;}</style>
     <p><data:post.body/></p>
     <span id='showlink'>
       <p><a href='javascript:void(0);' expr:onclick='"javascript:showFull(\"post-" + data:post.id + "\");"'>Đọc thêm ...</a></p>

     </span>
     <span id='hidelink' style='display:none'>
       <p><a href='javascript:void(0);' expr:onclick='"javascript:hideFull(\"post-" + data:post.id + "\");"'>Tóm tắt ...</a></p>
     </span>
     <script type='text/javascript'>

       checkFull("post-" + "<data:post.id/>");
     </script>
  </b:if>

  <div style='clear: both;'/> <!-- clear for photos floats -->
</div>

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
<span id="fullpost">
Phần còn lại hay mở rộng
</span>

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

<b:includable id='post' var='post'>
<div class='post hentry uncustomized-post-template'>
 <a expr:name='data:post.id'/>
 <b:if cond='data:post.title'>
   <h3 class='post-title entry-title'>
  <b:if cond='data:post.link'>
    <a expr:href='data:post.link'><data:post.title/></a>
  <b:else/>
     <b:if cond='data:post.url'>
       <a expr:href='data:post.url'><data:post.title/></a>
     <b:else/>
       <data:post.title/>
     </b:if>
  </b:if>
   </h3>
 </b:if>

 <div class='post-header-line-1'/>

 <div class='post-body entry-content'>
   <p><data:post.body/></p>
   <div style='clear: both;'/> <!-- clear for photos floats -->
 </div>

Chúc thành công!

nguồn: thuthuatblog.com