Thêm recent post 2 cột cho blogspot

Chào các bạn tại mình thấy code này cũng hay, mới mẻ nên có ý định viết bài chia sẻ & hướng dẫn thêm recent post 2 cột dành cho blogspot.

HƯỚNG DẪN CÁCH LÀM:

Bước 1: Tìm thẻ </head> và thêm đoạn js bên dưới lên trên nó

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){document.write('<ul class="label_with_thumbs">');for(var e=0;e<numposts;e++){var r,n=t.feed.entry[e],i=n.title.$t;if(e==t.feed.entry.length)break;for(var o=0;o<n.link.length;o++){if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var m=n.link[o].title,l=n.link[o].href;if("alternate"==n.link[o].rel){r=n.link[o].href;break}}var u;try{u=n.media$thumbnail.url}catch(t){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhz-sUHSTdYQraZL0LPPtvbWttedW4U_GcLkVocLfsb-ZQjk081gk0I041opHroE-OJl3OMA64iavIi3MWMRcoYaw2IHfARApHeimRsydnveIZO7dwX5x-NJIErI5914q5RIc9LF3mxNPMH/"}var h=n.published.$t,p=h.substring(0,4),f=h.substring(5,7),g=h.substring(8,10),w=new Array;if(w[1]="Jan",w[2]="Feb",w[3]="Mar",w[4]="Apr",w[5]="May",w[6]="Jun",w[7]="Jul",w[8]="Aug",w[9]="Sep",w[10]="Oct",w[11]="Nov",w[12]="Dec",document.write('<li class="clearfix">'),1==showpostthumbnails&&document.write('<a href="'+r+'" target ="_top"><img class="label_thumb" src="'+u+'"/></a>'),document.write('<strong><a href="'+r+'" target ="_top">'+i+"</a></strong><br>"),"content"in n)A=n.content.$t;else if("summary"in n)A=n.summary.$t;else var A="";var y=/<\S[^>]*>/g;if(A=A.replace(y,""),1==showpostsummary)if(A.length<numchars)document.write(""),document.write(A),document.write("");else{document.write("");var v=(A=A.substring(0,numchars)).lastIndexOf(" ");A=A.substring(0,v),document.write(A+"..."),document.write("")}var k="",_=0;document.write("<br>"),1==showpostdate&&(k=k+w[parseInt(f,10)]+"-"+g+" - "+p,_=1),1==showcommentnum&&(1==_&&(k+=" | "),"1 Comments"==m&&(m="1 Comment"),"0 Comments"==m&&(m="No Comments"),k+=m='<a href="'+l+'" target ="_top">'+m+"</a>",_=1),1==displaymore&&(1==_&&(k+=" | "),k=k+'<a href="'+r+'" class="url" target ="_top">Read More</a>',_=1),document.write(k),document.write("</li>"),1==displayseparator&&e!=numposts-1&&document.write("")}document.write("</ul>")}
//]]>
</script>
<script type='text/javascript'>
//<![CDATA[
function labelthumbs(t){for(var e=0;e<numposts;e++){var r,n=t.feed.entry[e],m=n.title.$t;if(e==t.feed.entry.length)break;for(var i=0;i<n.link.length;i++){if("replies"==n.link[i].rel&&"text/html"==n.link[i].type)var l=n.link[i].title,o=n.link[i].href;if("alternate"==n.link[i].rel){r=n.link[i].href;break}}var u;try{u=n.media$thumbnail.url,u=u.replace("/s72-c/","/w"+thumb_width+"-h"+thumb_height+"-c/")}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),u=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb}var p=n.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);document.write('<ul class="rp_thumbs">'),document.write("<li>"),1==showpostthumbnails&&document.write('<a href="'+r+'"><div class="rp_thumb"><span class="rollover waves-effect waves-light"></span><img width="'+thumb_width+'" height="'+thumb_height+'" alt="'+m+'" src="'+u+'"/></div></a>'),document.write('<div class="rp_utama"><span class="rp_title"><a href="'+r+'" target ="_top">'+m+"</a></span>");var g="";if(document.write('<span class="rp_meta">'),1==showpostdate&&(g=g+'<span class="rp_meta_date">'+f+"/"+_+"/"+w+"</span>"),1==showcommentnum&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),showcomment='<span class="rp_meta_comment"><a href="'+o+'">'+l+"</a></span>",g+=showcomment),1==displaymore&&(g=g+'<span class="rp_meta_more"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(g),document.write("</span>"),document.write('<span class="rp_summary">'),"content"in n)var v=n.content.$t;else if("summary"in n)var v=n.summary.$t;else var v="";var k=/<\S[^>]*>/g;if(v=v.replace(k,""),1==showpostsummary)if(v.length<numchars)document.write(""),document.write(v),document.write("");else{document.write(""),v=v.substring(0,numchars);var y=v.lastIndexOf(" ");v=v.substring(0,y),document.write(v+"..."),document.write("")}document.write("</span>"),document.write("</div></li>"),document.write("</ul>")}document.write('<ul class="rp_thumbs2">');for(var e=1;e<numposts2;e++){var r,n=t.feed.entry[e],m=n.title.$t;if(e==t.feed.entry.length)break;for(var i=1;i<n.link.length;i++){if("replies"==n.link[i].rel&&"text/html"==n.link[i].type)var l=n.link[i].title,o=n.link[i].href;if("alternate"==n.link[i].rel){r=n.link[i].href;break}}var $;try{$=n.media$thumbnail.url.replace("/s72-c/","/w"+thumb_width2+"-h"+thumb_height2+"-c/")}catch(h){s=n.content.$t,a=s.indexOf("<img"),b=s.indexOf('src="',a),c=s.indexOf('"',b+5),d=s.substr(b+5,c-b-5),$=-1!=a&&-1!=b&&-1!=c&&""!=d?d:no_thumb2}var p=n.published.$t,w=p.substring(0,4),_=p.substring(5,7),f=p.substring(8,10);1==showpostthumbnails2&&document.write(''),document.write("<li>"),document.write('<a href="'+r+'"><div class="rp_thumb2"><img width="'+thumb_width2+'" height="'+thumb_height2+'" alt="'+m+'" src="'+$+'"/></div></a><span class="rp_title rp_title2"><a href="'+r+'" target ="_top">'+m+"</a></span>");var g="";document.write('<span class="rp_meta rp_meta2">'),1==showpostdate2&&(g=g+'<span class="rp_meta_date rp_meta_date2">'+f+"/"+_+"/"+w+"</span>"),1==showcommentnum2&&("1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),showcomment='<span class="rp_meta_comment rp_meta_comment2"><a href="'+o+'">'+l+"</a></span>",g+=showcomment),1==displaymore2&&(g=g+'<span class="rp_meta_more rp_meta_more2"><a href="'+r+'" class="url" target ="_top">Read More...</a></span>'),document.write(g),document.write("</span>"),document.write("</li>")}document.write("</ul>")}
//]]>
var numposts=1,numposts2=4,showpostthumbnails=!0,showpostthumbnails2=!0,displaymore=!1,displaymore2=!1,showcommentnum=!1,showcommentnum2=!1,showpostdate=!1,showpostdate2=!1,showpostsummary=!0,numchars=100,thumb_width=325,thumb_height=200,thumb_width2=60,thumb_height2=60,no_thumb=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9m0RBKccZOGTOuJLw2FiYkS3IwFTsxbZNEpqEO8Z5CbS9ElsdSpQm75fSh46yn73KtZUMHC2NT195N-MAtYRONAdpErEHVuqQFagpN3e81x7RvG-3nWxfS4qBViVIUuOHjjqrrEl46Uo5/w300-c-h140/no-image.png&quot;,no_thumb2=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguPs08HTn_A3WeCl8RaBieiSUD8M46hag_bi6ck2kyWVSMHnjFBkjhm9gHvGGfA8HPcOGBhZCR4PGdq2qjsV5zo0m81ykD83n0-8ScJfhqo_OkQECosHJFhD11vtYjEIRMfYrD3GS0GHTr/s60-c/no-image.png&quot;;$(function(){$(&quot;.tabs-1&quot;).mtabs()});
</script>
</b:if>

Bước 2: Thêm đoạn css này dưới thẻ ]]></b:skin>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
/* CSS Homepage and Index */
ul.rp_thumbs{margin:0;padding:0;list-style:none}
ul.rp_thumbs li{background:#fff;overflow:hidden;font-size:12px;min-height:68px;margin:0 0 8px;padding:0;box-shadow:0 3px 4px 0 rgba(0,0,0,0.08),0 2px 7px 0 rgba(0,0,0,0.08),0 3px 2px -3px rgba(0,0,0,0.09);border-bottom-left-radius:4px;border-bottom-right-radius:4px}
ul.rp_thumbs .rp_thumb{position:relative;background:#fbfbfb;margin:0;width:100%;height:200px;overflow:hidden}
ul.rp_thumbs .rp_thumb img{height:auto;width:100%;transition:transform .3s}
ul.rp_thumbs2{font-size:13px;margin:0 0 10px;padding:0}
ul.rp_thumbs2 .rp_thumb2{background:#fbfbfb;float:left;margin:3px 8px 0 0;height:60px;width:60px}
ul.rp_thumbs2 .rp_thumb2 img{height:60px;width:60px;border-radius:5px}
.sidebar ul.rp_thumbs li:before,.sidebar ul.rp_thumbs2 li:before,#bottombar ul.rp_thumbs li:before,#bottombar ul.rp_thumbs2 li:before{display:none}
#recent1{margin-right:27px}
#recent2{margin-right:0}
.recent-widget:nth-child(1){margin-right:0}
.recent-widget{width:48%;float:left;margin-top:15px;margin-right:0}
.recent-widget h2 i{float:left;line-height:.8;background:#039be5;color:#fff;padding:5px;margin:-5px 8px -5px -5px;border-radius:5px}
.recent-widget h2{font-size:14px;padding:15px;background:#fff;box-shadow:0 3px 4px 0 rgba(0,0,0,0.08),0 2px 7px 0 rgba(0,0,0,0.08),0 3px 2px -3px rgba(0,0,0,0.09);border-top-right-radius:5px;border-top-left-radius:5px}
.recent-widget h2 a{color:#444;letter-spacing:1px}
span.rp_title{font:normal normal 17px Roboto,Arial,sans-serif;display:block;margin:0 0 5px;line-height:1.5em}
span.rp_title2{font-size:12.5px}
span.rp_summary{display:block;margin:0;color:#555;line-height:1.5;padding:20px 15px;font-size:13px;height:60px}
span.rollover{position:absolute;width:100%;height:200px;background:rgba(20,20,20,0.42);z-index:1}
span.rp_meta{background:transparent;display:block;font-size:11px;font-weight:400;color:#999;text-transform:uppercase}
span.rp_meta a{color:#8D8D8D!important;display:inline-block}
ul.rp_thumbs2 li a:hover{color:#0072C6}
ul.rp_thumbs2 li{list-style:none;min-height:66px;font-size:11px;margin:0 0 8px 2px;background:#fff;padding:10px;border-radius:4px;box-shadow:0 1px 2px 1px rgba(0,0,0,0.07),0 1px 2px 0 rgba(0,0,0,0.09)}
.rp_title2 a{color:#444}
.rp_utama{position:relative}
.rp_utama a{color:#fff;font-weight:500}
.rp_utama .rp_title{position:absolute;top:-64px;left:0;padding:10px 15px;right:0;z-index:1;font-size:14px;letter-spacing:.5px;line-height:1.5}
@media screen and (max-width:684px) {
.recent-widget{width:100%}
}
</style>
</b:if>

Bước cuối cùng: Thêm đoạn code bên dưới vào chỗ bạn muốn nó hiển thị

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- Recent -->
<b:section class='recent-widget' id='recent1' preferred='yes'>
  <b:widget id='HTML2' locked='false' title='' type='HTML'>
    <b:widget-settings>
      <b:widget-setting name='content'>&lt;script&gt;
   document.write(&#39;&lt;div class=&quot;recent-post-title&quot;&gt;&lt;h2&gt;&lt;a href=&quot;/search/label/Blogger?max-results=10&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;&amp;#xE885;&lt;/i&gt; Tutorial&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;&#39;);
   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Blogger?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
   &lt;/script&gt;</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
<b:section class='recent-widget' id='recent2' preferred='yes'>
  <b:widget id='HTML3' locked='false' title='' type='HTML'>
    <b:widget-settings>
      <b:widget-setting name='content'>&lt;script&gt;
   document.write(&#39;&lt;div class=&quot;recent-post-title&quot;&gt;&lt;h2&gt;&lt;a href=&quot;/search/label/Template%20Blogger?max-results=10&quot;&gt;&lt;i class=&quot;material-icons&quot;&gt;&amp;#xE87E;&lt;/i&gt; Template&lt;/a&gt;&lt;/h2&gt;&lt;/div&gt;&#39;);
   document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Template%20Blogger?orderby=updated&amp;alt=json-in-script&amp;callback=labelthumbs\&quot;&gt;&lt;\/script&gt;&quot;);
   &lt;/script&gt;</b:widget-setting>
    </b:widget-settings>
    <b:includable id='main'>
  <!-- only display title if it's non-empty -->
  <b:if cond='data:title != &quot;&quot;'>
    <h2 class='title'><data:title/></h2>
  </b:if>
  <div class='widget-content'>
    <data:content/>
  </div>

  <b:include name='quickedit'/>
</b:includable>
  </b:widget>
</b:section>
</b:if>

*
- Thay đoạn tô đỏ thành nhãn mà bạn muốn nó hiển thị
- Xóa thẻ <b:if cond='data:blog.url == data:blog.homepageUrl'> nếu bạn muốn nó hiển thị ở tất cả trang
Chúc bạn thành công!

Nguồn code: https://www.idblanter.com

Star Tuấn IT - Blog Thủ thuật, Ảnh bìa, Hình nền

Thêm recent post 2 cột cho blogspot