Thứ Tư, 15 tháng 8, 2012

Tự động tạo trích dẫn có hình thu nhỏ Blogger (Blogspot)


Mặc định với những bài viết trên Blogger (blogspot) nếu bạn muốn cho bài viết ngắn lại ở dạng trích dẫn, bạn sẽ sử dụng dấu ngắt của trình soạn thảo văn bản. Tuy nhiên, làm như vậy sẽ khá thủ công và lượng kí tự hiển thị mỗi bài viết không đều, không thẩm mỹ. Hôm nay mình sẽ hướng dẫn các bạn cách tạo trích dẫn bài viết tự động với hình thu nhỏ (Auto read more with thumbnail) cho Blogger.


Tự động tạo trích dẫn có hình thu nhỏ Blogger (Blogspot)
- Đầ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!
---------------------------
Nguồn tham khảo: http://www.bloggersentral.com/2009/11/blogger-auto-read-more-with-thumbnail.html 

8 nhận xét:

  1. nhưng sẽ bị lỗi đó chị
    trang chính sẽ hiển thị ko đủ như mình setting nên em đã setting lại, chịu khói làm thủ công rồi :(

    Trả lờiXóa
  2. Chị tìm không có đoạn mã , nó cứ đỏ lè là sao T ?

    Trả lờiXóa
  3. DCT ơi! Chị đã đọc và sửa lại cho nó gọn rồi.
    Cám ơn em nhé!

    Trả lờiXóa
  4. Sao không tìm được đoạn mã bạn ơi

    Trả lờiXóa
  5. sao mình làm hoài nó vẫn ko hiện hình ảnh kèm trích dẫn bên mục trang chủ nhỉ , nó vẫn chỉ hiện văn bản ra thôi hà ==
    web mình đây http://yueshiro.blogspot.com/

    Trả lờiXóa

Comment bằng chữ có dấu .
Không dùng chữ Việt bị biến dạng (như nhìu, dzo)