Cách ngắt bài (Read more)



Nhiều người vẫn chưa biết sử dụng mục này..hôm nay An đem về từ blog Qúy Đỗ để mọi người dùng nó nhe...không khó lắm đâu..An đã làm cho nhiều người lắm rồi...vì blogspot nó chỉ có 1 trang để post...mà bài viết của mọi người nhiều khi dài quá...hoặc có quá nhiều hình ảnh làm choáng hết nguyên cả trang...nhín dài thòng rất là rồi mắt người đọc...trình bày dài thòng như thế khiến người ta ngán đọc lắm.
Nếu khg muốn dùng bài này thì chúng ta nên dùng lệnh "ngắt bài"...nhấp chuột ngay đoạn mình muốn ngắt và bấm vào lệnh "Insert jump break" như trong hình:

Và đây là hình minh hoạ sau khi ngắt:

Bài trên là hướng dẫn làm bằng tay...đọc link dưới để dùng cách tự động nha
 http://www.dophuquy.com/2012/05/tu-dong-tao-trich-dan-co-hinh-thu-nho.html
 - Đầu tiên, các bạn vào Thiết kế, chọn Chỉnh sửa HTML, check vào ô Mở rộng mẫu tiện ích.
- Bấm Ctrl+F để tìm đến mã:
 </head>
 Chèn đoạn mã dưới đây ngay sau mã vừa tìm được:
<!-- Auto read more script Start -->
<script type='text/javascript'>
var thumbnail_mode = "yes"; //chọn yes để hiển thị ảnh thu nhỏ, ngược lại chọn no
summary_noimg = 430; //chiều dài trích dẫn với bài viết ko có hình
summary_img = 340; //chiều dài trích dẫn với bài viết có hình
img_thumb_height = 100; // chiều cao hình thu nhỏ
img_thumb_width = 120; // chiều rộng hình thu nhỏ
</script>
<script type='text/javascript'>
//<![CDATA[
function removeHtmlTag(strx,chop){ 
 if(strx.indexOf("<")!=-1)
 {
  var s = strx.split("<"); 
  for(var i=0;i<s.length;i++){ 
   if(s[i].indexOf(">")!=-1){ 
    s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length); 
   } 
  } 
  strx =  s.join(""); 
 }
 chop = (chop < strx.length-1) ? chop : strx.length-2; 
 while(strx.charAt(chop-1)!=' ' && strx.indexOf(' ',chop)!=-1) chop++; 
 strx = strx.substring(0,chop-1); 
 return strx+'...'; 
}

function createSummaryAndThumb(pID){
 var div = document.getElementById(pID);
 var imgtag = "";
 var img = div.getElementsByTagName("img");
 var summ = summary_noimg;
        if(thumbnail_mode == "yes") {
 if(img.length>=1) { 
  imgtag = '<span style="float:left; padding:0px 10px 5px 0px;"><img src="'+img[0].src+'" width="'+img_thumb_width+'px" height="'+img_thumb_height+'px"/></span>';
  summ = summary_img;
 }
 }
 var summary = imgtag + '<div>' + removeHtmlTag(div.innerHTML,summ) + '</div>';
 div.innerHTML = summary;
}
//]]>
</script>
<!-- Auto read more script End -->
- Tiếp tục, tìm đoạn mã:  
 <data:post.body/>

Thay đoạn mã vừa tìm được bằng đoạn mã bên dưới:
<!-- Auto read more Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'> createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
<a class='more' expr:href='data:post.url'>Đọc tiếp ...</a>
</b:if>
</b:if>
<!-- Auto read more End -->
- Các bạn bấm Lưu mẫu để hoàn thành! 
Chúc các bạn thành công!

8 comments:

  1. Chị học làm cái nì được rồi ...Khoái chí !:))

    ReplyDelete
  2. Thì nó chỉ vậy thôi mà.:-)

    ReplyDelete
  3. An ơi, Diễm tìm được mã đầu (head), nhưng cái mã thứ hai để chèn code ko tim đượcc, An giúp D với

    ReplyDelete
  4. Bồ đã check vào ô mở rộng tiện ích chưa?...hôm trước chị Gió cũng bị trường hợp này đó...check vào và copy đoạn code đó cho vào khung Seach (bấm tổng hợp Ctrl+F) là nó lòi ra liền hà...thử lại đi.

    ReplyDelete
  5. mở rộng mẫu tiện ích, tiếng anh là open template desig. đúng ko, hay mình bấm vào proceed

    ReplyDelete
  6. diễm vào thiết kế, bâm edit HTLM, bấm proceed, rồi ctrl+F tim được đoạn mã head, cài đuwocj đoạn code đó, khi tiếp tục tìm "data post body" thì ko tìm tháy, ngồi tìm tung hàng theo thủ công cũng ko thấy no sđâu, vậy D sai chỗ nào mà ko ra đoạn mã đó hả An

    ReplyDelete
  7. Đã khg rành thì sao không dùng bản tiếng Việt mà lại dùng tiếng Anh?..nếu dùng tiếng Việt thì sẽ thấy chữ "Mở rộng tiện ích"

    đây là hình minh họa nha.

    [IMG]http://i319.photobucket.com/albums/mm469/hoaian_bucket/test-3.png[/IMG]

    ReplyDelete
  8. hihihi, cảm ơn An, làm đuoc rồi, dễ òm mà mãi ko làm được.:)

    ReplyDelete

-Vui lòng gõ tiếng Việt có dấu và không viết những từ của trẻ con thời @
-Code chèn hình [IMG]link hình[/IMG]
chèn youtube [YOUTUBE]link[/YOUTUBE]
TEXT