Kênh Tên Miền chuyên cung cấp tên miền đẹp, giá rẻ! Hãy liên hệ kỹ thuật: 0914205579 - Kinh doanh: 0912191357 để được tư vấn, hướng dẫn miễn phí, Cảm ơn quý khách đã ủng hộ trong thời gian qua!
kiem tien, kiem tien online, kiem tien truc tuyen, kiem tien tren mang
Sunday, May 18, 2014

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à mình ưng ý nhất.



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


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. Chúc các bạn thành công.

0 comments:

Post a Comment

Popular Posts