Auto readmore với thumbnail không bóp méo hình ảnh cho Blogger

Hiện nay, như các bạn đã biết thì có rất nhiều thủ thuật tạo Auto Readmore với Thumbnail được share trên mạng. Nhưng hầu hết đều làm méo hoặc mờ hình ảnh, một số thì không thể tùy chỉnh, công đoạn chèn và sử dụng thì phức tạp. Do đó bài viết này mình muốn được chia sẻ cho các bạn một script tạo Auto Readmore với Thumbnail mà bạn có thể chèn vào blog của mình một cách đơn giản nhất.


Bạn chỉ cần chèn script dưới đây của blogxpertise vào trên thẻ </head> và bạn đã hoàn tất:

<b:if cond='data:blog.pageType == "index"'>
<script language='javascript' src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js' type='text/javascript'/>
<script type='text/javascript'>//<![CDATA[
/**
this script was written by Confluent Forms LLC http://www.confluentforms.com
for the BlogXpertise website http://www.blogxpertise.com
any updates to this script will be posted to BlogXpertise
please leave this message and give credit where credit is due!
**/

$(document).ready(function() {
 // Chiều rộng tối đa của ảnh thu nhỏ (thumbnail)
 var dimension = 90;
 
 // Số ký tự lấy ra
 var words = 80;
 
 // Ảnh nằm ở đâu left, right, none hay là inherit
 var orientation = "left"; 
 
 // Mặc định 1 là hình vuông, 0 là hình theo tỉ lệ bình thường
 // Lưu ý hình vuông chỉ hoạt động nếu up file tại blog
 var square = 1;
 
 // Kết thúc của đoạn ký tự lấy ra
 var addon = "...";
 
 // Tên nút reademore, nếu không muốn hiện thì để trống
 var readmore = "Đọc tiếp";
 
 // Khoảng cách ảnh đối với xung quanh (margin)
 var margin = "1em";
 
 $('.post-body').each(function(n, wrapper){
  var newContents = "";
  var wrapper = $(wrapper);
  var image = $(wrapper).find('img').first();

   var textContents = wrapper.text().split(' ').slice(0,words).join(' ');
  if (words > 0) textContents += addon;
  wrapper.empty();

   if (image.attr('src')) {
   var imageOriginalHeight = image.height();
   var imageOriginalWidth = image.width();
   var imageParent = $(image).parent();
   wrapper.append(imageParent).append(textContents);
   if (square) {
    image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + dimension + '-c')});
    image.attr('width',dimension).attr('height',dimension);
   } else {
    image.attr({src : image.attr('src').replace(/s\B\d{3,4}/,'s' + dimension)});
    image.attr('width',dimension);
    var newHeight = (imageOriginalHeight/imageOriginalWidth * dimension).toFixed(0);
    image.attr('height',newHeight);
   }
   imageParent.css('clear','none').css('float',orientation);
   
   switch (orientation) {
    case "left":
     imageParent.css('margin-left',0).css('margin-right',margin);
     break;
    case "right":
     imageParent.css('margin-left',margin).css('margin-right',0);
     break;
    default:
     imageParent.css('margin-left',margin).css('margin-right',margin);
     break;
   }
  } else wrapper.append(textContents);
  if (readmore) {
   var link = wrapper.parent().find('h3 a').attr('href');
   wrapper.append('<br /><a href="' + link + '">' + readmore + '</a>');
  } 
  
  wrapper.append('<hr>');
  $('hr').css('width','100%').css('background-color','transparent').css('border-width',0);
 });
 
});
//]]></script>
</b:if>

Và như các bạn đã thấy chỉ cần chèn đoạn script trên vào trên thẻ không cần thay đổi bất cứ gì trong template của Blogger và bạn đã có riêng cho mình auto readmore với thumbnail một cách đơn giản, đặc biệt là hình ảnh không bị biến dạng.

Một lưu ý nhỏ là đoạn script này khá là dài nên nó sẽ làm cho tốc độ tải trang của blog của bạn giảm đi đáng kể, hiện tại trên blog của mình có khá nhiều bài viết hướng dẫn các bạn có thể lấy ra một ảnh cắt và resize ảnh đúng kích thước mà bạn mong muốn, bạn có thể kết hợp chúng với Auto Readmore không sử dụng javascript để đạt được tốc độ tối ưu cho blog của bạn.

Cập nhật thủ thuật tạo auto readmore tốt nhất tại đây: Auto readmore với thumbnail 2014