Mẫu code đăng bài viết blogspot 2 cột, 3 cột, 4 cột, multi column layout, cực kỳ hữu ích dành cho người kiếm tiền trên mạng từ việc xây dựng & chia sẻ nội dung hữu ích website
Hôm nay Gia Bảo Blog chia sẻ một số mẫu code Mẫu code đăng bài viết blogspot 2 cột, 3 cột, 4 cột, multi column layout, cực kỳ hữu ích dành cho người kiếm tiền trên mạng từ việc xây dựng & chia sẻ nội dung hữu ích website.
Bài viết được chia làm 2 phần bao gồm
- Phần I : Sưu Tầm Code Html, Css, Javascript 2 cột, 3 cột, 4 cột, multi column layout
- Phần II : Sưu Tầm thủ thuật blogspot tạo Recent post đẹp mắt và chuyên nghiệp 2, 3,... cột cho các blogger
- Phần III : Sưu Tầm thủ thuật blogspot tạo Recent post 2, 3 cột đơn giản
Phần I : Sưu Tầm Code Html, Css, Javascript 2 cột, 3 cột, 4 cột, multi column layout.
1. Code 2 column đăng bài trên Blogspot - Style 1 :
Code Nguồn : https://www.sitepoint.com/community/t/can-flexbox-do-this-2-column-setup/285440/8
Hình ảnh minh họa cấu trúc hiển thị nội dung trên PC
Hình ảnh minh họa cấu trúc hiển thị nội dung trên Mobile
Code Đăng bài 2 cột Style 1 :
<!-- Code 2 cột Style 1-->
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.wrap {
width:96%;
max-width: 1000px;
margin: 0 auto;
}
header,footer {
padding: 10px;
font-weight: bold;
text-align: center;
}
header {
background: tomato;
}
footer {
background: lightgreen;
}
/*====== Flex Rules ======*/
.inner {
display: flex;
flex-flow: row wrap;
font-weight: bold;
text-align: center;
}
.inner > * {
padding: 10px;
font-weight: bold;
}
.main {
order: 3;
flex: 3 0px;
text-align: left;
background: deepskyblue;
}
.side-1 {
order: 1;
flex: 0 180px;
background: gold;
}
.side-2 {
order: 2;
flex: 0 180px;
background: hotpink;
}
@media all and (max-width: 600px) {
.inner {flex-flow: column wrap;}
.side-1,.side-2 {flex: 0;}
.main {order: 2;}
.side-2 {order: 3;}
}
</style>
<div class="wrap">
<header>Header Tiêu Đề đăng bài viết blogspot dạng code phân 2 cột</header>
<div class="inner">
<div class="side-1">Nội Dung hiển thị đầu bài đăng trên điện thoại - cạnh trái Side 1 </div>
<div class="main">
<h2>Tiêu đề H2 nội dung bên phải</h2>
<p>Dòng nội dung bên phải số 1 </p>
<p>Dòng nội dung bên phải số 2</p>
<p>Dòng nội dung bên phải số 3</p>
<p>Dòng nội dung bên phải số 4</p>
</div>
<!-- Thêm Code này nếu sử dụng cột 1 chia làm 2 Side Bar bên trái - Cột này sẽ được hiển thị cuối bài viết khi xem trên điện thoại
<div class="side-2">Nội Dung hiển thị cuối bài đăng trên điện thoại - PC cạnh trái Side 2 </div>
-->
</div>
<footer>Footer - Chân Trang </footer>
</div>
<!-- Code 2 cột Style 1--> 2. Code 2 column đăng bài trên Blogspot - Style 2 :
Code Nguồn : https://www.sitepoint.com/community/t/can-flexbox-do-this-2-column-setup/285440/8
Hình ảnh minh họa cấu trúc code 2 column Style 2 hiển thị nội dung trên PC 
Hình ảnh minh họa cấu trúc code 2 column Style 2 hiển thị nội dung trên Mobile
Code Đăng bài 2 cột Style 2
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 :
Hình ảnh minh họa cấu trúc code 2 column Style 3 hiển thị nội dung trên PC
Hình ảnh minh họa cấu trúc code 2 column Style 3 hiển thị nội dung trên Mobile
Code Đăng bài 2 cột Style 3 :
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] = "http://2.bp.blogspot.com/-5ShnwAhC-eM/TyyZeHwfpPI/AAAAAAAAAcs/cRaiet9Jhj4/s1600/nothumbnail-bai-viet-kgong-anh-namkna-ngoctra.gif";
imgico= "http://4.bp.blogspot.com/-GsC8zLoeoSg/TyyZ677yMVI/AAAAAAAAAc4/SSeCIhN4jl4/s1600/icom-left-news-namkna-ngoctra.gif";
showRandomImg = true;
topwidth = 160;
topheight = 160;
botheight = 100;
botwidth = 100;
fntsize = 12;
vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"
acolor = "#555";
cmcolor = "#555";
topcolor = "#f00";
aBold = true;
text = "comments";
showPostDate = true;
summaryPost = 250;
summaryFontsize = 12;
summaryColor = "#000";
botnum = 4;
numposts = 10;
label = "Gia Bảo Blog"; home_page = "https://www.digitalnomad.vn/";
</script>
<!-- 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(http://2.bp.blogspot.com/-UXDdO1Pmiug/T7C9CG1j5qI/AAAAAAAABjw/tNdAXrDSBxM/s1600/main-content-namkna-blogspot-com.gif) no-repeat;
width: 90px;
height: 65px;
padding: 4px;
}
.top2_news_image img {
width:90px;
height:65px
}
#main_content .top2_news h2
{
padding-top: 2px;
}
#main_content .top2_news h2 a
{
color: #002dbe;
text-decoration: none;
}
#main_content .top2_news h2 a:hover
{
text-decoration: underline;
}
#main_content .top2_news .dot3x1
{
background: url(https://lh3.googleusercontent.com/-3ATrhHXBlPY/T7C9mOj2YDI/AAAAAAAABj4/CJK0Ud02xZE/h120/main-content-2-namkna-blogspot-com.gif) repeat-x center
center;
margin: 10px 0;
height: 1px;
font-size: 1px;
}
#main_content .topo_news
{
width: 174px;
float: right;
background: url(http://4.bp.blogspot.com/-J4h5botM2J8/T7C9w1c_4jI/AAAAAAAABkA/tOStmLYSrHQ/s1600/main-content-3-namkna-blogspot-com.gif) no-repeat;
padding: 5px 1px 0 1px;
}
#main_content .topo_news .topo_news_title
{
background: url(https://lh4.googleusercontent.com/-Rb7R8RByBdo/T7C-DO8HMtI/AAAAAAAABkI/nJ0TAN04vNE/h120/main-content-4-namkna-blogspot-com.gif) no-repeat;
width: 160px;
height: 22px;
color: #FFF;
padding: 4px 0 0 14px;
font-weight: bold;
font-size: 11px;
}
#main_content .topo_news ul li
{
background: url(https://lh3.googleusercontent.com/-z4xvE5SE0OM/T7C-OKuO1aI/AAAAAAAABkQ/LGxwYfhl_VA/h120/main-content-5-namkna-blogspot-com.gif) no-repeat 8px 10px;
padding: 2px 2px 2px 20px;
list-style: none;
}
#main_content .topo_news ul li a
{
color: #002392;
font-weight: bold;
font-size: 11px;
line-height: 1.5em;
text-decoration:none;
}
#main_content .topo_news ul li a:hover {text-decoration: underline;}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/-5SjTt1K65so/T7C_sqxaN4I/AAAAAAAABkY/ygqkZsYtU5U/s1600/nothumbnail-namkna-blogspot-com.gif";
imgnew = "https://lh6.googleusercontent.com/-pj0_eUYGGI8/T7C__S90T4I/AAAAAAAABkg/qez7_-sFAwI/h120/new-post-namkna-blogspot-com.gif";
showRandomImg = true;
aBold = false;
summaryPost = 280;
numposts = 9;
topoTitle = "Bài viết khác";
label = "Kiếm Tiền";
home_page = "https://www.digitalnomad.vn/";
</script>
<!--
<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/z-recent-label.js" type="text/javascript"></script>
thay thế và tải code tại link :
https://www.dropbox.com/s/dlmso6swu0ydt67/z-recent-post.js
-->
<!--https://www.dropbox.com/s/dlmso6swu0ydt67/z-recent-post.js-->
<script language="JavaScript">
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
document.write('<div id="index_news" class="clearfix"><div id="main_content"><div class="top_news clearfix">');
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+cmcolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
//var daystr = (showPostDate) ? '<i><font color="'+cmcolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
if (i==0) {
var trtd = '<div class="top1_news"><div class="top1_news_image"><a href="'+posturl+'"><img src="'+img[i]+'"></a></div><div class="top1_news_title"><h1><img src="'+imgnew+'"><a href="'+posturl+'"> '+posttitle+'</a></h1></div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';
document.write(trtd);
}
if (i==1) {
var trtd = '<div class="top2_news"><div class="top2_news_image"><img src="'+img[i]+'"></div><h2><a title="'+posttitle+'" href="'+posturl+'">'+posttitle+' </a></h2><div class="dot3x1"></div>';
document.write(trtd);
}
if (i==2) {
var trtd = '<div class="top2_news_image"><img src="'+img[i]+'"></div><h2><a title="'+posttitle+'" href="'+posturl+'"> '+posttitle+'</a></h2></div>';
document.write(trtd);
}
if (i==3) {
var trtd = '<div class="topo_news"><div class="topo_news_title"> '+topoTitle+'</div><ul id="list_others_news"><li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
}
if ((i>3)&&(i<numposts-1)) {
var trtd = '<li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
}
if (i==numposts-1) {
var trtd = '<li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li></ul></div>';
document.write(trtd);
}
j++;
}
document.write('</div></div></div>');
}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<!--End https://www.dropbox.com/s/dlmso6swu0ydt67/z-recent-post.js-->
<!-- End Thủ thuật Blogspot tạo Recent Post Magazine cho blogspot mẫu 2 -->
<style type="text/css">
*
{ padding: 0;
margin: 0;
font-family: Arial;
font-size: 12px;
}
#index_news
{
width: 525px;
margin: 5px;
}
#main_content
{
width: 525px;
float: left;
overflow: hidden;
}
#main_content .top_news
{
width: 525px;
margin-bottom: 10px;
}
#main_content .top1_news
{
width: 234px;
float: left;
margin-top: 8px;
}
#main_content .top1_news .top1_news_image img
{
border: 1px solid #CCC;
padding: 1px;
width:230px;
height:165px;
}
#main_content .top1_news .top1_news_title
{
padding: 8px 0;
text-align: justify;
}
#main_content .top1_news .top1_news_title a
{
font-size: 16px;
color: #002392;
text-decoration: none;
}
#main_content .top1_news .top1_news_title a:hover
{
text-decoration: underline;
}
#main_content .top1_news p
{
text-align: justify;
}
#main_content .top1_news p a
{
padding-left: 4px;
}
#main_content .top1_news p img, #main_content .top2_news img
{
vertical-align: bottom;
}
#main_content .top2_news
{
width: 95px;
float: left;
margin-left: 8px;
margin-top: 14px;
padding-right: 6px;
}
#main_content .top2_news .top2_news_image
{
background: url(http://2.bp.blogspot.com/-UXDdO1Pmiug/T7C9CG1j5qI/AAAAAAAABjw/tNdAXrDSBxM/s1600/main-content-namkna-blogspot-com.gif) no-repeat;
width: 90px;
height: 65px;
padding: 4px;
}
.top2_news_image img {
width:90px;
height:65px
}
#main_content .top2_news h2
{
padding-top: 2px;
}
#main_content .top2_news h2 a
{
color: #002dbe;
text-decoration: none;
}
#main_content .top2_news h2 a:hover
{
text-decoration: underline;
}
#main_content .top2_news .dot3x1
{
background: url(https://lh3.googleusercontent.com/-3ATrhHXBlPY/T7C9mOj2YDI/AAAAAAAABj4/CJK0Ud02xZE/h120/main-content-2-namkna-blogspot-com.gif) repeat-x center
center;
margin: 10px 0;
height: 1px;
font-size: 1px;
}
#main_content .topo_news
{
width: 174px;
float: right;
background: url(http://4.bp.blogspot.com/-J4h5botM2J8/T7C9w1c_4jI/AAAAAAAABkA/tOStmLYSrHQ/s1600/main-content-3-namkna-blogspot-com.gif) no-repeat;
padding: 5px 1px 0 1px;
}
#main_content .topo_news .topo_news_title
{
background: url(https://lh4.googleusercontent.com/-Rb7R8RByBdo/T7C-DO8HMtI/AAAAAAAABkI/nJ0TAN04vNE/h120/main-content-4-namkna-blogspot-com.gif) no-repeat;
width: 160px;
height: 22px;
color: #FFF;
padding: 4px 0 0 14px;
font-weight: bold;
font-size: 11px;
}
#main_content .topo_news ul li
{
background: url(https://lh3.googleusercontent.com/-z4xvE5SE0OM/T7C-OKuO1aI/AAAAAAAABkQ/LGxwYfhl_VA/h120/main-content-5-namkna-blogspot-com.gif) no-repeat 8px 10px;
padding: 2px 2px 2px 20px;
list-style: none;
}
#main_content .topo_news ul li a
{
color: #002392;
font-weight: bold;
font-size: 11px;
line-height: 1.5em;
text-decoration:none;
}
#main_content .topo_news ul li a:hover {text-decoration: underline;}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/-5SjTt1K65so/T7C_sqxaN4I/AAAAAAAABkY/ygqkZsYtU5U/s1600/nothumbnail-namkna-blogspot-com.gif";
imgnew = "https://lh6.googleusercontent.com/-pj0_eUYGGI8/T7C__S90T4I/AAAAAAAABkg/qez7_-sFAwI/h120/new-post-namkna-blogspot-com.gif";
showRandomImg = true;
aBold = false;
summaryPost = 280;
numposts = 9;
topoTitle = "Bài viết khác";
label = "Kiếm Tiền";
home_page = "https://www.digitalnomad.vn/";
</script>
<!--
<script src="http://dl.dropbox.com/u/70549761/Recent/namkna-blogspot-com/z-recent-label.js" type="text/javascript"></script>
thay thế và tải code tại link :
https://www.dropbox.com/s/dlmso6swu0ydt67/z-recent-post.js
-->
<!--https://www.dropbox.com/s/dlmso6swu0ydt67/z-recent-post.js-->
<script language="JavaScript">
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
document.write('<div id="index_news" class="clearfix"><div id="main_content"><div class="top_news clearfix">');
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+cmcolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
//var daystr = (showPostDate) ? '<i><font color="'+cmcolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
if (i==0) {
var trtd = '<div class="top1_news"><div class="top1_news_image"><a href="'+posturl+'"><img src="'+img[i]+'"></a></div><div class="top1_news_title"><h1><img src="'+imgnew+'"><a href="'+posturl+'"> '+posttitle+'</a></h1></div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';
document.write(trtd);
}
if (i==1) {
var trtd = '<div class="top2_news"><div class="top2_news_image"><img src="'+img[i]+'"></div><h2><a title="'+posttitle+'" href="'+posturl+'">'+posttitle+' </a></h2><div class="dot3x1"></div>';
document.write(trtd);
}
if (i==2) {
var trtd = '<div class="top2_news_image"><img src="'+img[i]+'"></div><h2><a title="'+posttitle+'" href="'+posturl+'"> '+posttitle+'</a></h2></div>';
document.write(trtd);
}
if (i==3) {
var trtd = '<div class="topo_news"><div class="topo_news_title"> '+topoTitle+'</div><ul id="list_others_news"><li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
}
if ((i>3)&&(i<numposts-1)) {
var trtd = '<li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
}
if (i==numposts-1) {
var trtd = '<li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li></ul></div>';
document.write(trtd);
}
j++;
}
document.write('</div></div></div>');
}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<!--End https://www.dropbox.com/s/dlmso6swu0ydt67/z-recent-post.js-->
<!-- End Thủ thuật Blogspot tạo Recent Post Magazine cho blogspot mẫu 2 -->
Nếu muốn giống mẫu này :
Thay thế đoạn code nằm giữa
<!--https://www.dropbox.com/s/dlmso6swu0ydt67/z-recent-post.js--> ....
<!--End https://www.dropbox.com/s/dlmso6swu0ydt67/z-recent-post.js-->
Bằng đoạn Code sau : <!--https://www.dropbox.com/s/w9qs8t38jca74v8/z-recent-label.js --><script language="JavaScript">
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
document.write('<div id="index_news" class="clearfix"><div id="main_content"><div class="top_news clearfix">');
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
//cmtext = (text != 'no') ? '<i><font color="'+cmcolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
//var daystr = (showPostDate) ? '<i><font color="'+cmcolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
if (i==0) {
var trtd = '<div class="top1_news"><div class="top1_news_image"><a href="'+posturl+'"><img src="'+img[i]+'"></a></div><div class="top1_news_title"><h1><img src="'+imgnew+'"><a href="'+posturl+'"> '+posttitle+'</a></h1></div><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';
document.write(trtd);
}
if (i==1) {
var trtd = '<div class="top2_news"><div class="top2_news_image"><img src="'+img[i]+'"></div><h2><a title="'+posttitle+'" href="'+posturl+'">'+posttitle+' </a></h2><div class="dot3x1"></div>';
document.write(trtd);
}
if (i==2) {
var trtd = '<div class="top2_news_image"><img src="'+img[i]+'"></div><h2><a title="'+posttitle+'" href="'+posturl+'"> '+posttitle+'</a></h2></div>';
document.write(trtd);
}
if (i==3) {
var trtd = '<div class="topo_news"><div class="topo_news_title"> '+topoTitle+'</div><ul id="list_others_news"><li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
}
if ((i>3)&&(i<numposts-1)) {
var trtd = '<li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li>';
document.write(trtd);
}
if (i==numposts-1) {
var trtd = '<li><a title="'+removeHtmlTag(postcontent,summaryPost)+'..." target="_self" href="'+posturl+'">'+posttitle+'</a></li></ul></div>';
document.write(trtd);
}
j++;
}
document.write('</div></div></div>');
}
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<!--End https://www.dropbox.com/s/w9qs8t38jca74v8/z-recent-label.js -->
2. Thủ thuật Blogspot tạo Recent Post Magazine cho blogspot mẫu 2 :
Nguồn : https://www.landgonow.com/2011/07/tien-ich-magazine-recent-posts-cho.html
<style type="text/css">
#cotent-news {
border:#999 solid 1px;
width: 650px; }
#top-news {
width: 440px;
height:166px; padding:5px;
border:#bbb solid 1px;
background:#eee;
font-size:12px;
}
#bottom-news {
width: 444px; padding:5px;
}
#bottom-news-item {
width: 106px;
margin-right:5px;
float:left;
}
#left-news {
width: 200 px;
padding:5px;
border-left:2px dotted #ccc;
}
</style>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://2.bp.blogspot.com/-5ShnwAhC-eM/TyyZeHwfpPI/AAAAAAAAAcs/cRaiet9Jhj4/s1600/nothumbnail-bai-viet-kgong-anh-namkna-ngoctra.gif";
imgico= "http://4.bp.blogspot.com/-GsC8zLoeoSg/TyyZ677yMVI/AAAAAAAAAc4/SSeCIhN4jl4/s1600/icom-left-news-namkna-ngoctra.gif";
showRandomImg = true;
topwidth = 160;
topheight = 160;
botheight = 100;
botwidth = 100;
fntsize = 12;
vnesize = 18; //kích thước của tiêu đề bài viết trong class "top-news"
acolor = "#555";
cmcolor = "#555";
topcolor = "#f00";
aBold = true;
text = "comments";
showPostDate = true;
summaryPost = 250;
summaryFontsize = 12;
summaryColor = "#000";
botnum = 4;
numposts = 10;
label = "Gia Bảo Blog"; home_page = "https://www.digitalnomad.vn/";
</script>
<!-- Đoạn script Số 1-->
<script language="JavaScript">
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
img = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
var posttitle = entry.title.$t;
var pcm;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
if ("content" in entry) {
var postcontent = entry.content.$t;}
else
if ("summary" in entry) {
var postcontent = entry.summary.$t;}
else var postcontent = "";
postdate = entry.published.$t;
if(j>imgr.length-1) j=0;
img[i] = imgr[j];
s = postcontent ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) img[i] = d;
cmtext = (text != 'no') ? '<i><font color="'+cmcolor+'">('+pcm+' '+text+')</font></i>' : '';
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
var daystr = (showPostDate) ? '<i><font color="'+cmcolor+'"> - ('+day+ ' ' + m + ' ' + y + ')</font></i>' : "";
posttitle = (aBold) ? "<b>"+posttitle+"</b>" : posttitle;
if (i==0) {
var trtd = '<div id="cotent-news"><table><tr><td><div id="top-news"><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px; margin-right:10px;" width="'+topwidth+'" height="'+topheight+'"/><div style="color:'+topcolor+'; font-size:'+vnesize+'px;">'+posttitle+'</div>'+cmtext+ ' ' + daystr + '<br/>'+removeHtmlTag(postcontent,summaryPost)+'...<br/><a style="float:right;" href="'+posturl+'">Readmore...</a> </div>';
document.write(trtd);
}
if (i==1) {
var trtd = '<div id="bottom-news"><div id="bottom-news-item"><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px;" width="'+botwidth+'" height="'+botheight+'"/><div><a style="color:'+acolor+'; font-size:'+fntsize+'px;" href="'+posturl+'">'+posttitle+'</a></div></div>';
document.write(trtd);
}
if ((i>1)&&(i<botnum)) {
var trtd = '<div id="bottom-news-item"><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px;" width="'+botwidth+'" height="'+botheight+'"/><div><a style="color:'+acolor+'; font-size:'+fntsize+'px;" href="'+posturl+'">'+posttitle+'</a></div></div>';
document.write(trtd);
}
if (i==botnum) {
var trtd = '<div id="bottom-news-item"><img src="'+img[i]+'" style="float:left; border: #ccc 1px solid; padding:2px;" width="'+botwidth+'" height="'+botheight+'"/><div><a style="color:'+acolor+'; font-size:'+fntsize+'px;" href="'+posturl+'">'+posttitle+'</a></div></div></div></td>';
document.write(trtd);
}
if (i==botnum+1) {
var trtd = '<td><div id="left-news"><img src="'+imgico+'"/><a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br/>';
document.write(trtd);
}
if ((i>botnum+1)&&(i<numposts-1)) {
var trtd = '<img src="'+imgico+'"/><a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a><br/>';
document.write(trtd);
}
if (i==numposts-1) {
var trtd = '<img src="'+imgico+'"/><a href="'+posturl+'" style="color:'+acolor+'; font-size:'+fntsize+'px;">'+posttitle+'</a></div></td></tr></table></div>';
document.write(trtd);
}
j++;
}
}
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<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://lh3.googleusercontent.com/_PAuO_he0N0k/TbzBhkqMYFI/AAAAAAAAII8/foXvO5UIqg4/itechplus-rc-3cot.gif) no-repeat top left;
padding:5px 0 14px 15px;
font:bold 13px Verdana;
margin:0px;
color:#fff;
}
</style>
<script type="text/javascript">
home_page = "https://www.digitalnomad.vn/";
label = "Gia Bảo Blog";
numposts = 9;
sumTitle = 24;
colortitle = "#333";
imgr = new Array();
imgr[0] = "https://lh6.googleusercontent.com/_PAuO_he0N0k/TZRW-L29nGI/AAAAAAAAFuM/14HvFKPlaKo/noimage.jpg";
showRandomImg = true;
</script>
<div id="itechplus-rc-3cot">
<h2>Recent Posts 3 column</h2>
<!--
<script src="https://sites.google.com/site/itechroot/javascripts/itechplus-rc-3cot.txt" type="text/javascript"></script>
-->
<script type="text/javascript">
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('15 O(a,b){8(a.w("<")!=-1){4 s=a.12("<");z(4 i=0;i<s.9;i++){8(s[i].w(">")!=-1){s[i]=s[i].10(s[i].w(">")+1,s[i].9)}}a=s.17("")}b=(b<a.9-1)?b:a.9-2;1c(a.1k(b-1)!=\' \'&&a.w(\' \',b)!=-1)b++;a=a.10(0,b-1);1m a}15 Z(e){j=(1j)?Y.1l((L.9+1)*Y.16()):0;q=U T();4 f=U T();z(4 i=0;i<K;i++){4 g=e.S.R[i];4 h=g.A.$t;4 l;4 n;8(i==e.S.R.9)F;z(4 k=0;k<g.x.9;k++){8(g.x[k].Q==\'18\'){n=g.x[k].H;F}}z(4 k=0;k<g.x.9;k++){8(g.x[k].Q==\'1a\'&&g.x[k].1x==\'1d/1e\'){l=g.x[k].A.12(" ")[0];F}}8("W"J g){4 o=g.W.$t}D 8("N"J g){4 o=g.N.$t}D 4 o="";s=o;a=s.w("<q");b=s.w("E=\\"",a);c=s.w("\\"",b+5);d=s.1b(b+5,c-b-5);8(j>L.9-1)j=0;q[i]=L[j];8((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))q[i]=d;4 p=h.9;8(p>P){f[i]=\'<B v="u-r"><C><q G="\'+h+\'" E="\'+q[i]+\'"/><p><a A="\'+h+\'" H="\'+n+\'" V="M:\'+X+\';">\'+O(h,P)+\' ...</a></p><C></B>\'}D{f[i]=\'<B v="u-r"><C><q G="\'+h+\'" E="\'+q[i]+\'"/><p><a A="\'+h+\'" H="\'+n+\'" V="M:\'+X+\';">\'+h+\'</a></p></C></B>\'}}4 m=K/3;6.7("<11 1f=\\"0\\" 1g=\\"0\\" 1h=\\"0\\" v=\\"1i-u-r\\">");z(4 j=0;j<m;j++){8(j%3==0){6.7("<y v=\\"u-r-13\\">");6.7(f[j*3]);6.7(f[j*3+1]);6.7(f[j*3+2]);6.7("<y v=\\"u-r-13\\">");6.7("</y>")}D{6.7("<y v=\\"u-r-14\\">");6.7(f[j*3]);6.7(f[j*3+1]);6.7(f[j*3+2]);6.7("<y v=\\"u-r-14\\">");6.7("</y>")}}6.7("</11>")}6.7("<I E=\\""+1n+"1o/1p/1q/-/"+1r+"?1s-1t="+K+"&1u=1v&G=1w-J-I&19=Z\\"><\\/I>");',62,96,'||||var||document|write|if|length|||||||||||||||||img|3cot|||rc|id|indexOf|link|tr|for|title|td|center|else|src|break|alt|href|script|in|numposts|imgr|color|summary|removeHtmlTag|sumTitle|rel|entry|feed|Array|new|style|content|colortitle|Math|showrecentposts99|substring|table|split|top|bottom|function|random|join|alternate|callback|replies|substr|while|text|html|border|cellspacing|cellpadding|itechplus|showRandomImg|charAt|floor|return|home_page|feeds|posts|default|label|max|results|orderby|published|json|type'.split('|'),0,{}))
</script>
<!--
<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="https://www.digitalnomad.vn/"> Phần mềm bản quyền »</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://lh3.googleusercontent.com/_PAuO_he0N0k/TbzBhkqMYFI/AAAAAAAAII8/foXvO5UIqg4/itechplus-rc-3cot.gif) no-repeat top left;
padding:5px 0 14px 15px;
font:bold 13px Verdana;
margin:0px;
color:#fff;
}
</style>
<script type="text/javascript">
home_page = "https://www.digitalnomad.vn/";
label = "Gia Bảo Blog";
numposts = 9;
sumTitle = 24;
colortitle = "#333";
imgr = new Array();
imgr[0] = "https://lh6.googleusercontent.com/_PAuO_he0N0k/TZRW-L29nGI/AAAAAAAAFuM/14HvFKPlaKo/noimage.jpg";
showRandomImg = true;
</script>
<div id="itechplus-rc-3cot">
<h2>Recent Posts 3 column</h2>
<!--
<script src="https://sites.google.com/site/itechroot/javascripts/itechplus-rc-3cot.txt" type="text/javascript"></script>
-->
<script type="text/javascript">
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('15 O(a,b){8(a.w("<")!=-1){4 s=a.12("<");z(4 i=0;i<s.9;i++){8(s[i].w(">")!=-1){s[i]=s[i].10(s[i].w(">")+1,s[i].9)}}a=s.17("")}b=(b<a.9-1)?b:a.9-2;1c(a.1k(b-1)!=\' \'&&a.w(\' \',b)!=-1)b++;a=a.10(0,b-1);1m a}15 Z(e){j=(1j)?Y.1l((L.9+1)*Y.16()):0;q=U T();4 f=U T();z(4 i=0;i<K;i++){4 g=e.S.R[i];4 h=g.A.$t;4 l;4 n;8(i==e.S.R.9)F;z(4 k=0;k<g.x.9;k++){8(g.x[k].Q==\'18\'){n=g.x[k].H;F}}z(4 k=0;k<g.x.9;k++){8(g.x[k].Q==\'1a\'&&g.x[k].1x==\'1d/1e\'){l=g.x[k].A.12(" ")[0];F}}8("W"J g){4 o=g.W.$t}D 8("N"J g){4 o=g.N.$t}D 4 o="";s=o;a=s.w("<q");b=s.w("E=\\"",a);c=s.w("\\"",b+5);d=s.1b(b+5,c-b-5);8(j>L.9-1)j=0;q[i]=L[j];8((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))q[i]=d;4 p=h.9;8(p>P){f[i]=\'<B v="u-r"><C><q G="\'+h+\'" E="\'+q[i]+\'"/><p><a A="\'+h+\'" H="\'+n+\'" V="M:\'+X+\';">\'+O(h,P)+\' ...</a></p><C></B>\'}D{f[i]=\'<B v="u-r"><C><q G="\'+h+\'" E="\'+q[i]+\'"/><p><a A="\'+h+\'" H="\'+n+\'" V="M:\'+X+\';">\'+h+\'</a></p></C></B>\'}}4 m=K/3;6.7("<11 1f=\\"0\\" 1g=\\"0\\" 1h=\\"0\\" v=\\"1i-u-r\\">");z(4 j=0;j<m;j++){8(j%3==0){6.7("<y v=\\"u-r-13\\">");6.7(f[j*3]);6.7(f[j*3+1]);6.7(f[j*3+2]);6.7("<y v=\\"u-r-13\\">");6.7("</y>")}D{6.7("<y v=\\"u-r-14\\">");6.7(f[j*3]);6.7(f[j*3+1]);6.7(f[j*3+2]);6.7("<y v=\\"u-r-14\\">");6.7("</y>")}}6.7("</11>")}6.7("<I E=\\""+1n+"1o/1p/1q/-/"+1r+"?1s-1t="+K+"&1u=1v&G=1w-J-I&19=Z\\"><\\/I>");',62,96,'||||var||document|write|if|length|||||||||||||||||img|3cot|||rc|id|indexOf|link|tr|for|title|td|center|else|src|break|alt|href|script|in|numposts|imgr|color|summary|removeHtmlTag|sumTitle|rel|entry|feed|Array|new|style|content|colortitle|Math|showrecentposts99|substring|table|split|top|bottom|function|random|join|alternate|callback|replies|substr|while|text|html|border|cellspacing|cellpadding|itechplus|showRandomImg|charAt|floor|return|home_page|feeds|posts|default|label|max|results|orderby|published|json|type'.split('|'),0,{}))
</script>
<!--
<p style="float:right;margin:0;padding:3px">Xem tất cả<a href="https://www.digitalnomad.vn/"> Phần mềm bản quyền »</a></p>
-->
</div>
<!-- Recent Post 3 column style 1-->
Recent Post 3 column đơn giản style 2 :
<!-- Recent Post 3 column style 2-->
<style type="text/css">
#itechplus-rc-3cot {width:516px;}
table#itechplus-rc-3cot {border:1px solid #ccc;}
#rc-3cot {padding:0 8px;width:30%;}
#rc-3cot p{padding:0;margin:0 0 5px 0;}
#rc-3cot img {margin:10px 9px 5px -15px; height:120px; width:165px; border:1px solid #ccc; padding:1px;}
#rc-3cot a:link {font:bold 12px arial;}
#itechplus-rc-3cot h2 {
background:url(#) no-repeat top left;
padding:5px 0 14px 15px;
font:bold 13px Verdana;
margin:0px;
color:#fff;
}
</style>
<script type="text/javascript">
home_page = "https://www.digitalnomad.vn/";
label = "Kiếm Tiền";
numposts = 6;
sumTitle = 18;
colortitle = "#333";
imgr = new Array();
imgr[0] = "https://lh4.googleusercontent.com/-pmYnlGErk4I/UM1U-f81LTI/AAAAAAAACu4/8lTz9QwAFt8/s300/no_image.jpg";
showRandomImg = true;
</script>
<div id="itechplus-rc-3cot">
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('15 O(a,b){8(a.w("<")!=-1){4 s=a.12("<");z(4 i=0;i<s.9;i++){8(s[i].w(">")!=-1){s[i]=s[i].10(s[i].w(">")+1,s[i].9)}}a=s.17("")}b=(b<a.9-1)?b:a.9-2;1c(a.1k(b-1)!=\' \'&&a.w(\' \',b)!=-1)b++;a=a.10(0,b-1);1m a}15 Z(e){j=(1j)?Y.1l((L.9+1)*Y.16()):0;q=U T();4 f=U T();z(4 i=0;i<K;i++){4 g=e.S.R[i];4 h=g.A.$t;4 l;4 n;8(i==e.S.R.9)F;z(4 k=0;k<g.x.9;k++){8(g.x[k].Q==\'18\'){n=g.x[k].H;F}}z(4 k=0;k<g.x.9;k++){8(g.x[k].Q==\'1a\'&&g.x[k].1x==\'1d/1e\'){l=g.x[k].A.12(" ")[0];F}}8("W"J g){4 o=g.W.$t}D 8("N"J g){4 o=g.N.$t}D 4 o="";s=o;a=s.w("<q");b=s.w("E=\\"",a);c=s.w("\\"",b+5);d=s.1b(b+5,c-b-5);8(j>L.9-1)j=0;q[i]=L[j];8((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))q[i]=d;4 p=h.9;8(p>P){f[i]=\'<B v="u-r"><C><q G="\'+h+\'" E="\'+q[i]+\'"/><p><a A="\'+h+\'" H="\'+n+\'" V="M:\'+X+\';">\'+O(h,P)+\' ...</a></p><C></B>\'}D{f[i]=\'<B v="u-r"><C><q G="\'+h+\'" E="\'+q[i]+\'"/><p><a A="\'+h+\'" H="\'+n+\'" V="M:\'+X+\';">\'+h+\'</a></p></C></B>\'}}4 m=K/3;6.7("<11 1f=\\"0\\" 1g=\\"0\\" 1h=\\"0\\" v=\\"1i-u-r\\">");z(4 j=0;j<m;j++){8(j%3==0){6.7("<y v=\\"u-r-13\\">");6.7(f[j*3]);6.7(f[j*3+1]);6.7(f[j*3+2]);6.7("<y v=\\"u-r-13\\">");6.7("</y>")}D{6.7("<y v=\\"u-r-14\\">");6.7(f[j*3]);6.7(f[j*3+1]);6.7(f[j*3+2]);6.7("<y v=\\"u-r-14\\">");6.7("</y>")}}6.7("</11>")}6.7("<I E=\\""+1n+"1o/1p/1q/-/"+1r+"?1s-1t="+K+"&1u=1v&G=1w-J-I&19=Z\\"><\\/I>");',62,96,'||||var||document|write|if|length|||||||||||||||||img|3cot|||rc|id|indexOf|link|tr|for|title|td|center|else|src|break|alt|href|script|in|numposts|imgr|color|summary|removeHtmlTag|sumTitle|rel|entry|feed|Array|new|style|content|colortitle|Math|showrecentposts99|substring|table|split|top|bottom|function|random|join|alternate|callback|replies|substr|while|text|html|border|cellspacing|cellpadding|itechplus|showRandomImg|charAt|floor|return|home_page|feeds|posts|default|label|max|results|orderby|published|json|type'.split('|'),0,{}))
//]]>
</script>
<p style="float: right; margin: 0px; padding: 3px;"><a href="http://www.hacbayit.com/search/label/Template%20Blogspot?&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://lh4.googleusercontent.com/-pmYnlGErk4I/UM1U-f81LTI/AAAAAAAACu4/8lTz9QwAFt8/s300/no_image.jpg";
showRandomImg = true;
</script>
<div id="itechplus-rc-3cot">
<script type="text/javascript">
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('15 O(a,b){8(a.w("<")!=-1){4 s=a.12("<");z(4 i=0;i<s.9;i++){8(s[i].w(">")!=-1){s[i]=s[i].10(s[i].w(">")+1,s[i].9)}}a=s.17("")}b=(b<a.9-1)?b:a.9-2;1c(a.1k(b-1)!=\' \'&&a.w(\' \',b)!=-1)b++;a=a.10(0,b-1);1m a}15 Z(e){j=(1j)?Y.1l((L.9+1)*Y.16()):0;q=U T();4 f=U T();z(4 i=0;i<K;i++){4 g=e.S.R[i];4 h=g.A.$t;4 l;4 n;8(i==e.S.R.9)F;z(4 k=0;k<g.x.9;k++){8(g.x[k].Q==\'18\'){n=g.x[k].H;F}}z(4 k=0;k<g.x.9;k++){8(g.x[k].Q==\'1a\'&&g.x[k].1x==\'1d/1e\'){l=g.x[k].A.12(" ")[0];F}}8("W"J g){4 o=g.W.$t}D 8("N"J g){4 o=g.N.$t}D 4 o="";s=o;a=s.w("<q");b=s.w("E=\\"",a);c=s.w("\\"",b+5);d=s.1b(b+5,c-b-5);8(j>L.9-1)j=0;q[i]=L[j];8((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!=""))q[i]=d;4 p=h.9;8(p>P){f[i]=\'<B v="u-r"><C><q G="\'+h+\'" E="\'+q[i]+\'"/><p><a A="\'+h+\'" H="\'+n+\'" V="M:\'+X+\';">\'+O(h,P)+\' ...</a></p><C></B>\'}D{f[i]=\'<B v="u-r"><C><q G="\'+h+\'" E="\'+q[i]+\'"/><p><a A="\'+h+\'" H="\'+n+\'" V="M:\'+X+\';">\'+h+\'</a></p></C></B>\'}}4 m=K/3;6.7("<11 1f=\\"0\\" 1g=\\"0\\" 1h=\\"0\\" v=\\"1i-u-r\\">");z(4 j=0;j<m;j++){8(j%3==0){6.7("<y v=\\"u-r-13\\">");6.7(f[j*3]);6.7(f[j*3+1]);6.7(f[j*3+2]);6.7("<y v=\\"u-r-13\\">");6.7("</y>")}D{6.7("<y v=\\"u-r-14\\">");6.7(f[j*3]);6.7(f[j*3+1]);6.7(f[j*3+2]);6.7("<y v=\\"u-r-14\\">");6.7("</y>")}}6.7("</11>")}6.7("<I E=\\""+1n+"1o/1p/1q/-/"+1r+"?1s-1t="+K+"&1u=1v&G=1w-J-I&19=Z\\"><\\/I>");',62,96,'||||var||document|write|if|length|||||||||||||||||img|3cot|||rc|id|indexOf|link|tr|for|title|td|center|else|src|break|alt|href|script|in|numposts|imgr|color|summary|removeHtmlTag|sumTitle|rel|entry|feed|Array|new|style|content|colortitle|Math|showrecentposts99|substring|table|split|top|bottom|function|random|join|alternate|callback|replies|substr|while|text|html|border|cellspacing|cellpadding|itechplus|showRandomImg|charAt|floor|return|home_page|feeds|posts|default|label|max|results|orderby|published|json|type'.split('|'),0,{}))
//]]>
</script>
<p style="float: right; margin: 0px; padding: 3px;"><a href="http://www.hacbayit.com/search/label/Template%20Blogspot?&max-results=10"></a></p>
</div>
<!-- Recent Post 3 column style 2-->
Recent Post 2 column đơn giản style 1 :
<!-- Recent Post 2 column style 2-->
<style type='text/css'>
/*Tooltip*/
#osdhtmltooltip{
border: #999 1px solid;
padding: 4px;
font-size: 10pt;
z-index: 100;
left: -300px;
visibility: hidden;
width: 240px;
font-family: Arial;
position: absolute;
background-color: #fcfee4;
text-align: left;
}
#osdhtmltooltip img{
float: left;
padding: 3px;
border: solid 1px #FFF;
margin: 2px;
}
#osdhtmltooltip h3{
color: #000;
padding: 2px;
margin: 0px;
font-weight: bold;
text-transform: none;
text-decoration: none;
}
#osdhtmltooltip span{
color: #999;
font-style: italic;
}
#osdhtmltooltip div{
color: #000;
}
#osdhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;
}
#rc-posts-2-col {
width:210px;
}
#rc-posts-2-col h3 {
background:url(https://lh5.googleusercontent.com/-SX38Jpw5tnU/UxVwp04Ds-I/AAAAAAAALec/rrzOhghDCP4/s1600/mmoforfun-blogspot-com.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:12px;
margin:0px;
color:#fff;
}
table#rc-2cot {border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-left:1px solid #ccc;}
#rc-tr1 {background:#f3f3f3;}
#rc-tr0 {background:#fff;}
#rc-td {padding:2px; color:#ff0000; border-right:1px solid #ccc;width:160px;}
#rc-td img {float: left;width: 40px;height: 40px;border: 1px solid #ccc;margin:5px;padding: 1px;}
#rc-td a {color:#ff0000;text-decoration:none;}
#rc-td a:hover {text-decoration:underline;}
</style>
Bước 5 : Vào Phần Tử trang - Chọn Thêm Tiện ích - Thêm một HTML/Javarscip và dán đoạn code bên dưới vào:
<script type="text/javascript">
var tooltipID='osdhtmltooltip';
var imgtipID='osdhtmlpointer';
document.write('<div id="'+tooltipID+'" style="VISIBILITY: hidden;"></div>');
document.write('<img id="'+imgtipID+'" style="VISIBILITY: hidden;" src="http://data.fandung.com/img/oTooltiparrow.gif">');
var offsetfromcursorX=12;
var offsetfromcursorY=10;
var offsetdivfrompointerX=10;
var offsetdivfrompointerY=14;
var ie=document.all;
var ns6=document.getElementById&&!document.all;
var enabletip=false;if(ie||ns6)
var tipobj=document.getElementById(tooltipID);
var pointerobj=document.getElementById(imgtipID);
function ietruebody(){return(document.compatMode&&document.compatMode!="BackCompat")?document.documentElement:document.body;}
function showtip(thetext,thewidth,thecolor){try{if(!tipobj.style)
return;if(ns6||ie){if(thewidth)
tipobj.style.width=thewidth+"px";if(thecolor&&thecolor!="")
tipobj.style.backgroundColor=thecolor;tipobj.innerHTML=thetext;enabletip=true;return false;}}
catch(e)
{}}
function positiontip(e){if(!tipobj.style)
return;if(enabletip&&pointerobj){
var nondefaultpos=false;
var curX=(ns6)?e.pageX:event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY:event.clientY+ietruebody().scrollTop;
var winwidth=ie&&!window.opera?ietruebody().clientWidth:window.innerWidth-20;
var winheight=ie&&!window.opera?ietruebody().clientHeight:window.innerHeight-20;
var rightedge=ie&&!window.opera?winwidth-event.clientX-offsetfromcursorX:winwidth-e.clientX-offsetfromcursorX;
var bottomedge=ie&&!window.opera?winheight-event.clientY-offsetfromcursorY:winheight-e.clientY-offsetfromcursorY;
var leftedge=(offsetfromcursorX<0)?offsetfromcursorX*(-1):-1000;
if(rightedge<tipobj.offsetWidth){tipobj.style.left=curX-tipobj.offsetWidth+"px";nondefaultpos=true;}
else if(curX<leftedge)
tipobj.style.left="5px";
else{tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px";pointerobj.style.left=curX+offsetfromcursorX+"px";}
if(bottomedge<tipobj.offsetHeight){tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px";nondefaultpos=true;}
else{tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px";pointerobj.style.top=curY+offsetfromcursorY+"px";}
tipobj.style.visibility="visible";if(!nondefaultpos)
pointerobj.style.visibility="visible";else
pointerobj.style.visibility="hidden";}}
function hidetip(){if(!tipobj.style)
return;if(ns6||ie){enabletip=false;tipobj.style.visibility="hidden";pointerobj.style.visibility="hidden";tipobj.style.left="-1000px";tipobj.style.backgroundColor='';tipobj.style.width='';}}
document.onmousemove=positiontip;
</script>
<script type="text/javascript">
numposts = 4; //số bài viết hiển thị trong tiện ích
postcount = 400; //số kí tự của đọan nội dung tóm tắt bài viết
sumTitle = 40; // số kí tự của tiêu đề bài viết
colortitle = "#555";
tcolortitle = "#ff6c00"; // màu của tiêu đề bài viết ở phần mô tả
cmcolor = "#6b1f01"; // màu của phần thông tin bài viết (gồm : ngày đăng và số nhận xét)
nocmtext = "No Comment";
cmtext = "Comments";
posttext = "Posted in";
label = "Kiếm Tiền"; //Tên nhãn
home_page = "https://www.digitalnomad.vn/";// Link blog của bạn
</script>
<div id="rc-posts-2-col"><h3>Recent Post 2 Cột</h3><div id="rc-posts-loading"><img align='absmiddle' src='http://1.bp.blogspot.com/-PDG6t2PnV94/UQPNQUyEBKI/AAAAAAAAKHM/6j7xQg6yw3I/s1600/loading.gif'/></div>
<script type="text/javascript">
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
img = new Array();
var td = new Array();
var sumPost = new Array();
var posttitle = new Array();
var postcontent = new Array();
var comment = new Array();
var postDay = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
posttitle[i] = entry.title.$t;
var pcm ;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
var postdate = entry.published.$t;
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
postDay[i] = day+ "-" + m + "-" + y ;
if ("content" in entry) {
postcontent[i] = entry.content.$t;}
else
if ("summary" in entry) {
postcontent[i] = entry.summary.$t;}
else postcontent[i] = "";
s = postcontent[i] ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {img[i] = d;} else {img[i]="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";}
if (pcm==0) {comment[i] = " (" +nocmtext+ ") ";}
else {comment[i] = " (" + pcm + " " +cmtext+ ") ";}
postcontent[i] = postcontent[i].replace(/"/g, "“");
posttitle[i] = posttitle[i].replace(/"/g, "“");
sumPost[i] ="sumPost"+i;
var tilen= posttitle[i].length;
if (tilen > sumTitle) {
td[i]= '<td id="rc-td"><img src="'+img[i]+'"/><a onmouseover="showtip('+sumPost[i]+');" onmouseout="hidetip();" href="'+posturl+'" style="color:'+colortitle+';">'+removeHtmlTag(posttitle[i],sumTitle)+' ...</a></td>';
}
else {
td[i]= '<td id="rc-td"><img src="'+img[i]+'"/><a onmouseover="showtip('+sumPost[i]+');" onmouseout="hidetip();" href="'+posturl+'" style="color:'+colortitle+';">'+posttitle[i]+'</a></td>';
}
}
var m = numposts / 2;
document.write("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" id=\"rc-2cot\">");
for (var j=0; j<m; j++) {
if (j%2==0) {
document.write("<tr id=\"rc-tr0\">");
document.write(td[j*2]);
document.write(td[j*2+1]);
document.write("<tr id=\"rc-tr0\">");
document.write("</tr>");
}
else {
document.write("<tr id=\"rc-tr1\">");
document.write(td[j*2]);
document.write(td[j*2+1]);
document.write("<tr id=\"rc-tr1\">");
document.write("</tr>");
}
}
document.write("</table>");
document.getElementById("rc-posts-loading").style.display = "none";
for (var p = 0; p < numposts; p++) {
document.write("<script type=\"text/javascript\">var "+sumPost[p]+" =\"<b style='color:"+tcolortitle+"'>"+posttitle[p]+"<\/b> <br\/> <i style='color:"+cmcolor+"'>"+posttext+" : "+postDay[p]+" - "+comment[p]+" <\/i><br\/>"+removeHtmlTag(postcontent[p],postcount)+" ...\";<\/script>");
}
}
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<!-- Recent Post 2 column style 2-->
<style type='text/css'>
/*Tooltip*/
#osdhtmltooltip{
border: #999 1px solid;
padding: 4px;
font-size: 10pt;
z-index: 100;
left: -300px;
visibility: hidden;
width: 240px;
font-family: Arial;
position: absolute;
background-color: #fcfee4;
text-align: left;
}
#osdhtmltooltip img{
float: left;
padding: 3px;
border: solid 1px #FFF;
margin: 2px;
}
#osdhtmltooltip h3{
color: #000;
padding: 2px;
margin: 0px;
font-weight: bold;
text-transform: none;
text-decoration: none;
}
#osdhtmltooltip span{
color: #999;
font-style: italic;
}
#osdhtmltooltip div{
color: #000;
}
#osdhtmlpointer{
z-index: 101;
left: -300px;
visibility: hidden;
position: absolute;
}
#rc-posts-2-col {
width:210px;
}
#rc-posts-2-col h3 {
background:url(https://lh5.googleusercontent.com/-SX38Jpw5tnU/UxVwp04Ds-I/AAAAAAAALec/rrzOhghDCP4/s1600/mmoforfun-blogspot-com.png) no-repeat top left;
padding:3px 5px 14px 5px;
font-size:12px;
margin:0px;
color:#fff;
}
table#rc-2cot {border-top:1px solid #ccc;border-bottom:1px solid #ccc; border-left:1px solid #ccc;}
#rc-tr1 {background:#f3f3f3;}
#rc-tr0 {background:#fff;}
#rc-td {padding:2px; color:#ff0000; border-right:1px solid #ccc;width:160px;}
#rc-td img {float: left;width: 40px;height: 40px;border: 1px solid #ccc;margin:5px;padding: 1px;}
#rc-td a {color:#ff0000;text-decoration:none;}
#rc-td a:hover {text-decoration:underline;}
</style>
Bước 5 : Vào Phần Tử trang - Chọn Thêm Tiện ích - Thêm một HTML/Javarscip và dán đoạn code bên dưới vào:
<script type="text/javascript">
var tooltipID='osdhtmltooltip';
var imgtipID='osdhtmlpointer';
document.write('<div id="'+tooltipID+'" style="VISIBILITY: hidden;"></div>');
document.write('<img id="'+imgtipID+'" style="VISIBILITY: hidden;" src="http://data.fandung.com/img/oTooltiparrow.gif">');
var offsetfromcursorX=12;
var offsetfromcursorY=10;
var offsetdivfrompointerX=10;
var offsetdivfrompointerY=14;
var ie=document.all;
var ns6=document.getElementById&&!document.all;
var enabletip=false;if(ie||ns6)
var tipobj=document.getElementById(tooltipID);
var pointerobj=document.getElementById(imgtipID);
function ietruebody(){return(document.compatMode&&document.compatMode!="BackCompat")?document.documentElement:document.body;}
function showtip(thetext,thewidth,thecolor){try{if(!tipobj.style)
return;if(ns6||ie){if(thewidth)
tipobj.style.width=thewidth+"px";if(thecolor&&thecolor!="")
tipobj.style.backgroundColor=thecolor;tipobj.innerHTML=thetext;enabletip=true;return false;}}
catch(e)
{}}
function positiontip(e){if(!tipobj.style)
return;if(enabletip&&pointerobj){
var nondefaultpos=false;
var curX=(ns6)?e.pageX:event.clientX+ietruebody().scrollLeft;
var curY=(ns6)?e.pageY:event.clientY+ietruebody().scrollTop;
var winwidth=ie&&!window.opera?ietruebody().clientWidth:window.innerWidth-20;
var winheight=ie&&!window.opera?ietruebody().clientHeight:window.innerHeight-20;
var rightedge=ie&&!window.opera?winwidth-event.clientX-offsetfromcursorX:winwidth-e.clientX-offsetfromcursorX;
var bottomedge=ie&&!window.opera?winheight-event.clientY-offsetfromcursorY:winheight-e.clientY-offsetfromcursorY;
var leftedge=(offsetfromcursorX<0)?offsetfromcursorX*(-1):-1000;
if(rightedge<tipobj.offsetWidth){tipobj.style.left=curX-tipobj.offsetWidth+"px";nondefaultpos=true;}
else if(curX<leftedge)
tipobj.style.left="5px";
else{tipobj.style.left=curX+offsetfromcursorX-offsetdivfrompointerX+"px";pointerobj.style.left=curX+offsetfromcursorX+"px";}
if(bottomedge<tipobj.offsetHeight){tipobj.style.top=curY-tipobj.offsetHeight-offsetfromcursorY+"px";nondefaultpos=true;}
else{tipobj.style.top=curY+offsetfromcursorY+offsetdivfrompointerY+"px";pointerobj.style.top=curY+offsetfromcursorY+"px";}
tipobj.style.visibility="visible";if(!nondefaultpos)
pointerobj.style.visibility="visible";else
pointerobj.style.visibility="hidden";}}
function hidetip(){if(!tipobj.style)
return;if(ns6||ie){enabletip=false;tipobj.style.visibility="hidden";pointerobj.style.visibility="hidden";tipobj.style.left="-1000px";tipobj.style.backgroundColor='';tipobj.style.width='';}}
document.onmousemove=positiontip;
</script>
<script type="text/javascript">
numposts = 4; //số bài viết hiển thị trong tiện ích
postcount = 400; //số kí tự của đọan nội dung tóm tắt bài viết
sumTitle = 40; // số kí tự của tiêu đề bài viết
colortitle = "#555";
tcolortitle = "#ff6c00"; // màu của tiêu đề bài viết ở phần mô tả
cmcolor = "#6b1f01"; // màu của phần thông tin bài viết (gồm : ngày đăng và số nhận xét)
nocmtext = "No Comment";
cmtext = "Comments";
posttext = "Posted in";
label = "Kiếm Tiền"; //Tên nhãn
home_page = "https://www.digitalnomad.vn/";// Link blog của bạn
</script>
<div id="rc-posts-2-col"><h3>Recent Post 2 Cột</h3><div id="rc-posts-loading"><img align='absmiddle' src='http://1.bp.blogspot.com/-PDG6t2PnV94/UQPNQUyEBKI/AAAAAAAAKHM/6j7xQg6yw3I/s1600/loading.gif'/></div>
<script type="text/javascript">
function removeHtmlTag(strx,chop){
var s = strx.split("<");
for(var i=0;i<s.length;i++){
if(s[i].indexOf(">")!=-1){
s[i] = s[i].substring(s[i].indexOf(">")+1,s[i].length);
}
}
s = s.join("");
s = s.substring(0,chop-1);
return s;
}
function showrecentposts(json) {
img = new Array();
var td = new Array();
var sumPost = new Array();
var posttitle = new Array();
var postcontent = new Array();
var comment = new Array();
var postDay = new Array();
for (var i = 0; i < numposts; i++) {
var entry = json.feed.entry[i];
posttitle[i] = entry.title.$t;
var pcm ;
var posturl;
if (i == json.feed.entry.length) break;
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'alternate') {
posturl = entry.link[k].href;
break;
}
}
for (var k = 0; k < entry.link.length; k++) {
if (entry.link[k].rel == 'replies' && entry.link[k].type == 'text/html') {
pcm = entry.link[k].title.split(" ")[0];
break;
}
}
var postdate = entry.published.$t;
var month = [1,2,3,4,5,6,7,8,9,10,11,12];
var month2 = ["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var day = postdate.split("-")[2].substring(0,2);
var m = postdate.split("-")[1];
var y = postdate.split("-")[0];
for(var u2=0;u2<month.length;u2++){
if(parseInt(m)==month[u2]) {
m = month2[u2] ; break;
}
}
postDay[i] = day+ "-" + m + "-" + y ;
if ("content" in entry) {
postcontent[i] = entry.content.$t;}
else
if ("summary" in entry) {
postcontent[i] = entry.summary.$t;}
else postcontent[i] = "";
s = postcontent[i] ; a = s.indexOf("<img"); b = s.indexOf("src=\"",a); c = s.indexOf("\"",b+5); d = s.substr(b+5,c-b-5);
if((a!=-1)&&(b!=-1)&&(c!=-1)&&(d!="")) {img[i] = d;} else {img[i]="http://1.bp.blogspot.com/_u4gySN2ZgqE/SosvnavWq0I/AAAAAAAAArk/yL95WlyTqr0/s400/noimage.png";}
if (pcm==0) {comment[i] = " (" +nocmtext+ ") ";}
else {comment[i] = " (" + pcm + " " +cmtext+ ") ";}
postcontent[i] = postcontent[i].replace(/"/g, "“");
posttitle[i] = posttitle[i].replace(/"/g, "“");
sumPost[i] ="sumPost"+i;
var tilen= posttitle[i].length;
if (tilen > sumTitle) {
td[i]= '<td id="rc-td"><img src="'+img[i]+'"/><a onmouseover="showtip('+sumPost[i]+');" onmouseout="hidetip();" href="'+posturl+'" style="color:'+colortitle+';">'+removeHtmlTag(posttitle[i],sumTitle)+' ...</a></td>';
}
else {
td[i]= '<td id="rc-td"><img src="'+img[i]+'"/><a onmouseover="showtip('+sumPost[i]+');" onmouseout="hidetip();" href="'+posturl+'" style="color:'+colortitle+';">'+posttitle[i]+'</a></td>';
}
}
var m = numposts / 2;
document.write("<table border=\"0\" cellspacing=\"0\" cellpadding=\"0\" id=\"rc-2cot\">");
for (var j=0; j<m; j++) {
if (j%2==0) {
document.write("<tr id=\"rc-tr0\">");
document.write(td[j*2]);
document.write(td[j*2+1]);
document.write("<tr id=\"rc-tr0\">");
document.write("</tr>");
}
else {
document.write("<tr id=\"rc-tr1\">");
document.write(td[j*2]);
document.write(td[j*2+1]);
document.write("<tr id=\"rc-tr1\">");
document.write("</tr>");
}
}
document.write("</table>");
document.getElementById("rc-posts-loading").style.display = "none";
for (var p = 0; p < numposts; p++) {
document.write("<script type=\"text/javascript\">var "+sumPost[p]+" =\"<b style='color:"+tcolortitle+"'>"+posttitle[p]+"<\/b> <br\/> <i style='color:"+cmcolor+"'>"+posttext+" : "+postDay[p]+" - "+comment[p]+" <\/i><br\/>"+removeHtmlTag(postcontent[p],postcount)+" ...\";<\/script>");
}
}
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script></div>
<!-- Recent Post 2 column style 2-->
Trang Web Tham Khảo :
- [ Mẫu code 2 code 2 column : cột 1 chứa 2 Div - cột 2 chứa 1 Div ] : https://www.sitepoint.com/community/t/can-flexbox-do-this-2-column-setup/285440
- [ Mẫu code 2 code 2 column ( 3 mẫu cực đẹp ) ] : https://stackoverflow.com/questions/23232998/create-a-quad-of-squares-inside-a-larger-square
- https://jinam2.tistory.com/m/39
- https://in.pinterest.com/amp/tutorialsbrain/css-website-related-image-and-infographics/
- https://www.cssscript.com/flexbox-based-horizontal-accordion-pure-css/
- https://stackoverflow.com/questions/20478256/html-css-fixed-positioning-causing-overlapping-divs
- https://lamvt.vn/mau-chu-va-mau-nen-trong-css/amp/
- https://www.iteramos.com/pregunta/57563/css-para-crear-una-esquina-curva-entre-dos-elementos
- https://stackoverflow.com/questions/61420203/how-do-i-create-a-card-grid-view-html-css-and-flask
- https://stackoverflow.com/questions/36060689/bring-div-to-the-front-after-3d-transition-css
- https://stackoverflow.com/questions/49970917/bootstrap-4-column-ordering-conundrum
- https://www.chegg.com/homework-help/questions-and-answers/html-would-get-right-column-look-like-green-right-column-using-css-ve-included-code--need--q30853760
- https://www.dummies.com/web-design-development/html5-and-css3/how-to-build-a-fixed-width-floating-layout-for-html5-and-css3-programm
- https://wpsites.net/web-design/style-content-columns/
- https://stackoverflow.com/questions/49970917/bootstrap-4-column-ordering-conundrum
- https://stackoverflow.com/questions/54318822/center-image-inside-one-of-two-columns-with-css
Từ khoá : Code Ads 2 Column | 2-Column Layouts with Float
