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

May 28, 2012
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)
1. Đầu tiên, các bạn vào Mẫu, chọn Chỉnh sửa HTML
2. 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 -->
3. 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 -->
4. Các bạn bấm Lưu mẫu để hoàn thành!
Chúc các bạn thành công!
Đã có 12 lời bình luận cho chủ đề Tự động tạo trích dẫn có hình thu nhỏ Blogger (Blogspot). Trang web dophuquy.com rất hoan nghênh đón nhận những lời bình luận mang tính xây dựng từ độc giả.
  1. Vicente Nguyễn làm nhưng mà ra một cái khác, có nghĩa kaf khi click vào lại hiện ra 2 bài như nhau! :((
  2. Đỗ Phú Quý @Vicente Nguyễn: Bạn cho mình xem Demo nhé! Mình đã thực hiện với nhiều blog, với nhiều template khác nhau, tất cả đều ok bạn à.
  3. nam cảm ơn nhé, mình làm được rồi.
  4. Hoàng Huy Phát Bạn ơi, nếu muốn hiện hết tất cả nội dung của 1 bài đăng ở trang chủ thì làm như thế nào.
    Ý mình là chỉ hiện 1 bài đăng Giới Thiệu Ở Trang Chủ và cho hiện tất cả nội dung để giống các website doanh nghiệp hơn :>

    Email của mình: quantrihhp@gmail.com
    Lúc trước mình đã gửi cho bạn vài mail hỏi đáp rồi đấy :>
  5. Đỗ Phú Quý @Hoàng Huy Phát: Mình nhớ bạn rồi :)
    Nhưng mà câu hỏi của bạn chưa rõ nên mình không biết giúp sao nữa :(... Website doanh nghiệp có nhiều style mà bạn...
  6. Unknown Cac bai viet cua bạn rat hay, cam on!
  7. Trịnh Nhật Minh Quá tuyệt cú con mèo luôn ^^
  8. Unknown Thanks rất nhiều
  9. Unknown Thank you bạn nhé! m làm đc rồi :D
  10. Unknown Không tìm thấy được đoạn mã Bạn có thể nói rõ hơn không
  11. Unknown @Lê Tấn Thông: Bạn bấm Ctrl+F để nhanh chóng tìm đến đoạn mã. Những đoạn mã trên không thể thiếu trong bất kì template nào.
  12. toi den mình làm không được cướu mình với

 
Di chuyển lên trên cùng



Bình luận bài viết