Auto readmore với thumbnail dùng scripts cho blogspot style 3

Hôm nay namkna sẽ giới thiệu thêm cho các bạn một kiểu tóm tắt bài viết ở trang chủ (Auto readmore) sử dụng javarscripts. Trong tiện ích này có ảnh thumbnail cùng một hàng với tiêu đề và mô tả.

Phiên bản này sẽ khắc phục lỗi lặp lại tiêu đề và nhận xét của style 2.
Các bạn có thể xem ảnh minh họa hoặc demo.

VIEW DEMO

» Bắt đầu thủ thuật

1. Đăng nhập vào tài khoản Blogger

2. Vào phần Mẫu (Template)

3. Chọn chỉnh sửa HTML (Edit HTML)

4. Dán code bên dưới vào trước thẻ ]]></b:skin> (Mẹo: Bấm chuột vào một vị trí bất kỳ trong ô chỉnh sửa HTML vào để sử dụng khung tìm kiếm nội tuyến như bài này.)

/*read more by http://namkna.blogspot.com/ */
.post-body.entry-content{border: 1px solid #ddd;padding:5px}.post-header-line-1{font-style:italic;font-size:11px;margin:0 0 6px 133px}
.post img{margin:10px 0 6px}
.post h2{margin-left:133px;font-size:110%}
.numberingcomments a:link,.numberingcomments a:visited{float:right;color:#36F;text-decoration:none;padding-right:10px;padding-top:5px;padding-left:10px;font-weight:700}
.numberingcomments a:hover,.numberingcomments a:active{color:#FF0A47}
.ngay-gio{font-size:11px;font-style:italic;float:right;color:#454545;font-weight:400;margin:0;padding:0}

5. Chèn tiếp code bên dưới vào trước thẻ </head>

<b:if cond='data:blog.pageType == &quot;index&quot;'> 
<!-- readmore style 3 http://namkna.blogspot.com/ -->  
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 400;
summary_img = 160;
img_thumb_height = 85;
img_thumb_width = 124;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('l m(a,b){6(a.5("<")!=-1){3 s=a.O("<");N(3 i=0;i<s.4;i++){6(s[i].5(">")!=-1){s[i]=s[i].8(s[i].5(">")+1,s[i].4)}}a=s.J("")}b=(b<a.4-1)?b:a.4-2;A(a.v(b-1)!=\' \'&&a.5(\' \',b)!=-1)b++;a=a.8(0,b-1);t a+\'...\'}l r(a){3 b=D.p(a);3 c="";3 d=b.q("7");3 e=u;6(d.4>=1){c=\'<k w="x:y; z:j B 0 j;;C:-P 0 0 0"><7 E="ẢF G họa" g="\'+d[0].g+\'" H="\'+I+\'9" K="\'+L+\'9" /></k>\';e=M}3 f=c+\'<n>\'+m(b.o,e)+\'</n>\';b.o=f}',52,52,'|||var|length|indexOf|if|img|substring|px|||||||src|||0px|span|function|removeHtmlTag|div|innerHTML|getElementById|getElementsByTagName|createSummaryAndThumb||return|summary_noimg|charAt|style|float|left|padding|while|10px|margin|document|alt|nh|minh|width|img_thumb_width|join|height|img_thumb_height|summary_img|for|split|38px'.split('|'),0,{}))
//]]>
</script>
</b:if>

Trong đó:

• summary_noimg = 400; là số ký tự của phần mô tả
  summary_img = 160; là số ký tự của phần tiêu đề.
  img_thumb_height = 85; là chều cao của ảnh thumbnail
  img_thumb_width = 124; là chều rộng của ảnh thumbnail

7. Tiếp theo bạn hãy tìm đến dòng code bên dưới

<data:post.body/>

- Thay thế code vừa tìm được thành đoạn code bên dướ (Lưu ý có tùy theo template mà có từ 2 đến 4 đoạn code như bên trên. bạn phải thay đúng vị trí thì mới hoạt động nha.):

<!-- Start auto read more namkna.blogspot.com -->
<!-- BAI VIET KHI XEM LABEL -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<h2><a expr:href='data:post.url'><data:post.title/></a></h2>
<span class='post-header-line-1'><b:if cond='data:top.showAuthor'>
<data:post.timestamp/> |  <script>var ngaygio =&#39;<data:post.dateHeader/>&#39;;</script><script>document.write(ngaygio);</script></b:if></span>
<div style='clear: both;'/>    
<div class='post-body'>    
<div expr:id='&quot;summary&quot; + data:post.id'><data:post.body/></div>
<script type='text/javascript'>createSummaryAndThumb(&quot;summary<data:post.id/>&quot;);
</script>
</div><div style='clear: both;'/>       
</b:if>  
      <!-- XEM BAI VIET -->
<b:if cond='data:blog.pageType == &quot;item&quot;'> 
<data:post.body/>
</b:if>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
</b:if>
<div class='clear'/>  
<!-- End Auto readmore use scripts for blogspot style 3 - http://namkna.blogspot.com/-->

8. Lưu mẫu lại và xem kết quả nha.
Nguồn Terocket

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é..