Auto readmorre với thumbnail cho blogspot sử dụng javarscipt - Style 2

Hôm nay namkna hướng dẫn các bạn thủ thuật auto readmore (Tự động tóm tắt bài viết cho Blogspot) với cách hiển thị hoàn toàn khác so với thủ thuật trước đây. Thủ thuật lần này sẽ giúp các bạn có thể tùy chỉnh vị trí ảnh thumbnail, tiêu đề bài viết, ngày tháng đăng bài, tên tác giả và phần mô tả theo ý bạn. Ảnh thumb sẽ được float về bên trái và tiêu đề, nội dung hay thông tin bài viết được đưa về phía bên phải trông chuyên nghiệp hơn và dễ dàng tùy chỉnh theo ý mình.

Ảnh minh họa:

» 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) - tiếp tục
4. Chọn mở rộng mẫu tiện ích (Expand Widget Templates) => Xem video:

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

.sumpost{text-shadow:0 1px #fff;color:#111;font-family:arial;line-height:1.4;margin:0;padding:6px 8px}
.img-post img{background:#fff;float:left;margin:6px 8px 0 8px;border:1px solid #ccc;height:150px;width:170px;padding:2px}
.sumpost h2{font-size:16px;background:none;padding:0;margin:0;line-height:1.2}
.sumpost h2 a{color:#160}
.sumpost .postinfo{color:#0e3f4f;padding:3px 0 3px 8px;margin:0;border-bottom:dotted #ddd 1px}
.sumpost .postinfo .numcm{margin:0 2px 0 2px}
.sumpost .postinfo .author{margin:0 2px 0 0}
.sumpost .postinfo .numcm .num{color:#f80}
.sumpost .postinfo .label{margin:0 2px 0 2px}
.sumpost .postinfo .label a{color:#b0039a}
.readmore{margin:8px 0 0;padding:0 0 0 0}
.readmore a{background:#0D7909;margin-right:4px;padding:4px 8px;color:#F6FBC8;text-shadow:1px 1px 1px #000;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;float:right}
.readmore a:hover{background:#006666;color:#FFF;text-decoration:none;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px}
.borderline{border-top:1px solid #bbb;border-bottom:0 solid #fff;margin:4px 0 0 0}

Trong đó:

• font-size:16px: Là tiêu đề của bài viết trong auto readmore
• background:#0D7909 là màu nền chữ đọc thêm color:#F6FBC8 là màu chữ đọc thêm (đọc tiếp, readmore)

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

<script type='text/javascript'>
var thumbnail_mode = "no-float" ;
no_image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgFhn9EWobICmAoVUnSsIyrcZISysHzd8gLJCInSq0TW-yEo0uYHcvTJjYXqWYfb8814MRVGtMk8rHoie9osiud63epaQrRErdHu7hYd2hRPRLGZx7lTqgPOQNZQw55IrNjHFh5kqQ95H6J/s1600/no-image-namkna-blogspot-com.PNG";
sumposts = 500; 
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,d){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--){d[e(c)]=k[c]||e(c)}k=[function(e){return d[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}('A C(5,8){k(5.t("<")!=-1){4 s=5.D("<");E(4 i=0;i<s.e;i++){k(s[i].t(">")!=-1){s[i]=s[i].B(s[i].t(">")+1,s[i].e)}}5=s.L("")}8=(8<5.e-1)?8:5.e-2;K(5.G(8-1)!=\' \'&&5.t(\' \',8)!=-1)8++;5=5.B(0,8-1);H 5+\'...\'}A J(w,j,d,g,n,h,o,r,m,q){4 3=M.F(w);4 l="";4 j=j;4 d=d;4 g=g;4 n=n;4 h=h;4 o=o;4 r=r;4 m=m;4 q=q;4 7=3.I("7");k(7.e==0){l=\'<3 6="7-z"><a f="\'+d+\'"><7 u="\'+O+\'"/></a></3>\'}k(7.e>=1){l=\'<3 6="7-z"><a f="\'+d+\'"><7 u="\'+7[0].u+\'"/></a></3>\'}4 x=l+\'<3 6="N"><v><a f="\'+d+\'">\'+j+\'</a></v><3 6="W"><9 6="g">\'+n+\'<b> \'+g+\'</b></9> | <9 6="V"><9 6="T">\'+h+\' </9>\'+o+\'</9> | <9 6="P">\'+m+\'<a f="\'+q+\'"> \'+r+\'</a></9></3> \'+C(3.y,U)+\'...<3 6="Q"><a f="\'+d+\'">Đọc Rếp...</a></3></3><3 6="S"></3>\';3.y=x}',59,59,'|||div|var|strx|class|img|chop|span||||urltitle|length|href|author|numcms||title|if|imgtag|Labelslabel|authorLabel|numLabel||urllabel|labelpost||indexOf|src|h2|pID|summary|innerHTML|post|function|substring|removeHtmlTag|split|for|getElementById|charAt|return|getElementsByTagName|createSummaryAndThumb|while|join|document|sumpost|no_image|label|readmore|ti|borderline|num|sumposts|numcm|postinfo'.split('|'),0,{}))
//]]>
</script>
<style><b:if cond='data:blog.pageType == "index"'>.post-footer,.post h3,h2.date-header{display:none;}</b:if></style>

Trong đó:
        + Thay 500 là số ký tự hiển thị.
        + Link ảnh màu xanh là ảnh sẽ xuất hiện khi bài viết của bạn không có ảnh đại diện. Bạn có thể thay thế bằng link ảnh khác. Nếu vẫn dùng ảnh đó thì hãy tải về Tại đây (hoặc Tại đây) sau đó Upload lên blog và thay link vào để tránh ảnh bị die khi mình xóa.
7. Tiếp theo bạn hãy tìm đến dòng code bên dưới

<data:post.body/>

8. Thay thế code vừa tìm được thành đoạn code bên dưới:

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<data:post.body/>
<b:else/>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<data:post.body/>
<b:else/>
<div expr:id='&quot;summary&quot; + data:post.id'>
<p><data:post.body/></p>
</div>
<b:loop values='data:post.labels' var='label'>
<script type='text/javascript'>
createSummaryAndThumb(&quot;summary<data:post.id/>&quot;,&quot;<data:post.title/>&quot;,&quot;<data:post.url/>&quot;,&quot;<data:post.author/>&quot;,&quot;<data:top.authorLabel/>&quot;,&quot;<data:post.numComments/>&quot;,&quot;<data:top.commentLabelPlural/>&quot;,&quot;<data:label.name/>&quot;,&quot;<data:postLabelsLabel/>&quot;,&quot;<data:label.url/>&quot;);
</script>
</b:loop>
</b:if>
</b:if>

9. Cuối cùng là save lại và kiểm tra thành quả nha.
Xem thêm:
Auto readmore không sử dụng javascript cho Blog

                                                                                                    ( Nguồn: namkna)
                                                                                                             Thu thuat vi tinh