Recent Posts Đẹp Cho Blogspot

Với thủ thuật tạo tiện ích các bài viết gần đây-recent posts, các bài viết gần đây của toàn bộ trang Blog hoặc các bài viết trong cùng một nhãn được hiển thị trong một tiện ích được chia thành 2 cột riêng biệt.

Cột bên trái bao gồm 2 phần: Phần trên cùng (còn gọi là top-news) bao gồm một hình ảnh đại diện và tiêu đề kèm theo một số dòng mô tả của bài viết mới nhất mà bạn vừa mới đăng. Phần dưới (còn gọi là bottom-news) bao gồm 4 ảnh nhỏ và tiêu đề bài viết của 4 bài đăng kế tiếp (số lượng này bạn có thể tuỳ chọn).

Cột bên phải bao gồm các tiêu đề bài viết tiếp theo của Blog hoặc của một nhãn được sắp xếp từ trên xuống theo thứ tự thời gian (số lượng này bạn cũng có thể tuỳ chọn).

Mời bạn bấm vào "Xem thử" phía dưới để trải nghiệm trước thủ thuật này.
Recent Posts Đẹp Cho Blogspot


DEMO

Tạo tiện ích các bài viết gần đây-recent posts

Đầu tiên, bạn đăng nhập vào blog > Chọn thiết kế > thêm tiện ích HTML/Javacript, rồi dán code phía dưới vào:
<style type="text/css">
#social a:hover {background-color: transparent;opacity:0.7;} #social img { -moz-transition: all 0.8s ease-in-out; -webkit-transition: all 0.8s ease-in-out; -o-transition: all 0.8s ease-in-out; -ms-transition: all 0.8s ease-in-out; transition: all 0.8s ease-in-out; } #social img:hover { -moz-transform: rotate(360deg); -webkit-transform: rotate(360deg); -o-transform: rotate(360deg); -ms-transform: rotate(360deg); transform: rotate(360deg); }
#cotent-news{border:#005595 solid 2px;width:625px;border-radius:5px}
#top-news{width:405px;height:157px;padding:4px;border:#005595 solid 1px;background:transparent;font-size:14px}
#bottom-news{width:405px;padding:5px}
#bottom-news-item{width:100px;margin-righ:5px;float:left}
#left-news{padding:5px;border-left:1px solid #005595}
</style>
<div id="social">
<script language="JavaScript">imgr = new Array();imgr[0] = "https://lh3.googleusercontent.com/-2uZ0FXFNaDo/UNVPvwoa1BI/AAAAAAAAD94/Iie8t2yjkgY/s152/OK.gif";imgico= "https://lh4.googleusercontent.com/-oC_vCk1vxjY/UNI1jgW7sAI/AAAAAAAADo4/o2JruwpEftE/s12/ngoi%2520sao%2520nh%25E1%25BB%258F%2520vang.gif";showRandomImg = true;topwidth = 150;topheight = 150;botheight = 93;botwidth = 93;fntsize = 14;vnesize = 18;acolor = "#005595";cmcolor = "#005595";topcolor = "#005595";aBold = true;text = "Comments";showPostDate = true;summaryPost = 70;summaryFontsize = 14;summaryColor = "#005595";botnum = 4;numposts = 12;label = "";home_page = "http://kartriderdautocrazy01.blogspot.com/";</script>
//Javascript có thể thay thế nếu dùng cho nhãn
<script type='text/javascript'>
//<![CDATA[
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: #9400D3 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: #9400D3 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: #9400D3 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: #9400D3 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></div>
Bây giờ bạn chỉnh sửa các dòng lệnh theo ý thích của mình.
Trong đó:
* Width (đầu tiên): là chiều rộng của cả tiện ích
* Width (thứ hai): là chiều rộng của top-news
* Width (thứ ba): là chiều rộng của bottom-news
* Background: màu nền của top-news
* Imgicon: icon trước tiêu đề bài viết ở cột bên phải
* Topwidth: chiều ngang của ảnh ở top-news
* Topheight: Chiều cao của ảnh ở top-news
* Botheight: Chiều cao của ảnh ở bottom-news
* Botwidth: Chiều ngang của ảnh ở bottom-news
* cmcolor: màu của chữ
* Summary Post: số lượng từ của dòng mô tả bài viết mới nhất
* Summary Fontsize: Kích thước chữ của dòng mô tả bài viết mới nhất.
* Botnum: Số lượng ảnh và tiêu đề các bài viết ở bottom-news
* Numpost: Số lượng các bài viết hiển thị ở tiện ích (bao gồm các bài viết ở top-news, bottom-news và các bài viết ở cột bên phải)
* Label: tên nhãn (nếu sử dụng cho cả blog thì ô này bỏ trống).
* Home Page: Địa chỉ blog của bạn.
Cuối cùng bấm Lưu và trở về blog xem kết quả.

Lưu ý
Nếu bạn muốn thiện ích trên hiển thị bài mới theo nhãn thì bạn đổi đoạn javascript sau
<script type='text/javascript'>
//<![CDATA[
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>
Chúc các bạn thành công.
Publis: 

Post a Comment

🙂😬😀😂🤣😍💖
Windows + . hoặc Windows + ; để chèn emoji