Advertise Here ?

Cách tạo Read more ( đọc thêm ) cho mỗi bài đăng

Để trang trí blog của bạn một cách ngắn gọn thì bạn nên để trên giao diện chính phần đầu của bài đăng ( phần thân bài sẽ được ẩn đi để không tốn diện tích trên trang của bạn. Khi người đọc muốn xem tiếp thì click vào " xem tiếp" để xem hết phần thân bài. Sau đây là các bước hướng dẫn để bạn tạo " xem tiếp" cho bài đăng.

Bước 1: Đăng nhập vào Blogger và chọn thẻ Trình bày -> chỉnh sửa HTML(nên sao lưu 1 bản template của bạn để đề phòng )

Bước 2: Tại Edit HTML (Chỉnh sửa HTML) bạn kéo thanh trượt xuống và tìm thẻ </Head> (có thể nhấn tổ hợp 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 "Mở rộng mẫu tiện ích" 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ể thay chữ Đọc thêm bằng Read more hoặc xem tiếp ...tùy 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 vào phần Cài đặt -> Đang định dạng . Coppy đoạn code trên và paste vào phần " mẫu bài đăng " sau đó lưu cài đặt lại .

*** khi đăng bài : bạn đăng phần muốn hiển thị trên trang ( phần đầu )ở trên thẻ <span id="fullpost">. Phần thân bài ( phần ẩn ) ở giữa hai thẻ <span id="fullpost"> và </span>




Search by TAGS :