Auto Readmore with Thumbnail chuẩn 2014

Sau khi đã chia sẻ với các bạn hai thứ đó là Auto Readmore không thumbnail cho Bloggervà Lấy ra ảnh đầu tiên của bài viết của Blogger, thì hôm nay kết hợp chúng lại mình xin đưa ra auto readmore chuẩn nhất. Chuẩn ở đây có nghĩa là tối ưu nhất về cả tính năng lẫn tốc độ xử lý của nó.

Auto Readmore thì chắc ai cũng biết rồi, mà thôi cứ giải thích cho nó dài bài ra, haha. Đố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 with Thumbnail chuẩn 2014

Tương tự như những đoạn Auto Readmore mà mình đã chia sẻ, 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 != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <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='&quot;summary&quot; + data:post.id'>
   <data:post.body/>
  </div>
<script type='text/javascript'> createSummary(&quot;summary<data:post.id/>&quot;);</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 != &quot;item&quot;'>
 <b:if cond='data:blog.pageType != &quot;static_page&quot;'>
   <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:else/>
    <div class='postThumb'>
     <img src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgC2m61s8HFshhbafFc7IPZCa3wOAj2_eaLDLWoxJ5PMa99pGLdv3JCh7SOLllh2nfikHVRF8PGDzMzFoRKvrPwAGiMoA3RWq8cMYSAIV4Lndy8pxjd3UJQI9XBYNtvW9oCGYH1vCOaebuZ/w360-c-h220/no-image.png' expr:alt='data:post.title' expr:title='data:post.title' />
    </div>
   </b:if>
  <div expr:id='&quot;summary&quot; + data:post.id'>
   <data:post.body/>
  </div>
<script type='text/javascript'> createSummary(&quot;summary<data:post.id/>&quot;);</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ã:

<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
ĐOẠN JS
</b:if></b:if>

để nó khỏi cắt cả mấy hình trong khi xem tại trang bài viết nữa nhé.

Nguồn KhamPha Blog's

Socializer Widget by Nguyen D. Khanh

SOCIALIZE IT →

Tweet

FOLLOW US →

SHARE IT →

Các bạn có thể tham khảo thêm nhiều kiến thức từ các bài viết mà mình đã SEO bằng các Từ khóa bên dưới bài đăng nầy để tìm hiểu thêm về các khái niệm và ứng dụng có liên quan nhé..