Mẫu code đăng bài viết blogspot 2 cột, 3 cột, 4 cột, multi column layout, cực kỳ hữu ích dành cho người kiếm tiền trên mạng từ việc xây dựng & chia sẻ nội dung hữu ích website

çђųƴêŋ đề ŋổį ɓậţᴾᴿᴼシ

✿ Dành cho người xem là nhà phân phối thớt gỗ, chủ xưởng sản xuất đồ gỗ gia dụng, nội thất cơ khí ☞ ✖️ưở🇳🇬 🇬ỗ

✿ Dành cho người xem, quan tâm đến Top mặt hàng dễ bán, dụng cụ tiện ích cho gian bếp, máy xay sinh tố, máy ép trái cây ☞ 🇷ì🇻🇮🇺6️⃣0️⃣🇸 .

✿ Dành cho người xem, quan tâm đến nghề sáng tạo, kiếm tiền online, từ Viewers, Traffic, Follow, Subscribe, Like,... ☞ ✔☋@ ƙ¡ếლ ζ¡ềղ ❍ղ£¡ղℰ .

Thông Điệp : Vật Liệu Xanh, Bảo Vệ Môi Trường.

Hôm nay Gia Bảo Blog chia sẻ một số mẫu code Mẫu code đăng bài viết blogspot 2 cột, 3 cột, 4 cột, multi column layout, cực kỳ hữu ích dành cho người kiếm tiền trên mạng từ việc xây dựng & chia sẻ  nội dung hữu ích website.  

Bài viết được chia làm 2 phần bao gồm 

1. Phần I : Sưu Tầm Code Html, Css, Javascript 2 cột, 3 cột, 4 cột, multi column layout
2. Phần II : Sưu Tầm thủ thuật blogspot tạo Recent post đẹp mắt và chuyên nghiệp 2, 3,... cột cho các blogger
3. Phần III : Sưu Tầm thủ thuật blogspot tạo Recent post 2, 3 cột đơn giản   

Phần I : Sưu Tầm Code Html, Css, Javascript 2 cột, 3 cột, 4 cột, multi column layout.

1. Code 2 column đăng bài trên Blogspot - Style 1 :

Code Nguồn :  https://www.sitepoint.com/community/t/can-flexbox-do-this-2-column-setup/285440/8

Hình ảnh minh họa cấu trúc hiển thị nội dung trên PC 

 Hình ảnh minh họa cấu trúc hiển thị nội dung trên Mobile

Code Đăng bài 2 cột Style 1 : 

  

<!-- Code 2 cột Style 1-->  
<style>
html {
   box-sizing: border-box;
}
*, *:before, *:after {
   box-sizing: inherit;
}
.wrap {
   width:96%;
   max-width: 1000px;
   margin: 0 auto;
}
header,footer {
   padding: 10px;
   font-weight: bold;
   text-align: center;
}
header {
	background: tomato;
}
footer {
	background: lightgreen;
}

/*====== Flex Rules ======*/
.inner {
   display: flex;
   flex-flow: row wrap;
   font-weight: bold;
   text-align: center;
}
.inner > * {
   padding: 10px;
   font-weight: bold;
}
.main {
   order: 3;
   flex: 3 0px;
   text-align: left;
   background: deepskyblue;
}
.side-1 {
   order: 1;
   flex: 0 180px;
   background: gold;
}
.side-2 {
   order: 2;
   flex: 0 180px;
   background: hotpink;
}

@media all and (max-width: 600px) {
   .inner {flex-flow: column wrap;}
   .side-1,.side-2 {flex: 0;}
   .main {order: 2;}
   .side-2 {order: 3;}
}
</style>
<div class="wrap">
   <header>Header Tiêu Đề đăng bài viết blogspot dạng code phân 2 cột</header>
   <div class="inner">
      <div class="side-1">Nội Dung hiển thị đầu bài đăng trên điện thoại - cạnh trái Side 1 </div>
      <div class="main">
         <h2>Tiêu đề H2 nội dung bên phải</h2>
         <p>Dòng nội dung bên phải số 1 </p>
         <p>Dòng nội dung bên phải số 2</p>
         <p>Dòng nội dung bên phải số 3</p>
         <p>Dòng nội dung bên phải số 4</p>
      </div>

<!-- Thêm Code này nếu sử dụng cột 1 chia làm 2 Side Bar bên trái - Cột này sẽ được hiển thị cuối bài viết khi xem trên điện thoại   
      <div class="side-2">Nội Dung hiển thị cuối bài đăng trên điện thoại - PC cạnh trái Side 2 </div>
-->
</div>
<footer>Footer - Chân Trang </footer>
</div>
<!-- Code 2 cột Style 1--> 

2. Code 2 column đăng bài trên Blogspot - Style 2 :

Code Nguồn :  https://www.sitepoint.com/community/t/can-flexbox-do-this-2-column-setup/285440/8

Hình ảnh minh họa cấu trúc code 2 column Style 2 hiển thị nội dung trên PC 

  
Hình ảnh minh họa cấu trúc code 2 column Style 2 hiển thị nội dung trên Mobile 

Code Đăng bài 2 cột Style 2 

  

<!-- Code 2 cột Style 2-->  
<style>
html {
   box-sizing: border-box;
}
*, *:before, *:after {
   box-sizing: inherit;
}
.wrap {
   max-width: 1000px;
   margin: 0 auto;
   background: #ccc;
   border:1px solid;
}
header,footer {
   padding: 10px;
   font-weight: bold;
   text-align: center;
}
header {
   background: tomato;
   border-bottom:1px solid;
}
footer {
   background: lightgreen;
   border-top:1px solid;
   clear:both;
}

/*====== Layout Rules ======*/
.inner {
   display: table; /*contain floats*/
   width: 100%;
   font-weight: bold;
   position: relative;
   background:
      linear-gradient(to right,
      transparent, transparent 200px, /*left block*/
      #000 200px, #000 201px,  /*1px border*/
      #EEE 201px); /*right block*/
   padding-bottom: 90px;/*guard for ap blk*/
   text-align:center;
}
.inner > div {
   padding: 10px;
}
.side-1{
   float: left;
   width: 200px;
   min-height: 80px;
   background: gold;
   border-bottom: 1px solid;
}
.main {
   float: right;
   width: calc(100% - 201px);
   background: #EEE;
   margin-bottom: -90px; /*soak up inner padding guard*/
   text-align:left;
}
.side-2 {
   float: left;
   clear: left;
   width: 200px;
   min-height: 80px;
   background: #ccc;
   border-bottom: 1px solid;
}

.side-1:hover,
.main:hover,
.side-2:hover {padding-bottom: 200px;}

.ap-blk {
   position:absolute;
   width:80px;
   height:80px;
   left:60px;
   bottom:0;
   background:hotpink;
}
@media all and (max-width: 600px) {
   .side-1,.main,.side-2 {
      display:block;
      position:static;
      float:none;
      width:100%;
      height:auto;
      margin:0;
      border-bottom:1px solid;
   }
   .inner {background:none; padding:0;}
   .ap-blk {display:none;}
   footer {border:none;}
}
</style>
</head>
<body>

<div class="wrap">
   <header> Header Tiêu Đề đăng bài viết blogspot dạng code phân 2 cột : 2-Col Stack - All Floats</header>
   <div class="inner">
      <div class="side-1">
        Nội Dung hiển thị đầu bài đăng trên điện thoại - cạnh trái Side 1  : Side Top<br>Hover
      </div>
      <div class="main">
         <h2> Tiêu Đề phụ nội dung chính bài đăng BlogSpot : Content Heading</h2>
         <p>Nội dung Blogspot dòng số 1 bên phải</p>
         <p>Nội dung Blogspot dòng số 2 bên phải</p>
         <p>Nội dung Blogspot dòng số 3 bên phải</p>
         <p>Nội dung Blogspot dòng số 4 bên phải</p>
         <p>Mở rộng không gian khi trỏ chuột Hover here and in sidebar blocks to expand floats</p>
        
      </div>
      <div class="side-2">
        
        Nội Dung hiển thị cuối bài đăng trên điện thoại - cạnh trái Side 2  :
        
        Side Bottom<br>Hover
      </div>
      <div class="ap-blk"> 
      <!-- Nội Dung hiển thị cuối bài đăng trên điện thoại - cạnh trái Side 3  :-->
Bottom Block</div>
   </div>
   <footer>Footer - nội dung chân trang</footer>
</div>
<!-- End Code 2 cột Style 2-->  

  3. Code 2 column đăng bài trên Blogspot - Style 3 :

Code Nguồn :  https://www.sitepoint.com/community/t/can-flexbox-do-this-2-column-setup/285440/8

 Hình ảnh minh họa cấu trúc code 2 column Style 3 hiển thị nội dung trên PC   

 Hình ảnh minh họa cấu trúc code 2 column Style 3 hiển thị nội dung trên Mobile   

Code Đăng bài 2 cột Style 3 :

<!-- Code 2 cột Style 3-->    
<style>
html {
   box-sizing: border-box;
}
*, *:before, *:after {
   box-sizing: inherit;
}
.wrap {
   width:96%;
   max-width: 1000px;
   margin: 0 auto;
}
header,footer {
   padding: 10px;
   font-weight: bold;
   text-align: center;
}
header {
	background: tomato;
}
footer {
	background: lightgreen;
}

/*====== Flex Rules ======*/
.inner {
   display: flex;
   flex-flow: row wrap;
   font-weight: bold;
   text-align: center;
}
.main {
   order: 2;
   flex: 2 0;
   text-align: left;
   padding: 10px;
   background: deepskyblue;
}
.left {
   display: flex;
   flex-flow: row wrap;
   order: 1;
   font-weight: bold;
}
.side-1 {
   order: 1;
   flex: 1 200px;
   padding: 10px;
   background: gold;
}
.side-2 {
   order: 2;
   flex: 1 200px;
   padding: 10px;
   background: hotpink;
}

@media all and (max-width: 600px) {
   .inner,.left {flex-flow: column wrap;}
   .side-1,.side-2 {flex: 0;}

   .side-1 {order: 1;}
   .main {order: 2;}
   .side-2 {order: 3;}

}


</style>
</head>
<body>
<div class="wrap">
   <header>Header Tiêu Đề đăng bài viết blogspot dạng code phân 2 cột  mẫu 3</header>
   <div class="inner">
      <div class="left">
         <div class="side-1">
 <!--         
           Nội Dung hiển thị đầu bài đăng trên điện thoại - cạnh trái Side 1  : 
  -->         
           Side Top 1 </div>
         <div class="side-2">
  <!--         
           Nội Dung hiển thị đầu bài đăng trên điện thoại - cạnh trái Side 2  : 
  -->         
          
           Side top 2 </div>
      </div>
      <div class="main">
         <h2>Tiêu Đề phụ nội dung chính bài đăng BlogSpot mẫu 3 : Content Heading </h2>
         <p>Nội dung Blogspot dòng số 1 bên phải bài đăng Blogspot mẫu 3</p>
         <p>Nội dung Blogspot dòng số 2 bên phải bài đăng Blogspot mẫu 3</p>
         <p>Nội dung Blogspot dòng số 3 bên phải bài đăng Blogspot mẫu 3</p>
         <p>Nội dung Blogspot dòng số 4 bên phải bài đăng Blogspot mẫu 3</p>
      </div>
   </div>
   <footer>Footer- Chân trang mẫu bài đăng blogspot số 3</footer>
</div>
<!-- End Code 2 cột Style 3-->  

Hình ảnh minh họa code đăng bài đẹp chia sẻ trên trang https://jinam2.tistory.com/m/39 : 

 Mẫu 1

 Mẫu 2 

=====Clear======

Phần II : Sưu Tầm thủ thuật Blogspot tạo Recent post đẹp mắt và chuyên nghiệp 2, 3,... cột cho các blogger  

Từ khóa thủ thuật : recent post blogspot homepage | recent post 3 cột cho trang chủ blogspot | Tạo Recent post đẹp mắt và chuyên nghiệp 3 cột cho các blogger | Style mới cho tiện ích "Recent post" theo label ở Homepage và bài viết Tạo Tab News theo phong cách báo chí chuyên nghiệp

Web tham khảo thủ thuật blogspot :

• https://www.vietmkt360.com/2013/10/tao-recent-post-ep-mat-va-chuyen-nghiep.html
• https://www.landgonow.com/2011/07/tien-ich-magazine-recent-posts-cho.html
• [ * Recent Post Magazine đẹp mắt ] : https://www.landgonow.com/2013/05/magazine-recent-post-for-homepage-v3.html?m=1#more
• [ * Mẫu recent Post Magazine đẹp - đa dạng ] : https://www.landgonow.com/2011/07/tien-ich-magazine-recent-posts-cho.html 
• [ Recent Posts with 3 columns for Blogger  ] https://thuthuatgood.blogspot.com/2011/05/tien-ich-recent-posts-with-3-columns_8776.html
  
• http://realfa84.blogspot.com/2012/01/kode-script-dan-cara-memasang-recent.html?m=1
• https://www.blogspotdep.com/2021/01/theme-blogger-tin-tuc-cho-trang-bao-chi.html?m=1
• https://www.blogspotdep.com/2021/03/theme-blogspot-bao-chi-tinh-te-chuan.html?m=1

1. Thủ thuật Blogspot tạo Recent Post Magazine cho blogspot mẫu 1 :

 

Nguồn : https://www.landgonow.com/2013/05/magazine-recent-post-for-homepage-v3.html?m=1#more

 

<!-- Code Recent code đẹp mắt 2 cột chèn vào trang chủ hoặc nội dung bài viết của bạn --> 
<script type="text/javascript">
    //<![CDATA[
imgr=["https://lh3.googleusercontent.com/-IBkOgk0LW6c/TqulPrgd6RI/AAAAAAAAAmg/VHnAiJCR4jc/s800/no_img.jpg"];aBold=showRandomImg=!0;summaryPost=70;summaryTitle=25;numposts=7;
function box1(i){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0;img=[];maxpost=numposts<=i.feed.entry.length?numposts:i.feed.entry.length;for(var g=0;g<maxpost;g++){var e=i.feed.entry[g],l=e.title.$t,h;if(g==i.feed.entry.length)break;for(var f=0;f<e.link.length;f++)if("alternate"==e.link[f].rel){h=e.link[f].href;break}for(f=0;f<e.link.length;f++)if("replies"==e.link[f].rel&&"text/html"==e.link[f].type){e.link[f].title.split(" ");break}f="content"in e?e.content.$t:"summary"in
e?e.summary.$t:"";postdate=e.published.$t;j>imgr.length-1&&(j=0);img[g]=imgr[j];s=f;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&&(img[g]=d);e=[1,2,3,4,5,6,7];postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];postdate.split("-");for(var k=0;k<e.length&&!(parseInt(m)==e[k]);k++);0==g&&(e='<div class="box1-left"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><h2><a href="'+
h+'">'+l+'</a></h2><div class="box1-left-info">'+removeHtmlTag(f,160)+"...</div></div>",document.write(e));1<=g&&32>=g&&(e='<div class="box1-right"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+h+'">'+l+"</a></div>",document.write(e));j++}document.write("")}
function box2(i){j=showRandomImg?Math.floor((imgr.length+1)*Math.random()):0;img=[];maxpost=numposts<=i.feed.entry.length?numposts:i.feed.entry.length;for(var g=0;g<maxpost;g++){var e=i.feed.entry[g],l=e.title.$t,h;if(g==i.feed.entry.length)break;for(var f=0;f<e.link.length;f++)if("alternate"==e.link[f].rel){h=e.link[f].href;break}for(f=0;f<e.link.length;f++)if("replies"==e.link[f].rel&&"text/html"==e.link[f].type){e.link[f].title.split(" ");break}f="content"in e?e.content.$t:"summary"in
e?e.summary.$t:"";postdate=e.published.$t;j>imgr.length-1&&(j=0);img[g]=imgr[j];s=f;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&&(img[g]=d);e=[1,2,3,4,5,6,7];postdate.split("-")[2].substring(0,2);var m=postdate.split("-")[1];postdate.split("-");for(var k=0;k<e.length&&!(parseInt(m)==e[k]);k++);0==g&&(e='<div class="box2-left"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+
h+'">'+l+'</a><div class="box2-left-info">'+removeHtmlTag(f,160)+"...</div></div>",document.write(e));1<=g&&32>=g&&(e='<div class="box2-right"><a href="'+h+'" title="'+removeHtmlTag(f,200)+'"><img src="'+img[g]+'"/></a><a href="'+h+'">'+l+"</a></div>",
document.write(e));j++}document.write("")};
    //]]>
</script>
<script type='text/javascript'>
var thumbnail_mode = &quot;no-float&quot; ;
summary_noimg = 300;
summary_img = 150;
img_thumb_height = 85;
img_thumb_width = 124;
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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}('l m(a,b){6(a.5("<")!=-1){3 s=a.O("<");N(3 i=0;i<s.4;i++){6(s[i].5(">")!=-1){s[i]=s[i].8(s[i].5(">")+1,s[i].4)}}a=s.J("")}b=(b<a.4-1)?b:a.4-2;A(a.v(b-1)!=\' \'&&a.5(\' \',b)!=-1)b++;a=a.8(0,b-1);t a+\'...\'}l r(a){3 b=D.p(a);3 c="";3 d=b.q("7");3 e=u;6(d.4>=1){c=\'<k w="x:y; z:j B 0 j;;C:-P 0 0 0"><7 E="ẢF G họa" g="\'+d[0].g+\'" H="\'+I+\'9" K="\'+L+\'9" /></k>\';e=M}3 f=c+\'<n>\'+m(b.o,e)+\'</n>\';b.o=f}',52,52,'|||var|length|indexOf|if|img|substring|px|||||||src|||0px|span|function|removeHtmlTag|div|innerHTML|getElementById|getElementsByTagName|createSummaryAndThumb||return|summary_noimg|charAt|style|float|left|padding|while|10px|margin|document|alt|nh|minh|width|img_thumb_width|join|height|img_thumb_height|summary_img|for|split|38px'.split('|'),0,{}))
//]]>
</script>

<!-- 
<style type='text/css'>
#blog1{display:none}
</style> 
-->
 
<style>
.boxhome{width:680px;margin-left:15px}
.boxhome ul {margin:0; padding:0}
.box1{border-top: 0px solid #D0D0D0; border-right: 0px solid #D0D0D0; border-bottom: 1px solid #ECEDE8;border-left: 0px solid #D0D0D0;border-radius:0px;}
.box2{border-top: 1px solid #DBDBDB; border-right: 0px solid #D0D0D0; border-bottom: 1px solid #DBDBDB;border-left: 0px solid #D0D0D0;border-radius:0 15px;}
.box1{margin-bottom:1px;overflow:hidden;}
.box1-left{width:300px; float:left; height:380px;border-right: #ABABAB  1px dashed;  padding:10px}
.box1-left h2 {margin-bottom:5px}
.box1-left img{margin-bottom:5px;  height:250px; width:300px}
.box1-right{height:50px; width:330px; float:right; padding:9px;line-height:20px;border-bottom: #ABABAB 1px dashed; }
.box2-right:hover, .box1-right:hover {background:#6CD0DD}
.box1-right a {padding:-5px 0px;margin:-5px 0px}
.box2-right:hover a , .box1-right:hover a {color: #fff; text-shadow:1px 1px 3px #000}
.box1-right img {float:left; height:50px; width:72px; margin-right:10px}
.box2{margin-top:15px; overflow:hidden}
.box2-left{width:330px; float:left; height:170px; padding:10px;}
.box2-left a{font-weight:bold;}
.box2-left img{margin-right:5px;  height:100px; width:160px;float:left}
.box2-right{height:35px; width:285px; float:right; border-left:#ABABAB  1px dashed; border-bottom:#ABABAB  1px dashed; padding:5px; line-height:15px;}
.box2-right img {float:left; height:35px; width:48px; margin-right:5px}
.box1-left-info{ text-align:justify;}
.box2-left-info{height:170px; text-align:justify;margin:10px 0px 0px 0px; padding:10px 0px 0px 0px}
.box3{margin-bottom:10px; width:640px;}
.box1-googlesearch{width:650px;float:left}
.box1 img, .box2 img {box-shadow: 0.5px 0.5px 0.5px 0.5px #EEE;border-radius:4px;max-width: 600px; }
.menu-rp-namkna{overflow: hidden; width: 100%; border-bottom:1px solid #777; background:#eee;}
.menu-rp-namkna li{float: left; list-style: none;}
.menu-rp-namkna a{padding: 5px 5px 5px 25px; float: left; text-decoration: none; position: relative;}
.menu-rp-namkna li:first-child a{padding-left: 15px; background:#888; color:#eee}
.menu-rp-namkna li:first-child a::after{border-left-color:#888;}
.menu-rp-namkna li:first-child a:hover{background:#3B5998; color:#fff}
.menu-rp-namkna li:first-child a:hover::after { border-left-color:#3B5998}
.menu-rp-namkna a:hover{background:#3090C7}
.menu-rp-namkna a::after, .menu-rp-namkna a::before{content: &quot;&quot;; position: absolute; top: 50%; margin-top: -1.5em; border-top: 1.5em solid transparent; border-bottom: 1.5em solid transparent; border-left: 1em solid; right: -1em;}
.menu-rp-namkna a::after{z-index: 2; border-left-color: #eee;}
.menu-rp-namkna a::before{border-left-color: #bbb; right: -1.1em; z-index: 1; }
.menu-rp-namkna a:hover::after{ border-left-color:#3090C7}
</style>
 
<div class='boxhome'>

<!--Đoạn code 1 --> 
<div class='box1'>                                          
<script src='https://www.digitalnomad.vn/feeds/posts/default?max-results=7&amp;orderby=published&amp;alt=json-in-script&amp;callback=box1'/>   
<div style='clear:both;'/>     
</div>

<!--Chen code-->
<!--End Chen code-->


</div> 


Bạn thay thế lần lượt các đoạn code dưới vào vị trí
<!--Chen code-->
<!--End Chen code-->

Code 1 :
<div class='box2'>     
<ul class='menu-rp-namkna'>
    <li><a href='#'>Blogger Template</a></li>
    <li><a href='#'>Magazine Template</a></li>
    <li><a href='#'>Shopping Template</a></li>
    <li><a href='#'>Movie Tempalte</a></li>
</ul>
<script src='https://www.digitalnomad.vn/feeds/posts/default/-/Kiếm Tiền?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>

Code 2 :
<div class='box2'>               
<ul class='menu-rp-namkna'>
    <li><a href='#'>Thủ Thuật Blog</a></li>
    <li><a href='#'>Blogger</a></li>
    <li><a href='#'>CSS - HTML</a></li>
    <li><a href='#'>Tổng Hợp</a></li>
</ul>                            
<script src='https://www.digitalnomad.vn/feeds/posts/default/-/Gia Bảo Blog?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>

Code 3 :

<div class='box2'>               
<ul class='menu-rp-namkna'>
    <li><a href='#'>Thủ Thuật Blog</a></li>
    <li><a href='#'>Blogger</a></li>
    <li><a href='#'>CSS - HTML</a></li>
    <li><a href='#'>Tổng Hợp</a></li>
</ul>                            
<script src='https://www.digitalnomad.vn/feeds/posts/default/-/Gia Bảo Blog?max-results=5&amp;orderby=published&amp;alt=json-in-script&amp;callback=box2'/>
<div style='clear:both;'/>
</div>
<!-- Code Recent code đẹp mắt 2 cột chèn vào trang chủ hoặc nội dung bài viết của bạn -->

2. Thủ thuật Blogspot tạo Recent Post Magazine cho blogspot mẫu 2 :  

Nguồn : https://www.landgonow.com/2012/05/recent-post-width-thumbnail-3-cot-cho.html  

<!-- Thủ thuật Blogspot tạo Recent Post Magazine cho blogspot mẫu 2 --> 
<style type="text/css">
*
{ padding: 0;
margin: 0;
font-family: Arial;
font-size: 12px;
}

#index_news
{
width: 525px;
margin: 5px;
}

#main_content
{
width: 525px;
float: left;
overflow: hidden;
}

#main_content .top_news
{
width: 525px;
margin-bottom: 10px;
}
#main_content .top1_news
{
width: 234px;
float: left;
margin-top: 8px;
}
#main_content .top1_news .top1_news_image img
{
border: 1px solid #CCC;
padding: 1px;
width:230px;
height:165px;
}
#main_content .top1_news .top1_news_title
{
padding: 8px 0;
text-align: justify;
}
#main_content .top1_news .top1_news_title a
{
font-size: 16px;
color: #002392;
text-decoration: none;
}
#main_content .top1_news .top1_news_title a:hover
{
text-decoration: underline;
}
#main_content .top1_news p
{
text-align: justify;
}
#main_content .top1_news p a
{
padding-left: 4px;
}
#main_content .top1_news p img, #main_content .top2_news img
{
vertical-align: bottom;
}
#main_content .top2_news
{
width: 95px;
float: left;
margin-left: 8px;
margin-top: 14px;
padding-right: 6px;
}
#main_content .top2_news .top2_news_image
{
background: url(http://2.bp.blogspot.com/-UXDdO1Pmiug/T7C9CG1j5qI/AAAAAAAABjw/tNdAXrDSBxM/s1600/main-content-namkna-blogspot-com.gif) no-repeat;
width: 90px;
height: 65px;
padding: 4px;
}
.top2_news_image img {
width:90px;
height:65px
}


#main_content .top2_news h2
{
padding-top: 2px;
}
#main_content .top2_news h2 a
{
color: #002dbe;
text-decoration: none;
}
#main_content .top2_news h2 a:hover
{
text-decoration: underline;
}
#main_content .top2_news .dot3x1
{
background: url(https://lh3.googleusercontent.com/-3ATrhHXBlPY/T7C9mOj2YDI/AAAAAAAABj4/CJK0Ud02xZE/h120/main-content-2-namkna-blogspot-com.gif) repeat-x center

center;
margin: 10px 0;
height: 1px;
font-size: 1px;
}
#main_content .topo_news
{
width: 174px;
float: right;
background: url(http://4.bp.blogspot.com/-J4h5botM2J8/T7C9w1c_4jI/AAAAAAAABkA/tOStmLYSrHQ/s1600/main-content-3-namkna-blogspot-com.gif) no-repeat;
padding: 5px 1px 0 1px;

}
#main_content .topo_news .topo_news_title
{
background: url(https://lh4.googleusercontent.com/-Rb7R8RByBdo/T7C-DO8HMtI/AAAAAAAABkI/nJ0TAN04vNE/h120/main-content-4-namkna-blogspot-com.gif) no-repeat;
width: 160px;
height: 22px;
color: #FFF;
padding: 4px 0 0 14px;
font-weight: bold;
font-size: 11px;
}
#main_content .topo_news ul li
{
background: url(https://lh3.googleusercontent.com/-z4xvE5SE0OM/T7C-OKuO1aI/AAAAAAAABkQ/LGxwYfhl_VA/h120/main-content-5-namkna-blogspot-com.gif) no-repeat 8px 10px;
padding: 2px 2px 2px 20px;
list-style: none;
}
#main_content .topo_news ul li a
{
color: #002392;
font-weight: bold;
font-size: 11px;
line-height: 1.5em;
text-decoration:none;
}
#main_content .topo_news ul li a:hover {text-decoration: underline;}
</style>
 
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/-5SjTt1K65so/T7C_sqxaN4I/AAAAAAAABkY/ygqkZsYtU5U/s1600/nothumbnail-namkna-blogspot-com.gif";
imgnew = "https://lh6.googleusercontent.com/-pj0_eUYGGI8/T7C__S90T4I/AAAAAAAABkg/qez7_-sFAwI/h120/new-post-namkna-blogspot-com.gif";

showRandomImg = true;

aBold = false;
summaryPost = 280;
numposts = 9;
topoTitle = "Bài viết khác";
label = "Kiếm Tiền";
home_page = "https://www.digitalnomad.vn/";

</script>
<!--
  <script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/z-recent-label.js" type="text/javascript"></script> 
thay thế và tải code tại link :
https://www.dropbox.com/s/dlmso6swu0ydt67/z-recent-post.js
-->

<!--https://www.dropbox.com/s/dlmso6swu0ydt67/z-recent-post.js-->
<script language="JavaScript">
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 showrecentposts(json) {

        document.write('<div id="index_news" class="clearfix"><div id="main_content"><div class="top_news clearfix">');

        j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
        img  = new Array();

        for (var i = 0; i < numposts; 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="'+cmcolor+'">('+pcm+' '+text+')</font></i>' : '';


        var month = [1,2,3,4,5,6,7,8,9,10,11,12];
        var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

        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 = (showPostDate) ? '<i><font color="'+cmcolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";

posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;


if (i==0) {
var trtd = '<div class="top1_news"><div class="top1_news_image"><a href="'+posturl+'"><img src="'+img[i]+'"></a></div><div class="top1_news_title"><h1><img src="'+imgnew+'"><a href="'+posturl+'"> '+posttitle+'</a></h1></div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';
      
        document.write(trtd);
}


if (i==1) {
var trtd = '<div class="top2_news"><div class="top2_news_image"><img src="'+img[i]+'"></div><h2><a title="'+posttitle+'" href="'+posturl+'">'+posttitle+' </a></h2><div class="dot3x1"></div>';
      
        document.write(trtd);
}

if (i==2) {
var trtd = '<div class="top2_news_image"><img src="'+img[i]+'"></div><h2><a title="'+posttitle+'" href="'+posturl+'"> '+posttitle+'</a></h2></div>';
      
        document.write(trtd);

}


if (i==3) {
var trtd = '<div class="topo_news"><div class="topo_news_title"> '+topoTitle+'</div><ul id="list_others_news"><li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li>';
      
        document.write(trtd);
}


if ((i>3)&&(i<numposts-1)) {
        var trtd = '<li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li>';
      
        document.write(trtd);
}

if (i==numposts-1) {
        var trtd = '<li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li></ul></div>';
      
        document.write(trtd);
}
        j++;
}
document.write('</div></div></div>');
}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<!--End https://www.dropbox.com/s/dlmso6swu0ydt67/z-recent-post.js-->  
<!-- End Thủ thuật Blogspot tạo Recent Post Magazine cho blogspot mẫu 2 --> 

Nếu muốn giống mẫu này :

Thay thế đoạn code nằm giữa 

<!--https://www.dropbox.com/s/dlmso6swu0ydt67/z-recent-post.js--> 
 ....

<!--End https://www.dropbox.com/s/dlmso6swu0ydt67/z-recent-post.js-->   

Bằng đoạn Code sau :

<!--https://www.dropbox.com/s/w9qs8t38jca74v8/z-recent-label.js -->
<script language="JavaScript">
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 showrecentposts(json) {

        document.write('<div id="index_news" class="clearfix"><div id="main_content"><div class="top_news clearfix">');

        j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
        img  = new Array();

        for (var i = 0; i < numposts; 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="'+cmcolor+'">('+pcm+' '+text+')</font></i>' : '';


        var month = [1,2,3,4,5,6,7,8,9,10,11,12];
        var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

        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 = (showPostDate) ? '<i><font color="'+cmcolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";

posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;


if (i==0) {
var trtd = '<div class="top1_news"><div class="top1_news_image"><a href="'+posturl+'"><img src="'+img[i]+'"></a></div><div class="top1_news_title"><h1><img src="'+imgnew+'"><a href="'+posturl+'"> '+posttitle+'</a></h1></div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';
      
        document.write(trtd);
}


if (i==1) {
var trtd = '<div class="top2_news"><div class="top2_news_image"><img src="'+img[i]+'"></div><h2><a title="'+posttitle+'" href="'+posturl+'">'+posttitle+' </a></h2><div class="dot3x1"></div>';
      
        document.write(trtd);
}

if (i==2) {
var trtd = '<div class="top2_news_image"><img src="'+img[i]+'"></div><h2><a title="'+posttitle+'" href="'+posturl+'"> '+posttitle+'</a></h2></div>';
      
        document.write(trtd);

}


if (i==3) {
var trtd = '<div class="topo_news"><div class="topo_news_title"> '+topoTitle+'</div><ul id="list_others_news"><li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li>';
      
        document.write(trtd);
}


if ((i>3)&&(i<numposts-1)) {
        var trtd = '<li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li>';
      
        document.write(trtd);
}

if (i==numposts-1) {
        var trtd = '<li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li></ul></div>';
      
        document.write(trtd);
}
        j++;
}
document.write('</div></div></div>');
}
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<!--End https://www.dropbox.com/s/w9qs8t38jca74v8/z-recent-label.js --> 

2. Thủ thuật Blogspot tạo Recent Post Magazine cho blogspot mẫu 2 :

Nguồn : https://www.landgonow.com/2011/07/tien-ich-magazine-recent-posts-cho.html 

<!-- Thủ thuật Blogspot tạo Recent Post Magazine cho blogspot mẫu 3 -->   
<style type="text/css">   
#cotent-news {    
border:#999 solid 1px;    
width: 650px;      }    
#top-news {    
width: 440px;     
height:166px;       padding:5px;    
border:#bbb solid 1px;    
background:#eee;    
font-size:12px;    
}    
#bottom-news {    
width: 444px;      padding:5px;    
}    
#bottom-news-item {    
width: 106px;    
margin-right:5px;    
float:left;    
}    
#left-news {  
width: 200 px; 
padding:5px;    
border-left:2px dotted #ccc;    
}    
</style>    
<script language="JavaScript">    
imgr = new Array();    
imgr[0] = "http://2.bp.blogspot.com/-5ShnwAhC-eM/TyyZeHwfpPI/AAAAAAAAAcs/cRaiet9Jhj4/s1600/nothumbnail-bai-viet-kgong-anh-namkna-ngoctra.gif";    
imgico= "http://4.bp.blogspot.com/-GsC8zLoeoSg/TyyZ677yMVI/AAAAAAAAAc4/SSeCIhN4jl4/s1600/icom-left-news-namkna-ngoctra.gif";    
showRandomImg = true;    
topwidth = 160;     
topheight = 160;    
botheight = 100;     
botwidth = 100;    
fntsize = 12;    
vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"    
acolor = "#555";    
cmcolor = "#555";    
topcolor = "#f00";    
aBold = true;    
text = "comments";    
showPostDate = true;    
summaryPost = 250;    
summaryFontsize = 12;    
summaryColor = "#000";    
botnum = 4;    
numposts = 10;    
label = "Gia Bảo Blog";      home_page = "https://www.digitalnomad.vn/";    
</script>
  

<!-- Đoạn script Số 1-->
<script language="JavaScript">
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 showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts; 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="'+cmcolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    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 = (showPostDate) ? '<i><font color="'+cmcolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";

posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;


if (i==0) {
var trtd = '<div id="cotent-news"><table><tr><td><div id="top-news"><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px; margin-right:10px;" width="'+topwidth+'" height="'+topheight+'"/><div style="color:'+topcolor+'; font-size:'+vnesize+'px;">'+posttitle+'</div>'+cmtext+ ' ' + daystr + '<br/>'+removeHtmlTag(postcontent,summaryPost)+'...<br/><a style="float:right;" href="'+posturl+'">Readmore...</a> </div>';
   
    document.write(trtd);
}

if (i==1) {
var trtd = '<div id="bottom-news"><div id="bottom-news-item"><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px;" width="'+botwidth+'" height="'+botheight+'"/><div><a style="color:'+acolor+'; font-size:'+fntsize+'px;" href="'+posturl+'">'+posttitle+'</a></div></div>';
   
    document.write(trtd);
}

if ((i>1)&&(i<botnum)) {
var trtd = '<div id="bottom-news-item"><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px;" width="'+botwidth+'" height="'+botheight+'"/><div><a style="color:'+acolor+'; font-size:'+fntsize+'px;" href="'+posturl+'">'+posttitle+'</a></div></div>';
   
    document.write(trtd);

}

if (i==botnum) {
var trtd = '<div id="bottom-news-item"><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px;" width="'+botwidth+'" height="'+botheight+'"/><div><a style="color:'+acolor+'; font-size:'+fntsize+'px;" href="'+posturl+'">'+posttitle+'</a></div></div></div></td>';
   
    document.write(trtd);
}

if (i==botnum+1) {
    var trtd = '<td><div id="left-news"><img src="'+imgico+'"/><a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br/>';
   
    document.write(trtd);
}
if ((i>botnum+1)&&(i<numposts-1)) {
    var trtd = '<img src="'+imgico+'"/><a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br/>';
   
    document.write(trtd);
}
if (i==numposts-1) {
    var trtd = '<img src="'+imgico+'"/><a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a></div></td></tr></table></div>';
   
    document.write(trtd);
}
    j++;
}

}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>  

<!-- End Đoạn script Số 1-->  

<!-- End Thủ thuật Blogspot tạo Recent Post Magazine cho blogspot mẫu 3 -->   
 

Nếu giống mẫu này :

 

Chỉ cần thay thế đoạn code nằm trong 

 

<!--Đoạn script Số 1-->  

<!-- End Đoạn script Số 1-->   

Băng đoạn Code sau : 

<!--Đoạn script Số 2-->    
<script language="JavaScript">
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 showrecentposts(json) {
    j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
    img  = new Array();

      for (var i = 0; i < numposts; 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="'+cmcolor+'">('+pcm+' '+text+')</font></i>' : '';


    var month = [1,2,3,4,5,6,7,8,9,10,11,12];
    var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];

    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 = (showPostDate) ? '<i><font color="'+cmcolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";

posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;


if (i==0) {
var trtd = '<div id="cotent-news"><table><tr><td><div id="top-news"><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px; margin-right:10px;" width="'+topwidth+'" height="'+topheight+'"/><div style="color:'+topcolor+'; font-size:'+vnesize+'px;">'+posttitle+'</div>'+cmtext+ ' ' + daystr + '<br/>'+removeHtmlTag(postcontent,summaryPost)+'...<br/><a style="float:right;" href="'+posturl+'">Readmore...</a> </div>';
   
    document.write(trtd);
}

if (i==1) {
var trtd = '<div id="bottom-news"><div id="bottom-news-item"><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px;" width="'+botwidth+'" height="'+botheight+'"/><div><a style="color:'+acolor+'; font-size:'+fntsize+'px;" href="'+posturl+'">'+posttitle+'</a></div></div>';
   
    document.write(trtd);
}

if ((i>1)&&(i<botnum)) {
var trtd = '<div id="bottom-news-item"><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px;" width="'+botwidth+'" height="'+botheight+'"/><div><a style="color:'+acolor+'; font-size:'+fntsize+'px;" href="'+posturl+'">'+posttitle+'</a></div></div>';
   
    document.write(trtd);

}

if (i==botnum) {
var trtd = '<div id="bottom-news-item"><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px;" width="'+botwidth+'" height="'+botheight+'"/><div><a style="color:'+acolor+'; font-size:'+fntsize+'px;" href="'+posturl+'">'+posttitle+'</a></div></div></div></td>';
   
    document.write(trtd);
}

if (i==botnum+1) {
    var trtd = '<td><div id="left-news"><img src="'+imgico+'"/><a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br/>';
   
    document.write(trtd);
}
if ((i>botnum+1)&&(i<numposts-1)) {
    var trtd = '<img src="'+imgico+'"/><a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br/>';
   
    document.write(trtd);
}
if (i==numposts-1) {
    var trtd = '<img src="'+imgico+'"/><a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a></div></td></tr></table></div>';
   
    document.write(trtd);
}
    j++;
}

}
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>    
<!--End Đoạn script Số 2-->      

Phần III : Sưu Tầm thủ thuật blogspot tạo Recent post - random post  2, 3 cột đơn giản :

• [Recent Post 2 cột] https://www.aloseo.xyz/2016/03/tao-widget-bai-viet-moi-2-cot-co-hinh.html
• [Recent code 3 cột - mẫu 1 ] https://khanh98.blogspot.com/2015/05/recent-post-theo-tung-nhan-cho-blog-tren-trang-tinh.html
• [Recent code 3 cột - mẫu 2 ] https://thuthuatgood.blogspot.com/2011/05/tien-ich-recent-posts-with-3-columns_8776.html?m=1
• [Ok r/blogspot : ] : http://fphn.blogspot.com/2014/09/hien-thi-bai-viet-dang-3-cot-trong-1.html
• [* Tổng hợp code hiển thị bài đăng theo nhãn có ảnh ] :  https://blog.phattrien.net/2018/08/code-hien-thi-bai-ang-theo-nhan-co-anh.html
• https://blog.phattrien.net/2018/08/code-hien-thi-bai-ang-theo-nhan-co-anh.html
• [ Recen code Zingme ] : https://djkenbi198x.blogspot.com/2012/10/recent-post-width-thumbnail-3-cot-cho.html
• http://www.sotayabc.xyz/2016/09/tong-hop-code-recent-post-widgets-cho.html
• https://www.ivietpr.com/2019/03/code-blogger-lam-dep-giao-dien-trang-chu.html
• http://fphn.blogspot.com/2014/09/hien-thi-bai-viet-cho-1-nhan-xep-theo-3.html
• https://blog.phattrien.net/2018/08/code-hien-thi-bai-ang-theo-nhan-co-anh.html
• https://blog.phattrien.net/2018/08/code-hien-thi-bai-ang-theo-nhan-co-anh.html
• recent post 3 column tin tức blogspot
• https://djkenbi198x.blogspot.com/2012/10/recent-post-width-thumbnail-3-cot-cho.html
• http://blogmoicuahung.blogspot.com/2015/09/recent-posts-widget-bai-viet-moi-nhat.html
• https://thuthuatgood.blogspot.com/2011/05/tien-ich-recent-posts-with-3-columns_8776.html?m=1
• https://www.w3.org/html/logo/

Recent Post 3 column đơn giản style 1 :

<!-- Recent Post 3 column style 1-->
 <style type="text/css">
    #itechplus-rc-3cot {width:320px;}
    table#itechplus-rc-3cot {border:1px solid #ccc;}
    #rc-3cot {padding:0 8px;width:30%;}
    #rc-3cot p{padding:0;margin:0 0 5px 0;}
    #rc-3cot img {margin:8px 0 2px; height:60px; width:50px; border:1px solid #ccc; padding:1px;}
    #rc-3cot a:link {font:normal 12px arial;}
    #itechplus-rc-3cot h2 {
    background:url(https://lh3.googleusercontent.com/_PAuO_he0N0k/TbzBhkqMYFI/AAAAAAAAII8/foXvO5UIqg4/itechplus-rc-3cot.gif) no-repeat top left;
    padding:5px 0 14px 15px;
    font:bold 13px Verdana;
    margin:0px;
    color:#fff;
    }
    </style>
    <script type="text/javascript">
    home_page = "https://www.digitalnomad.vn/";
    label = "Gia Bảo Blog";
    numposts = 9;
    sumTitle = 24;
    colortitle = "#333";
    imgr = new Array();
    imgr[0] = "https://lh6.googleusercontent.com/_PAuO_he0N0k/TZRW-L29nGI/AAAAAAAAFuM/14HvFKPlaKo/noimage.jpg";
    showRandomImg = true;
    </script>
    <div id="itechplus-rc-3cot">
    <h2>Recent Posts 3 column</h2>
<!--    
    <script src="https://sites.google.com/site/itechroot/javascripts/itechplus-rc-3cot.txt" type="text/javascript"></script>
-->
     
    <script type="text/javascript">
    eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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}('15 O(a,b){8(a.w("<")!=-1){4 s=a.12("<");z(4 i=0;i<s.9;i++){8(s[i].w(">")!=-1){s[i]=s[i].10(s[i].w(">")+1,s[i].9)}}a=s.17("")}b=(b<a.9-1)?b:a.9-2;1c(a.1k(b-1)!=\' \'&&a.w(\' \',b)!=-1)b++;a=a.10(0,b-1);1m a}15 Z(e){j=(1j)?Y.1l((L.9+1)*Y.16()):0;q=U T();4 f=U T();z(4 i=0;i<K;i++){4 g=e.S.R[i];4 h=g.A.$t;4 l;4 n;8(i==e.S.R.9)F;z(4 k=0;k<g.x.9;k++){8(g.x[k].Q==\'18\'){n=g.x[k].H;F}}z(4 k=0;k<g.x.9;k++){8(g.x[k].Q==\'1a\'&&g.x[k].1x==\'1d/1e\'){l=g.x[k].A.12(" ")[0];F}}8("W"J g){4 o=g.W.$t}D 8("N"J g){4 o=g.N.$t}D 4 o="";s=o;a=s.w("<q");b=s.w("E=\\"",a);c=s.w("\\"",b+5);d=s.1b(b+5,c-b-5);8(j>L.9-1)j=0;q[i]=L[j];8((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))q[i]=d;4 p=h.9;8(p>P){f[i]=\'<B v="u-r"><C><q G="\'+h+\'" E="\'+q[i]+\'"/><p><a A="\'+h+\'" H="\'+n+\'" V="M:\'+X+\';">\'+O(h,P)+\' ...</a></p><C></B>\'}D{f[i]=\'<B v="u-r"><C><q G="\'+h+\'" E="\'+q[i]+\'"/><p><a A="\'+h+\'" H="\'+n+\'" V="M:\'+X+\';">\'+h+\'</a></p></C></B>\'}}4 m=K/3;6.7("<11 1f=\\"0\\" 1g=\\"0\\" 1h=\\"0\\" v=\\"1i-u-r\\">");z(4 j=0;j<m;j++){8(j%3==0){6.7("<y v=\\"u-r-13\\">");6.7(f[j*3]);6.7(f[j*3+1]);6.7(f[j*3+2]);6.7("<y v=\\"u-r-13\\">");6.7("</y>")}D{6.7("<y v=\\"u-r-14\\">");6.7(f[j*3]);6.7(f[j*3+1]);6.7(f[j*3+2]);6.7("<y v=\\"u-r-14\\">");6.7("</y>")}}6.7("</11>")}6.7("<I E=\\""+1n+"1o/1p/1q/-/"+1r+"?1s-1t="+K+"&1u=1v&G=1w-J-I&19=Z\\"><\\/I>");',62,96,'||||var||document|write|if|length|||||||||||||||||img|3cot|||rc|id|indexOf|link|tr|for|title|td|center|else|src|break|alt|href|script|in|numposts|imgr|color|summary|removeHtmlTag|sumTitle|rel|entry|feed|Array|new|style|content|colortitle|Math|showrecentposts99|substring|table|split|top|bottom|function|random|join|alternate|callback|replies|substr|while|text|html|border|cellspacing|cellpadding|itechplus|showRandomImg|charAt|floor|return|home_page|feeds|posts|default|label|max|results|orderby|published|json|type'.split('|'),0,{})) 
    </script>

 <!--    
    <p style="float:right;margin:0;padding:3px">Xem tất cả<a href="https://www.digitalnomad.vn/"> Phần mềm bản quyền &#187;</a></p>
 -->
  </div>
<!-- Recent Post 3 column style 1-->
 

Recent Post 3 column đơn giản style 2 : 

<!-- Recent Post 3 column style 2-->
    <style type="text/css">
    #itechplus-rc-3cot {width:516px;}
    table#itechplus-rc-3cot {border:1px solid #ccc;}
    #rc-3cot {padding:0 8px;width:30%;}
    #rc-3cot p{padding:0;margin:0 0 5px 0;}
    #rc-3cot img {margin:10px 9px 5px -15px; height:120px; width:165px; border:1px solid #ccc; padding:1px;}
    #rc-3cot a:link {font:bold 12px arial;}
    #itechplus-rc-3cot h2 {
    background:url(#) no-repeat top left;
    padding:5px 0 14px 15px;
    font:bold 13px Verdana;
    margin:0px;
    color:#fff;
    }
    </style>
    <script type="text/javascript">
    home_page = "https://www.digitalnomad.vn/";
    label = "Kiếm Tiền";
    numposts = 6;
    sumTitle = 18;
    colortitle = "#333";
    imgr = new Array();
    imgr[0] = "https://lh4.googleusercontent.com/-pmYnlGErk4I/UM1U-f81LTI/AAAAAAAACu4/8lTz9QwAFt8/s300/no_image.jpg";
    showRandomImg = true;
    </script>
    <div id="itechplus-rc-3cot">
    <script type="text/javascript">
    //<![CDATA[
    eval(function(p,a,c,k,e,r){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--)r[e(c)]=k[c]||e(c);k=[function(e){return r[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}('15 O(a,b){8(a.w("<")!=-1){4 s=a.12("<");z(4 i=0;i<s.9;i++){8(s[i].w(">")!=-1){s[i]=s[i].10(s[i].w(">")+1,s[i].9)}}a=s.17("")}b=(b<a.9-1)?b:a.9-2;1c(a.1k(b-1)!=\' \'&&a.w(\' \',b)!=-1)b++;a=a.10(0,b-1);1m a}15 Z(e){j=(1j)?Y.1l((L.9+1)*Y.16()):0;q=U T();4 f=U T();z(4 i=0;i<K;i++){4 g=e.S.R[i];4 h=g.A.$t;4 l;4 n;8(i==e.S.R.9)F;z(4 k=0;k<g.x.9;k++){8(g.x[k].Q==\'18\'){n=g.x[k].H;F}}z(4 k=0;k<g.x.9;k++){8(g.x[k].Q==\'1a\'&&g.x[k].1x==\'1d/1e\'){l=g.x[k].A.12(" ")[0];F}}8("W"J g){4 o=g.W.$t}D 8("N"J g){4 o=g.N.$t}D 4 o="";s=o;a=s.w("<q");b=s.w("E=\\"",a);c=s.w("\\"",b+5);d=s.1b(b+5,c-b-5);8(j>L.9-1)j=0;q[i]=L[j];8((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))q[i]=d;4 p=h.9;8(p>P){f[i]=\'<B v="u-r"><C><q G="\'+h+\'" E="\'+q[i]+\'"/><p><a A="\'+h+\'" H="\'+n+\'" V="M:\'+X+\';">\'+O(h,P)+\' ...</a></p><C></B>\'}D{f[i]=\'<B v="u-r"><C><q G="\'+h+\'" E="\'+q[i]+\'"/><p><a A="\'+h+\'" H="\'+n+\'" V="M:\'+X+\';">\'+h+\'</a></p></C></B>\'}}4 m=K/3;6.7("<11 1f=\\"0\\" 1g=\\"0\\" 1h=\\"0\\" v=\\"1i-u-r\\">");z(4 j=0;j<m;j++){8(j%3==0){6.7("<y v=\\"u-r-13\\">");6.7(f[j*3]);6.7(f[j*3+1]);6.7(f[j*3+2]);6.7("<y v=\\"u-r-13\\">");6.7("</y>")}D{6.7("<y v=\\"u-r-14\\">");6.7(f[j*3]);6.7(f[j*3+1]);6.7(f[j*3+2]);6.7("<y v=\\"u-r-14\\">");6.7("</y>")}}6.7("</11>")}6.7("<I E=\\""+1n+"1o/1p/1q/-/"+1r+"?1s-1t="+K+"&1u=1v&G=1w-J-I&19=Z\\"><\\/I>");',62,96,'||||var||document|write|if|length|||||||||||||||||img|3cot|||rc|id|indexOf|link|tr|for|title|td|center|else|src|break|alt|href|script|in|numposts|imgr|color|summary|removeHtmlTag|sumTitle|rel|entry|feed|Array|new|style|content|colortitle|Math|showrecentposts99|substring|table|split|top|bottom|function|random|join|alternate|callback|replies|substr|while|text|html|border|cellspacing|cellpadding|itechplus|showRandomImg|charAt|floor|return|home_page|feeds|posts|default|label|max|results|orderby|published|json|type'.split('|'),0,{}))
    //]]>
    </script>
    <p style="float: right; margin: 0px; padding: 3px;"><a href="http://www.hacbayit.com/search/label/Template%20Blogspot?&amp;max-results=10"></a></p>
    </div>
<!-- Recent Post 3 column style 2-->

Recent Post 2 column đơn giản style 1 :

<!-- Recent Post 2 column style 2-->
<style type='text/css'>
/*Tooltip*/
#osdhtmltooltip{
border: #999 1px solid;
padding: 4px;
font-size: 10pt;
z-index: 100;
left: -300px;
visibility: hidden;
width: 240px;
font-family: Arial;
position: absolute;
background-color: #fcfee4;
text-align: left;
}
#osdhtmltooltip img{
float: left;
padding: 3px;
border: solid 1px #FFF;
margin: 2px;
}
#osdhtmltooltip h3{
color: #000;
padding: 2px;
margin: 0px;
font-weight: bold;
text-transform: none;
text-decoration: none;
}
#osdhtmltooltip span{
color: #999;
font-style: italic;
}
#osdhtmltooltip div{
color: #000;
}
#osdhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;
}
#rc-posts-2-col {
width:210px;
}
#rc-posts-2-col h3 {
background:url(https://lh5.googleusercontent.com/-SX38Jpw5tnU/UxVwp04Ds-I/AAAAAAAALec/rrzOhghDCP4/s1600/mmoforfun-blogspot-com.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:12px;
margin:0px;
color:#fff;
}
table#rc-2cot {border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-left:1px solid #ccc;}
#rc-tr1 {background:#f3f3f3;}
#rc-tr0 {background:#fff;}
#rc-td {padding:2px; color:#ff0000; border-right:1px solid #ccc;width:160px;}
#rc-td img {float: left;width: 40px;height: 40px;border: 1px solid #ccc;margin:5px;padding: 1px;}
#rc-td a {color:#ff0000;text-decoration:none;}
#rc-td a:hover {text-decoration:underline;}
</style>
Bước 5 : Vào Phần Tử trang - Chọn Thêm Tiện ích - Thêm một HTML/Javarscip và dán đoạn code bên dưới vào:

<script type="text/javascript">
var tooltipID='osdhtmltooltip';
var imgtipID='osdhtmlpointer';
document.write('<div id="'+tooltipID+'" style="VISIBILITY: hidden;"></div>');
document.write('<img id="'+imgtipID+'" style="VISIBILITY: hidden;" src="http://data.fandung.com/img/oTooltiparrow.gif">');
var offsetfromcursorX=12;
var offsetfromcursorY=10;
var offsetdivfrompointerX=10;
var offsetdivfrompointerY=14;
var ie=document.all;
var ns6=document.getElementById&&!document.all;
var enabletip=false;if(ie||ns6)
var tipobj=document.getElementById(tooltipID);
var pointerobj=document.getElementById(imgtipID);
function ietruebody(){return(document.compatMode&&document.compatMode!="BackCompat")?document.documentElement:document.body;}
function showtip(thetext,thewidth,thecolor){try{if(!tipobj.style)
return;if(ns6||ie){if(thewidth)
tipobj.style.width=thewidth+"px";if(thecolor&&thecolor!="")
tipobj.style.backgroundColor=thecolor;tipobj.innerHTML=thetext;enabletip=true;return false;}}
catch(e)
{}}
function positiontip(e){if(!tipobj.style)
return;if(enabletip&&pointerobj){
var nondefaultpos=false;
var curX=(ns6)?e.pageX:event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY:event.clientY+ietruebody().scrollTop;
var winwidth=ie&&!window.opera?ietruebody().clientWidth:window.innerWidth-20;
var winheight=ie&&!window.opera?ietruebody().clientHeight:window.innerHeight-20;
var rightedge=ie&&!window.opera?winwidth-event.clientX-offsetfromcursorX:winwidth-e.clientX-offsetfromcursorX;
var bottomedge=ie&&!window.opera?winheight-event.clientY-offsetfromcursorY:winheight-e.clientY-offsetfromcursorY;
var leftedge=(offsetfromcursorX<0)?offsetfromcursorX*(-1):-1000;

if(rightedge<tipobj.offsetWidth){tipobj.style.left=curX-tipobj.offsetWidth+"px";nondefaultpos=true;}
else if(curX<leftedge)
tipobj.style.left="5px";
else{tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px";pointerobj.style.left=curX+offsetfromcursorX+"px";}
if(bottomedge<tipobj.offsetHeight){tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px";nondefaultpos=true;}
else{tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px";pointerobj.style.top=curY+offsetfromcursorY+"px";}
tipobj.style.visibility="visible";if(!nondefaultpos)
pointerobj.style.visibility="visible";else
pointerobj.style.visibility="hidden";}}
function hidetip(){if(!tipobj.style)
return;if(ns6||ie){enabletip=false;tipobj.style.visibility="hidden";pointerobj.style.visibility="hidden";tipobj.style.left="-1000px";tipobj.style.backgroundColor='';tipobj.style.width='';}}
document.onmousemove=positiontip;
</script>
<script type="text/javascript">
numposts = 4; //số bài viết hiển thị trong tiện ích
postcount = 400; //số kí tự của đọan nội dung tóm tắt bài viết
sumTitle = 40; // số kí tự của tiêu đề bài viết
colortitle = "#555";
tcolortitle = "#ff6c00"; // màu của tiêu đề bài viết ở phần mô tả
cmcolor = "#6b1f01"; // màu của phần thông tin bài viết (gồm : ngày đăng và số nhận xét)
nocmtext = "No Comment";
cmtext = "Comments";
posttext = "Posted in";
label = "Kiếm Tiền"; //Tên nhãn
home_page = "https://www.digitalnomad.vn/";// Link blog của bạn
</script>
<div id="rc-posts-2-col"><h3>Recent Post 2 Cột</h3><div id="rc-posts-loading"><img align='absmiddle' src='http://1.bp.blogspot.com/-PDG6t2PnV94/UQPNQUyEBKI/AAAAAAAAKHM/6j7xQg6yw3I/s1600/loading.gif'/></div>

<script type="text/javascript">
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 showrecentposts(json) {
img = new Array();
var td = new Array();
var sumPost = new Array();
var posttitle = new Array();
var postcontent = new Array();
var comment = new Array();
var postDay = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];

posttitle[i] = 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;
}
}

var postdate = entry.published.$t;
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
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;
}
}
postDay[i] = day+ "-" + m + "-" + y ;
if ("content" in entry) {
postcontent[i] = entry.content.$t;}
else
if ("summary" in entry) {
postcontent[i] = entry.summary.$t;}
else postcontent[i] = "";

s = postcontent[i] ; 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;} else {img[i]="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";}


if (pcm==0) {comment[i] = " (" +nocmtext+ ") ";}
else {comment[i] = " (" + pcm + " " +cmtext+ ") ";}

postcontent[i] = postcontent[i].replace(/"/g, "“");
posttitle[i] = posttitle[i].replace(/"/g, "“");

sumPost[i] ="sumPost"+i;
var tilen= posttitle[i].length;
if (tilen > sumTitle) {
td[i]= '<td id="rc-td"><img src="'+img[i]+'"/><a onmouseover="showtip('+sumPost[i]+');" onmouseout="hidetip();" href="'+posturl+'" style="color:'+colortitle+';">'+removeHtmlTag(posttitle[i],sumTitle)+' ...</a></td>';
}
else {
td[i]= '<td id="rc-td"><img src="'+img[i]+'"/><a onmouseover="showtip('+sumPost[i]+');" onmouseout="hidetip();" href="'+posturl+'" style="color:'+colortitle+';">'+posttitle[i]+'</a></td>';
}

}
var m = numposts / 2;
document.write("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" id=\"rc-2cot\">");
for (var j=0; j<m; j++) {
if (j%2==0) {
document.write("<tr id=\"rc-tr0\">");
document.write(td[j*2]);
document.write(td[j*2+1]);
document.write("<tr id=\"rc-tr0\">");
document.write("</tr>");
}
else {
document.write("<tr id=\"rc-tr1\">");
document.write(td[j*2]);
document.write(td[j*2+1]);
document.write("<tr id=\"rc-tr1\">");
document.write("</tr>");
}
}
document.write("</table>");
document.getElementById("rc-posts-loading").style.display = "none";
for (var p = 0; p < numposts; p++) {
document.write("<script type=\"text/javascript\">var "+sumPost[p]+" =\"<b style='color:"+tcolortitle+"'>"+posttitle[p]+"<\/b> <br\/> <i style='color:"+cmcolor+"'>"+posttext+" : "+postDay[p]+" - "+comment[p]+" <\/i><br\/>"+removeHtmlTag(postcontent[p],postcount)+" ...\";<\/script>");
}
}
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>

<!-- Recent Post 2 column style 2--> 

Trang Web Tham Khảo :

• [ Mẫu code 2 code 2 column : cột 1 chứa 2 Div - cột 2 chứa 1 Div ] : https://www.sitepoint.com/community/t/can-flexbox-do-this-2-column-setup/285440
• [ Mẫu code 2 code 2 column ( 3 mẫu cực đẹp ) ] : https://stackoverflow.com/questions/23232998/create-a-quad-of-squares-inside-a-larger-square
• https://jinam2.tistory.com/m/39
• https://in.pinterest.com/amp/tutorialsbrain/css-website-related-image-and-infographics/
• https://www.cssscript.com/flexbox-based-horizontal-accordion-pure-css/
• https://stackoverflow.com/questions/20478256/html-css-fixed-positioning-causing-overlapping-divs
• https://lamvt.vn/mau-chu-va-mau-nen-trong-css/amp/
• https://www.iteramos.com/pregunta/57563/css-para-crear-una-esquina-curva-entre-dos-elementos
• https://stackoverflow.com/questions/61420203/how-do-i-create-a-card-grid-view-html-css-and-flask
• https://stackoverflow.com/questions/36060689/bring-div-to-the-front-after-3d-transition-css
• https://stackoverflow.com/questions/49970917/bootstrap-4-column-ordering-conundrum
• https://www.chegg.com/homework-help/questions-and-answers/html-would-get-right-column-look-like-green-right-column-using-css-ve-included-code--need--q30853760
• https://www.dummies.com/web-design-development/html5-and-css3/how-to-build-a-fixed-width-floating-layout-for-html5-and-css3-programm
• https://wpsites.net/web-design/style-content-columns/
• https://stackoverflow.com/questions/49970917/bootstrap-4-column-ordering-conundrum
• https://stackoverflow.com/questions/54318822/center-image-inside-one-of-two-columns-with-css

Từ khoá : Code Ads 2 Column | 2-Column Layouts with Float

✖️ưở🇳🇬🇬ỗ 🇷ì🇻🇮🇺6️⃣0️⃣🇸

🦊 Muốn làm đệ tử Mờ Mờ O, làm việc trực tuyến từ xa, không văn phòng, quên cái Laptop, máy tính để bàn đi. Sắm cái xì mắc phôn 🦊

Dành cho anh em, kiếm cái mô bai, cài áp tài xế công nghệ, chạy Gờ ráp, kiếm thêm thu nhập.

+ Poco M4 Pro : Xem Tại Đây
+ Oppo A54 : Xem Tại Đây
+ Xiaomi Redmi Note 11 : Xem Tại Đây
+ Samsung Galaxy A23 : Xem Tại Đây

Dành cho anh em săn sale điện thoại giá rẻ, cài App, viết blog kiếm tiền, làm video viral, bật tính năng kiếm tiền từ quảng cáo trên Youtube, tiktok

+ Tecno Poca 3 : Xem Tại Đây
+ Realme narzo 50i Prime : Xem Tại Đây

Tiền nhiều để làm gì ? mua Flagship đời mới xịn sò con bò, muốn làm gì thì làm ! Mắc mệt hà.

✔☋@ ƙ¡ếლ ζ¡ềղ ❍ղ£¡ղℰ