Auto Readmore tự động lấy ảnh bài viêt 2014

Auto Readmore thì chắc ai cũng biết rồi. Đối với đoạn mã mình chia sẻ ở đây là kết hợp giữa Javascript mà đoạn mã mặc định của Blogger, giúp tự động cắt đoạn văn bản dài thòng ở trang chủ trở nên ngắn gọn theo quy định của chúng ta, và đồng thời lấy ra hình ảnh đầu tiên đặt vào vị trí bên trái hoặc phải giúp mô tả cho bài viết đó.

Auto Readmore tự động lấy ảnh bài viêt 2014

Tương tự như những đoạn Auto Readmore khác, bạn tìm đến thẻ </head> và chèn lên nó

<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 createSummary(pID) {
var div = document.getElementById(pID);
var summ = 150;
var summary = '<div><p>' + removeHtmlTag(div.innerHTML, summ) + '</div></p>';
div.innerHTML = summary;
}
//]]></script>

Tiếp tục thay thế toàn bộ đoạn mã sau

<data:post.body/>

Nếu không muốn có ảnh thumbnail mặc định khi không có ảnh thì bằng đoạn này :

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<b:if cond='data:post.firstImageUrl'>
<div class='postThumb'>
<img expr:src='data:post.firstImageUrl' expr:title='data:post.title' expr:alt='data:post.title'/>
</div>
</b:if>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'> createSummary("summary<data:post.id/>");</script>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Còn nếu muốn có ảnh thumbnail mặc định thì dùng cái này

<b:if cond='data:blog.pageType != "item"'>
<b:if cond='data:blog.pageType != "static_page"'>
<div class='postThumb'>
<img expr:src='data:post.firstImageUrl' expr:title='data:post.title' expr:alt='data:post.title'/>
</div>
<b:else/>
<div class='postThumb'>
<imgsrc='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIw5Pe8rccO6W_Zlnbm_CTPL_Me-JbZFJLnqYJ6ji95lSJfhbtIOsFpiYIyPkKFdDZjGxizKd6XrtHIDtf1PXF_rXFTTsAvDyV2udUnYq_9_tn6E4R6b-Bf4DyhPsN4giW-BBcgp-GP-k7/w360-c-h220/no-image.png' expr:alt='data:post.title' expr:title='data:post.title' />
</div>
</b:if>
<div expr:id='"summary" + data:post.id'>
<data:post.body/>
</div>
<script type='text/javascript'> createSummary("summary<data:post.id/>");</script>
<b:else/>
<data:post.body/>
</b:if>
<b:else/>
<data:post.body/>
</b:if>

Cuối cùng để trang trí cho nó bạn chèn đoạn css sau lên trên thẻ ]]></b:skin>

.postThumb { float: left; margin-right: 20px; width: 300px; height: 250px }

Bạn có thể tự tủy chỉnh lại theo ý mình và lưu lại.

Lời kết : Thì đây là đoạn mã mình nghĩ là ngon nhất trong tất cả đám auto readmore rồi. Trong trường hợp bạn không thích hình ảnh méo mó vì css thì bạn có thể xem qua bài viết Resize và cắt ảnh nhiều thành phần của Blogger, bạn hãy sử dụng nó với id là #Blog1 và nhớ đặt nó trong đoạn mã:

Nguồn : iChiaSe.Biz