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
Code Đăng bài 2 cột Style 2
3. Code 2 column đăng bài trên Blogspot - Style 3 :
<!-- 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 Đăng bài 2 cột 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
<!-- 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 = "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 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: ""; 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&orderby=published&alt=json-in-script&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&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>
<!-- 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 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 -->
<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>
<!-- End Thủ thuật Blogspot tạo Recent Post Magazine cho blogspot mẫu 3 -->
Phần III : Sưu Tầm thủ thuật blogspot tạo Recent post - random post 2, 3 cột đơn giản :
<!-- 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 :
<!-- 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 = "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 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: ""; 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&orderby=published&alt=json-in-script&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&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>
<!-- 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 :
<!-- 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(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 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 -->
<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 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] = "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>
<!-- Đ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>
<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-->
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGzvbALzGhwzSTMqrmVz_BPzd3dPlsGv9yOjKaC4m_DSHHMOsljO6YVVzJROU1WeNtlNp6gBFq1ktLpyr_4J63s4Z1PjswAa4FEgscq05mwciEXUJ1lnc9-JDlrWGxykl9H6E-_hhfweA/) 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi715jMeqS6CV4L6VYWIKzD5hoLM2XYXsDIhi57EyY7_H4etD5kQ4bcEriw8-zLtt0_4aiVqqBc4-KP0Oz62znBfsTm74pzUyTpH906N2Y8Q8RzKLzeuX8FAaQ5sAv-snT2RfCk2ithn2Q/";
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 »</a></p>
-->
</div>
<!-- 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGzvbALzGhwzSTMqrmVz_BPzd3dPlsGv9yOjKaC4m_DSHHMOsljO6YVVzJROU1WeNtlNp6gBFq1ktLpyr_4J63s4Z1PjswAa4FEgscq05mwciEXUJ1lnc9-JDlrWGxykl9H6E-_hhfweA/) 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi715jMeqS6CV4L6VYWIKzD5hoLM2XYXsDIhi57EyY7_H4etD5kQ4bcEriw8-zLtt0_4aiVqqBc4-KP0Oz62znBfsTm74pzUyTpH906N2Y8Q8RzKLzeuX8FAaQ5sAv-snT2RfCk2ithn2Q/";
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 »</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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfjfB2H7LmYAWGGOnrlv8dqFChD2qancHAc1Q_JzvHgF69j_IRorPF9tuQ_jcyxX4bDVZrFTyo6UYQtjEw0PhobJoyLyg0JiTMBCRtsmepsV-qwMFLv4-f_33oahbmDZZ8apw1sfnr3Ug/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?&max-results=10"></a></p>
</div>
<!-- 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfjfB2H7LmYAWGGOnrlv8dqFChD2qancHAc1Q_JzvHgF69j_IRorPF9tuQ_jcyxX4bDVZrFTyo6UYQtjEw0PhobJoyLyg0JiTMBCRtsmepsV-qwMFLv4-f_33oahbmDZZ8apw1sfnr3Ug/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?&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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXsHOWYsJ5dMoli-ee0aygOg5V4zPrJSaH1TGB4hilfspmzEayI2hmblxnufT1zYnah2FQDjfY1VexlWXhcZNr8GJTvkHnxpxs0qdO0qtfynY4NbVEciqRI4TAte4tGyVsFrxSLhdImeRC/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]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqfkS60bG8p9o1hfjABZFvhYfQgzyjqJ9kWKCSkOmUlQG2-PGeYWZ2mGADHVvX0c84dpe5fIZHpBfIpymQsrSivAd56eSsCiWWTGeQ8mBXR_F4MPyPtHxPsSTJMIHfvmtVcmZH5sBD-tk/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-->
<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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXsHOWYsJ5dMoli-ee0aygOg5V4zPrJSaH1TGB4hilfspmzEayI2hmblxnufT1zYnah2FQDjfY1VexlWXhcZNr8GJTvkHnxpxs0qdO0qtfynY4NbVEciqRI4TAte4tGyVsFrxSLhdImeRC/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]="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiqfkS60bG8p9o1hfjABZFvhYfQgzyjqJ9kWKCSkOmUlQG2-PGeYWZ2mGADHVvX0c84dpe5fIZHpBfIpymQsrSivAd56eSsCiWWTGeQ8mBXR_F4MPyPtHxPsSTJMIHfvmtVcmZH5sBD-tk/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