Chủ Nhật, 10 tháng 5, 2009

Cách tạo Read More - Đọc Thêm tự động hỗ trợ tự thumbnail ảnh cho BLogSpot

Với bài Chèn Read More Đọc thêm cho bài đăng của Bblogspot làm với mẫu Langit tôi đã áp dụng các phương thức sưu tầm để tạo "Readmore -Đọc tiếp" nhưng phải áp dụng các thẻ span (class=fullpost) để ngăn phần miêu tả và phần post đầy đủ. Do vậy nếu bài viết quên không đặt thẻ span y rằng là cả bài nằm trình ình trên blog rồi. Hôm nay tôi cải tiến để có "Read more - Đọc thêm" một cách tự động, giúp cho blog mới của mình không có read more có thể chủ động tạo link mà không cần phải sửa lại toàn bộ các bài viết.

Tôi xin giới thiệu với các bạn cách tạo Read more tự động có hỗ trợ thumbnail ảnh không phải sử dụng các thẻ span (class=fullpost) để ngăn phần miêu tả và phần post đầy đủ, hỗ trợ tính năng Page mới của Blogger

Các bước thực hiện như sau

Vào Template => Edit HTML, tích chọn ô "Expand widget", rồi tìm đến thẻ


]]></b:skin>

chèn đoạn sau vào phần trước thẻ ]]></b:skin>

.thumb{float:left;display:inline;margin:5px 10px 10px 0;width:120px}


Tiếp theo tìm đến thẻ:
 </head>.
Và chèn đoạn mã sau trong thẻ <head>, ngay trước </head>.

<script type='text/javascript'>
  function stripTags(s, n) {
  return s.replace(/<.*?>/ig, '').split(/\s+/).slice(0, n - 1).join(' ')
 }
 function createSummaryAndThumb(id) {
  var p = document.getElementById(id),
   imgtag = '',
   img = p.getElementsByTagName('img');
  if (img.length >= 1) {
   imgtag = '<img class="thumb" src="' + img[0].src + '" />';
  }
  p.innerHTML = imgtag + stripTags(p.innerHTML, 125) + '...';
 }
 </script>

Trong template, để kích hoạt auto readmore, bạn tìm đến phần:

<data:post.body/>

Sửa thay  nó bằng đoạn mã dưới đây:


<b:if cond='data:blog.pageType == "index"'>
 <span expr:id='"p" + data:post.id'><data:post.body/></span>
 <script type='text/javascript'>createSummary("p<data:post.id/>")</script>
 <a expr:href='data:post.url' title='Read more' rel="nofollow">Read more &rarr;</a>
<b:else/>
 <b:if cond='data:blog.pageType == "archive"'>
  <span expr:id='"p" + data:post.id'><data:post.body/></span>
  <script type='text/javascript'>createSummary("p<data:post.id/>")</script>
  <a expr:href='data:post.url' title='Read more' rel="nofollow">Read more &rarr;</a>
 <b:else/>
  <data:post.body/>
 </b:if>
</b:if>


Hy vọng vài phần tích và cải tiến nhỏ ở trên có thể giúp các bạn hiểu phần nào đoạn mã mà mình đang dùng. Thân ái.

0 Comments:

Đăng nhận xét

» VnTim™ cảm ơn bạn đã đọc bài viết.
» Nếu có thắc mắc hay góp ý, bạn hãy để lại một nhận xét.
» Nếu thấy bài viết hay hãy chia sẻ với những người quanh bạn.
» Bạn có thể sử dụng một số thẻ HTML như <b>, <i>,<a>.
» Vui lòng đăng những nhận xét lịch sự và gõ tiếng Việt có dấu nếu có thể.
» Rất cảm ơn những comment thiện ý.

 

VnTim™ Trái Tim Việt Nam Copyright © 2010 VnTim™ Trái Tim Việt Nam