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

Mặc định với những bài viết trên Blogger (blogspot) nếu bạn muốn cho bài viết ngắn lại ở dạng trích dẫn, bạn sẽ sử dụng dấu ngắt của trình soạn thảo văn bản. Tuy nhiên, làm như vậy sẽ khá thủ công và lượng kí tự hiển thị mỗi bài viết không đều, không thẩm mỹ. Hôm nay mình sẽ hướng dẫn các bạn cách tạo trích dẫn bài viết tự động với hình thu nhỏ (Auto read more with thumbnail) cho Blogger.

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>

.posts-doc-home .contpost .baivietanhto{color:#444;text-align:left;background:#fff;padding:8px 8px;margin:0 0 0 0}
.posts-doc-home .contpost .baivietanhto h3{height:20px;overflow:hidden;font-family:tahoma;padding:0 0 3px 0;font-size:14px;line-height:1.4}
.posts-doc-home .contpost .baivietanhto h3 a{color:#373737}
.posts-doc-home .contpost .baivietanhto h3 a:hover,.posts-doc-home .contpost .baivietanhto h3 a:hover{color:#e74c3c}
.posts-doc-home .contpost .baivietanhto img{width:100%;height:160px}

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;'>
<script type='text/javascript'>
 //<![CDATA[
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhcB-A0tUh-RToaqQ5O6M6igWE2V9CcuW5plJ9vpPNt2MgVU1xtEVh58Ras0bMPKvxIzHGLFcblj_596El3Z_iRZq0_1dxOPQY_0e4BBW646Lxv8xizfrO0X3bua5kKLlHKjZB4uppmOoOS/s287/noimage.gif";
showRandomImg = true;
aBold = true;
summaryPost = 140;
summaryPost1= 80;
summaryTitle = 35;
numposts1 =5;
numposts2 =4;
numposts4 = 1;
numposts5 = 6;
numposts6 = 10;
numposts7 = 10;
numposts8= 6;
function removeHtmlTag(strx,chop){
 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);
  }
 }
 s =  s.join("");
 s = s.substring(0,chop-1);
 return s;
}
function showrecentposts1bv(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
 if (numposts5 <= json.feed.entry.length) {
  maxpost = numposts1;
  }
 else
       {
    maxpost=json.feed.entry.length;
    }
     for (var i = 0; i < maxpost; i++) {
     var entry = json.feed.entry[i];
     var posttitle = entry.title.$t;
  var pcm;
     var posturl;
     if (i == json.feed.entry.length) break;
     for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'alternate') {
          posturl = entry.link[k].href;
          break;
        }
     }
  for (var k = 0; k < entry.link.length; k++) {
        if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
          pcm = entry.link[k].title.split(" ")[0];
          break;
        }
     } 
     if ("content" in entry) {
        var postcontent = entry.content.$t;}
     else
     if ("summary" in entry) {
        var postcontent = entry.summary.$t;}
     else var postcontent = "";
   
     postdate = entry.published.$t;

 if(j>imgr.length-1) j=0;
 img[i] = imgr[j];

 s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
 if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
 //cmtext = (text != 'no') ? '<i><font color="'+acolor+'">('+pcm+' '+text+')</font></i>' : '';
 var month = [1,2,3,4,5,6,7,8,9,10,11,12];
 var month2 = ["1","2","3","4","5","6","7","8","9","10","11","12"];
 var day = postdate.split("-")[2].substring(0,2);
 var m = postdate.split("-")[1];
 var y = postdate.split("-")[0];
 for(var u2=0;u2<month.length;u2++){
  if(parseInt(m)==month[u2]) {
   m = month2[u2] ; break;
  }
 }
 var daystr = day+ '/' + m + '/' + y ;
 if (i==0) {
 var trtd = '<div class="widgetsplitone_left"><a title="'+posttitle+'" href="'+posturl+'"><span class="play-dong"></span><img width="278" height="139" alt="'+posttitle+'" title="'+posttitle+'" class="imagefeatured wp-post-image" src="'+img[i]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+posturl+'" title="'+posttitle+'">'+posttitle+'</a></h5><div class="entry-meta"><span class="meta-date">'+daystr+'</span></div><div class="contentstyle"><p>'+removeHtmlTag(postcontent,summaryPost)+'(...)</p></div><div class="clear"></div></div><div class="widgetsplitone_right">';     
  document.write(trtd);
           }
 if ((i>0)&&(i<maxpost)) {
 var trtd = '<div class="widgetsplitoneall_left"><a title="'+posttitle+'" href="'+posturl+'"><img title="'+posttitle+'" alt="'+posttitle+'" class="imagewidgetthumb wp-post-image" height="40" src="'+img[i]+'" width="60"/></a><div class="featuredPost"><b><a title="'+posttitle+'" href="'+posturl+'">'+posttitle+'</a></b><div class="entry-meta"><span class="meta-date">'+daystr+'</span></div><div class="borderfix"></div></div></div>'; 
 document.write(trtd);
  }   
  j++;
 }
 document.write('</div>');
}
//]]>
</script>
</b:if>

6. Tiếp theo bạn hãy chèn code bên dưới chỗ nào bạn thích

<script>   
/* <![CDATA[ */           
document.write("<script  src=\"/feeds/posts/default/-/sản%20phẩm%20số%20hóa?max-results="+numposts1anhto5anhnho+"&orderby=published&alt=json-in-script&callback=showrecentposts1bv\"><\/script>");
/* ]]> */
</script>

Blogger Tips

https://severphim.blogspot.com/2019/05/auto-readmore-voi-thumbnail-dung.html

Previous Post

Next Post

Top Post