Auto readmore thumbnail cho Blogspot (sử dung Javascript)

Từng bước tạo Auto readmore thumbnail cho Blogspot, sử dùng hình ảnh mặc định cho bài viết không chứa hình ảnh

Để tạo Auto readmore thumbnail cho Blogspot bạn làm theo các bước sau:
Bước 1:

- Đăng nhập  vào Blog
- Vào Mẫu Template => chọn mục  Chỉnh sử HTML (Edit HTML)  
- Tìm đoạn code bên dưới , nhấn Ctrl +F sử dụng chức năng tìm kiếm đoạn mã dưới đây:
        - Chèn vào trước thẻ  ]]></b:skin> đoạn mã dưới đây:

]]></b:skin>

- Chèn vào trước thẻ  ]]></b:skin> đoạn mã dưới đây:

.sumpost{text-shadow:0 1px #fff;color:#111;font-family:arial;font-size:12px;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:100px;width:120px;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{float:right;margin:8px 0 0;padding:0 0 0 0}.readmore a{color:#d7034e;padding:0}
.readmore a:hover{color:#00f}.borderline{border-top:1px solid #bbb;border-bottom:1px solid #fff;margin:4px 0 0 0}

Trong đó:

• font-size:16px: Là kích thước tiêu đề của bài viết trong auto readmore
• color:#d7034e: Là màu chữ đọc thêm (đọc tiếp, readmore)

Bước 2: Thêm đoạn mã bên dưới vào trước thẻ đóng </head>

<script type='text/javascript'>var thumbnail_mode = "no-float" ;no_image = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgzQC6NYi2JdPUyMit3r4CSWUMMwBeBKVsvkOnm8dRmk_joNd7jh1CZp4UyKtMGUAe8TZf-S72Ax4pvgswgZZ95tcaGUKTmwnVOFMbObaJEn-u3Pt-RdglhoiFGQxmRfPXM8R6DKNjgr7ms/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 đó:

       . Sumposts = 500 là số ký tự hiển thị.
       . Đường dẫn màu xanh là hình ảnh đại diện khi bài viết của bạn không có hình ảnh hoặc không trích xuất được hình ảnh từ bài viết. Bạn có nên thay thế bằng hình ảnh của bạn, đề phòng trường hợp hình ảnh bị xóa

Bước 3:

      - Tìm đến dòng chứa đoạn mã  bên dưới

<data:post.body/>

 - Thay thế đoạn mã vừa tìm được bằng đoạn mã 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>

Chú ý: trong bước này tùy từng template mà bạn đang sử dụng có thể có 1 hay nhiều đoạn mã

<data:post.body/>

Bạn nên đánh dấu lại rồi thay thế lần lượt từng trường hợp một, bạn nên thêm thẻ ghi chú <!—thẻ ghi chú --> để tiện cho việc tìm kiếm và sửa chữa về sau.

 Cuối cùng là bạn lưu lại và kiểm tra thành quả.

 Đến đây bạn đã hoàn thành các bước Auto readmore thumbnail cho Blogspot, Bạn nhấn lưu lại mẫu , quay về trang chủ của blog để xem thành quả.