Thêm recent post 2 cột cho blogspot

Click ngay
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:"http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg"}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://1.bp.blogspot.com/-7vDs5hMaDho/U268E2ecF4I/AAAAAAAADY8/RBHVTTuJrxc/w300-h140-c/no-image.png&quot;,no_thumb2=&quot;https://3.bp.blogspot.com/-ltyYh4ysBHI/U04MKlHc6pI/AAAAAAAADQo/PFxXaGZu9PQ/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!

Nếu bạn sao chép bài viết trên blog thì vui lòng để nguồn vào giúp mình. Tôn trọng người khác thì người khác sẽ tôn trọng lại bạn.

Nếu có thắc mắc gì về code, code lỗi,... thì liên hệ mình để được giúp đỡ nhé.

Thanh Bình Designer, Developer

Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé! Xem thêm nhiều bài viết hay tại đây nhé.
Trong quá trình viết bài chúng tôi sẽ có nhiều thiếu sót mong các bạn đóng góp để chúng tôi rút kinh nghiệm hơn !
Nên Xem
  • Ẩn sidebar
  • 18 nhận xét:

    1. làm cái theo nhãn 1 giống v đi a Bình ưi <3

      Trả lờiXóa
    2. Cho em 1 slot liên kết nha anh Bình.
      Tên hiển thị: Tính Getter Blog
      URL: https://tinhgetter.blogspot.com/
      Đã đặt cho anh nhé.

      Trả lờiXóa
    3. Giờ là cái temp này có 102 rồi đấy, cảm thấy 99% hoàn thiện từ trong ra ngoài rồi đấy em.

      Trả lờiXóa
    4. cho e mượn cái câu này nha a Bình
      "Muốn giỏi phải học, muốn học thì phải hỏi. Chính vì thế, hãy cùng tham gia thảo luận với nhau để tìm ra câu trả lời nếu có thắc mắc nhé!"

      Trả lờiXóa
    5. Viết 1 loạt bài, thay đổi 1 loạt bố cục trên temp rồi lặng mất tiêu. Khả năng thì có nhưng thiếu đi sự tinh tế, vì vậy vậy đọc giả sẽ ko bên e lâu đc....

      Trả lờiXóa
    6. sao cái blog nó rung rung thế a?

      Trả lờiXóa

    » Không chửi tục, nói bậy, quảng cáo thông qua khung Comment.
    » Không spam link, chia sẻ các link không liên quan đến bài viết.
    » Không xuyên tạc, bôi nhọ tổ chức hay cá nhân nào.
    » Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước.