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

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

Phần I : Sưu Tầm Code Html, Css, Javascript 2 cột, 3 cột, 4 cột, multi column layout
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
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

<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 = "no-float" ;
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>
.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: ""; 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'>


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




</div>

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



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&orderby=published&alt=json-in-script&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&orderby=published&alt=json-in-script&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&orderby=published&alt=json-in-script&callback=box2'/>
<div style='clear:both;'/>
</div>

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

<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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh-ePKiZ8TjKsB5Rcr7uPkGX_vPfeCvs6r37hbcyqcP0dU5NmwxIh1fE-Qt2QrxAzTSZuW4SIwaaagiroUZQRORH8u9pepGtdqkxhhcv93NeQd0mq2pw1lwJ_iv1WeDyt1sD-tVUoShj_E-/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzbrT9oBdZrfSsMPtjgOsqdGTHDmoz_xgMpXELnFAu7sBrInprcVoz3L50wQek1xwB4rcbaeTd0fi6iNe4ZqEag93YtVHaqTxXiS6_RmhBW9Hl5CKxv_4wLY_pcGoVtio2Q5Nvv7w6hXwr/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJu988oFNpDHldHI88diuJ8n34GjZ6woLUDQ8GQy5zbhjpvDHuBTJd2fcUKqZ_gxb65tS26pAgsX98pubSJ0F6-SrfbuYL2Wp0efFAYUTwWu4EfRo0UfgsMdZbEho0NYcczBa5hpoSVkBq/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhO59t6GSiKkadZbYmDn11wTxiWRiavjjG0hTYb2-vULu04vu5ooCDxkrZ0YHTSRaMm1F9sEPrJWJI4RBOb-q2Fq7zsoyQ_9N35tpdlSai5b-0Vo2yT9tebkDcifF_gFkbp_bhnIgcdstZM/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaAPCklYRcRByyHGIeAbIVBXS1GXi_fwgbTKKIY7iuGP6-8Lr84VRViMdoIMLHIGmsW2poPZ_T7ngv9qw3KCSvcmDXs22GXqUA0qaPW-ssYY9qnKolSZMmtK5o6E99L02CJt1P6c-Vz5e8/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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgE2AhrjSgoRQaV39sMzetkWK9c1Sv3Tq6kMpvjTHNx7ZTpwJDR29h5BUF05oymam90mfLhb-ibAx8gY46E5k099t3PA5DmaVJHFP9AOFqLNDmrIHpQ8_TRFcignrKpWOo5wuGMiuZZHmqV/s1600/nothumbnail-namkna-blogspot-com.gif";
imgnew = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhPdRRCr1RoLNUN7cbKgRe6ExFqMl3OGVmOtdy92WoILRbmGqo4usDlNvJfEBKthMAa5UIb65hvbN6-UDWi223L5nHsDtY46GORvDqc5K5kM_lR6Ox6n98jqLxzvo_BXStq-xKgJskLjMJy/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 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>

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 :

<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>

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

<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] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiQq7S0BvxL_HYsO3U1yMrk1k76NPkHsXRNR9ypdKmbH3f4_kXHoRxEn5U485pmE0HD3rMhJuBgRCeJHzV75N5XgUis_tTEgVFY0KmRaLYlRLKhw8TX6X4342uyyvc7s7RxDRWxp_SL0tIc/s1600/nothumbnail-bai-viet-kgong-anh-namkna-ngoctra.gif";
imgico= "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZIl-nVpOGLjClXR7OiuLprG5_efrohdqFrqUWBlzH0u8huO5bRcYgkx_FztxtjPv-zVYMZzE69XVbywAZPDW2Y7K-vwUoUh-mIEUHMKKPwatNLyJew6NY8XBXLw132dI8jlKlEUtcncbo/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>


<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>

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

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

Băng đoạn Code sau :

<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>

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/

Gia Bảo Blog

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

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 :

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

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

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

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

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

2. Thủ thuật Blogspot tạo Recent Post Magazine cho blogspot mẫu 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 3 column đơn giản style 1 :

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

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