Auto Readmore-Tự động tóm tắt ở trang chủ sử dụng javascript-Read more for blogspot

Auto Readmore-Tự động tóm tắt bài viết ở trang chủ cho blogspot là khâu cần thiết khi bạn tạo dựng một blogspot hay website.

Có hai loại thường sử dụng là

- Tự động tóm tắt bài viết ở trang chủ không dùng javascript
- Tự động tóm tắt bài viết ở trang chủ dùng javascript

Mỗi loại thường có ưu nhược điểm riêng của nó. Đối với loại không dùng javascript thì tối ưu được tốc độ load trang.Tự lấy được thẻ alt,ít gây lỗi W3C.

Nhưng nhược điểm là giới hạn kích thước ảnh ở cỡ 72x72 nếu to hơn sẽ bị nhòe,ảnh cần post trực tiếp lên blog hay picasa mà không nhận ảnh của bên thứ ba.

Với loại dùng javascript thì khắc phục được vấn đề về ảnh và ảnh hưởng tới tốc độ load là không đáng kể.

Bài này giới thiệu tới các bạn 2 kiểu tự động tóm tắt bài viết ở trang chủ có sử dụng javascript cho blogspot.

Kiểu 1

Xem ảnh:

Trước khi thực hiện thủ thuật này thì bạn nên sao lưu lại template gốc để đề phòng, sau đó vào phần chỉnh sửa HTML rồi chèn đoạn code css sau phía trên ]]></b:skin>

.readmore{float:right;display:block;color:#f90 !important;margin-top:5px;font-size:15px;font-weight:bold}

Tiếp theo chèn đoạn code sau vào trước thẻ </head>

<!-- Auto Read More -->
    <script type='text/javascript'>
      var summaryConf = {
        showImage: true,
        imgFloat: &#39;left&#39;,
        imgWidth: 270,
        imgHeight: 160,        defaultThumb:&#39;https://3.bp.blogspot.com/-wzUQ6qwlXeo/VxNZIE6f5XI/AAAAAAAACyM/xo9WH8TFOuImnPsSwjj0vUAKGQ2cV5qgwCLcB/s1600/no-thumbnail.png&#39;,
        words: 55,
        wordsNoImg: 80,
        skip: 0,
        showHome: true,
        showLabel: true
      };
      //<![CDATA[
      function summary(m){summary.count=summary.count||0,summary.count++;var a=-1==location.href.indexOf("/search/label/")&&-1==location.href.indexOf("/search?"),r=-1!=location.href.indexOf("/search/label/");if(!(summary.count<=summaryConf.skip)&&(!a||summaryConf.showHome)&&(!r||summaryConf.showLabel)){var n=document.getElementById(m),i=n.getElementsByTagName("img"),s="";if(summaryConf.showImage)if("none"!=summaryConf.defaultThumb){if(s='<img width="'+summaryConf.imgWidth+'" height="'+summaryConf.imgHeight+'"',"no"!=summaryConf.imgFloat){var o=' style="float:'+summaryConf.imgFloat+';margin:0 10px 5px 0;padding:0"';s+=o}s+=' src="'+(i.length>0?i[0].src:summaryConf.defaultThumb)+'" />'}else if(i.length>0){if(s='<img width="'+summaryConf.imgWidth+'" height="'+summaryConf.imgHeight+'"',"no"!=summaryConf.imgFloat){var o=' style="float:'+summaryConf.imgFloat+';margin:0 10px 5px 0;padding:0"';s+=o}s+=' src="'+i[0].src+'" />'}if(""!=s)var e=summary.strip(n.innerHTML,summaryConf.words);else var e=summary.strip(n.innerHTML,summaryConf.wordsNoImg);n.innerHTML=s+e+"..."}}summary.strip=function(m,a){return m.replace(/<.*?>/gi,"").split(/\s+/).slice(0,a-1).join(" ")};      
      //]]>
    </script>

Bước tiếp theo chọn mở rộng tiện ích tìm đến <data:post.body/> sửa nó thành:

<span expr:id='data:post.id'>
                            <data:post.body/>
                          </span>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
                            <div class='readmore'>
                              <a expr:href='data:post.url'>
                                Read more &#187;
                              </a>
                            </div>
                            <script type='text/javascript'>
                              summary(&quot;<data:post.id/>&quot;)</script>
                            <b:else/>
                            <b:if cond='data:blog.pageType == &quot;archive&quot;'>
                              <script type='text/javascript'>
                                summary(&quot;<data:post.id/>&quot;)</script>
                            </b:if>
                          </b:if>
                    <div class='clear'/>

Trong đó:
- imgWidth: 270,
- imgHeight: 160,
Là chiều rộng và chiều cao của ảnh thumbnail.
Các bạn có thể chỉnh đường viền,nền..cho ảnh thumbnail bằng cách thêm css vào sau phần bôi màu xanh trong code javascript và ngăn cách mỗi thuộc tính bằng dấu chấm phẩy(;).

Kiểu 2

Để thực hiện thủ thuật này bạn vào chỉnh sửa HTML và dán đoạn code sau vào trên thẻ ]]></b:skin>

.thumb,.no-thumb{float:left;margin-right:15px;width:164px;height:164px;overflow:hidden;position:relative}
.no-thumb{display:block;background:url(https://lh4.googleusercontent.com/-G9M2DTCTUwM/Tlh-2pwtc5I/AAAAAAAABKM/kCJg-Kf3W2M/no_image_yet.jpg) 0 0 no-repeat;}
a.jump-link{float:right;display:block;color:#005595 !important;margin-top:5px;font-size:16px;font-weight:bold}

Tiếp theo chèn đoạn code sau vào trước thẻ </head>

<script type='text/javascript'>//<![CDATA[
var snippet=60; G="s164-p";
function H(b,a){return b.replace(/<.*?>/gi,"").split(/\s+/).slice(0,a-1).join(" ")} function rm(b){var b=document.getElementById(b),a="",a=b.getElementsByTagName("img");if(1<=a.length){C=a[0].src;B=C.split("/");D=B[2];if(-1!=D.indexOf("blogspot")||-1!=D.indexOf("googleusercontent")||-1!=D.indexOf("ggpht"))F=B[7],C=-1==F.indexOf(".")?C.replace(F,G):B[0]+"//"+B[2]+"/"+B[3]+"/"+B[4]+"/"+B[5]+"/"+B[6]+"/"+G+"/"+B[7];a='<div class="thumb"><img src="'+C+'" /></div>'}else a='<div class="no-thumb"></div>';b.innerHTML=a+H(b.innerHTML,snippet)+"..."};
//]]></script>

Bước tiếp theo chọn mở rộng tiện ích tìm đến <data:post.body/> sửa nó thành:

<b:if cond='data:blog.pageType == &quot;index&quot;'>
<span expr:id='&quot;p&quot; + data:post.id'><data:post.body/></span>
<script type='text/javascript'>rm(&quot;p<data:post.id/>&quot;)</script><b:else/><data:post.body/></b:if>
<b:if cond='data:post.hasJumpLink'>
<a class='jump-link' expr:href='data:post.url + &quot;#more&quot;'>Read More</a><b:else/>
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<a class='jump-link' expr:href='data:post.url' rel='nofollow'>Read More</a>
</b:if>
</b:if>
<div class='clear'/>

Lưu ý:
Màu đỏ là kích thước của ảnh thumb.
60 là số kí tự đoạn trích dẫn.