Recent posts dạng báo trí cho trang chủ của blogger

Recent posts dùng cho các template báo trí hiện nay có rất nhiều mẫu khác nhau tuy nhiên style dạng Magazine mà mình đã giới thiệu trước đây được rất nhiều blogger quan tâm và thích thú vì giao diện đẹp và load khá nhanh so với các tiện ích Recent posts dành cho trang chủ của blogger cùng loại. Tuy nhiên nó có một nhược điểm khiến nó chưa được sử dụng rộng rãi đó là mỗi khung hiển thị lại gọi một lần JS như vậy nếu chèn nhiều khung thì sẽ phải gọi nhiều file JS (mặc dù nó giống nhau hoàn toàn).

Nhận thấy đây là một style Recent post rất hay với một số tùy chỉnh nâng cao được rất nhiều bạn đọc yêu thích. Và cũng theo yêu cầu của một số bạn là làm sao cho tiện ích gọn hơn, sử dụng chung một file javascipts duy nhất để tránh phải load nhiều lần gây chậm trang, nên hôm nay namkna sẽ chia sẻ đến các bạn một tùy biến nâng cao và cập nhật của style này. Về cơ bản tiện ích Recent posts này có giao diện báo trí giống như trang vnexpress.net đang sử dụng hiện nay.

Các bạn có thể xem hình ảnh minh họa của thủ thuật này bên dưới, Nó gồm nhiều hình ảnh như bên dưới gộp lại (ở đây mình chỉnh chụp một ô trong tổng số 5 ô được sử dụng).

Recent posts Magazine for homepage blogger

» Những cập nhật nâng cao mới của tiện ích Recent posts dạng báo trí ở trang chủ dành cho blogger:

Thêm ảnh thumbnail cho những bài viết không có ảnh minh họa Và tất nhiên bạn có thể tùy biến hình ảnh này theo ý của bạn thông qua thẻ imgr[0].
Sử dụng chung một file Javarscipt duy nhất chèn thẳng vào template. Tất cả các nhãn được gọi ra đều sử dụng chung file đó nên không bị chậm do tải nhiều lần JS.
Giao diện : bắt hơn so với style cũ.... (Bạn có thể thấy nó khá giống với giao diện của trang báo vnexpress.net hiện nay).
Khả năng SEO : thân thiện hơn với các SEO do chèn thêm thuộc tính Alternate cho Images
Cài đặt đơn giản hơn, dễ dàng trong tùy biến và thêm các nhãn mới.
Thêm liên kết “xem thêm” kèm hình ảnh nhỏ xinh He...he...he...

» Cách tạo Recent posts dạng báo trí giống trang vnexpress.net cho trang chủ của blogger

1- Đăng nhập vào blog
2- CHọn Mẫu (Template)
3- CHọn chỉnh sửa HTML (Edit HTML)
4- Thêm đoạn code bên dưới trước thẻ ]]></b:skin>

/*----------------------------------
 Recent post Magazine for homepage blogger
------------------------------------*/
.fl{float:left}
.fr{float:right}
.folder{width:516px; margin-bottom:8px; overflow:hidden; line-height:1.5em;font:normal 12px arial;border-left:1px solid #ddd;border-right:1px solid #ddd;border-bottom:1px solid #ddd;}
.folder-title{height:26px; border-bottom:1px solid #eee; overflow:hidden; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHLraDrpgDxYd8DIQHxZI2o_cWywm9JigYE2rSRtu3kSlTiB41GUIF9S4f78I9GbQ23dHKb5JnKXUpJmUBaak8GHqQx5GXpHWf3RLA0lmfhS39NzdmCFmSuhEM5AGnq48uFtGPDrheyPdu/h120/catalog_header_bg-namkna-blogspot-com.gif) repeat-x}
.folder-active{height:24px; padding:4px 10px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5VwhcqMPd_3_1Ri3SkBU5qfsH7mVc2jKk0wrJ5PN0D_DFtWD5aPPeCjCjQXJ4LxvXUfb5-vEpe-wV08kxXNzro_nQDJUO1baK7QgTHPW6-Gw9htb4F1dfE9n7jyLQkkoWQNtiDXnb6VoU/h120/parent_bg-namkna-blogspot-com.gif) repeat-x; font-weight:bold}
.link-folder:link, .link-folder:visited{color:#fff}
.subfolder{height:24px; padding:5px 5px 0 15px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhksLODBe3CbP5BYejzx5UkqDs1J37w52xSoNIZ_79KxTmkzwbmxILcY44J3pUksdCd565Lnia-fAvb8ivMiXogOg2bjmQ8w7023RSQOP_ObUdYrkz6J7hLD2aGU5EK_R0Buu45gW3hJ1UQ/h120/parent_child_spc-namkna-blogspot-com.gif) no-repeat}
.folder-content{width:500px; background:#fff url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7GGoBul_jXMlUxtQvhIhocXboE77Y2rJtV6OvTj8IDIzIWGouxTO9V5jj4CZfe5KiABJk1d24RSKSGwOrq0c_TQzZHBK7NnkMXJW0eqKNI7clh2Ev3gknKTTDwyJvy-pf0ta6mlTIzXp2/h120/red-box-content-namkna-blogspot-com.png) repeat-x left bottom; padding:10px 6px 2px 10px; overflow:hidden}
.folder-content p{margin:0}
.folder-content ul{list-style:none; margin:0; padding:0}
.folder-content li{padding:0 0 4px 6px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiolGLewIZGk7G7HVEj11JZlgx4R-xPv1FKW9zzEhepiQaPTEnoNQyoPmpD67Mj-sFnJKDvdTzCC0ivrYiUqpjbQOPlyieHJAfZUSy1jq1masE_Glykw-g_-qXDnjprsoJ_G-ppLnWzmeOf/h120/icon-namkna-blogspot-com.gif) no-repeat 0 8px}
.folder-topnews{width:312px; padding-right:10px}
.folder-othernews{width:168px}
.other-folder{margin:0}
.img-subject{height:85px; width:110px; border:1px solid #a5a5a5; margin-right:8px}
.img-other{width:60px; height:50px; border:1px solid #a5a5a5; margin:0 5px 4px 0}
.xemthem{float:right; display:block; margin:0; padding:5px}

5- Thêm đoạn code dưới trước thẻ </head>

<script language="javascript">
summaryPost = 247;
showRandomImg = true;
aBold = false;
thumbwidth = 100;
thumbheight = 60;
otherthumbwidth = 60;
otherthumbheight = 60;
sumPost = 147;
home_page = "http://namkna.blogspot.com/";
numposts = 6; 
</script>
<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 class="folder-topnews fl"><a href="'+posturl+'"><img width="'+thumbwidth+'" height="'+thumbheight+'" src="'+img[i]+'" alt="" class="img-subject fl"></a><p><a href="'+posturl+'" class="link-title">'+posttitle+'</a></p><p>'+removeHtmlTag(postcontent,summaryPost)+'...</p></div>';
 
 document.write(trtd);
}


if (i==1) {
var trtd = '<div class="folder-othernews fl"><div class="other-folder fl"><a class="link-othernews" href="'+posturl+'"><img width="'+otherthumbwidth+'" height="'+otherthumbheight+'" alt="" class="img-other fl" src="'+img[i]+'"></a><a class="link-othernews" href="'+posturl+'" title="'+removeHtmlTag(postcontent,sumPost)+'...">'+posttitle+'</a></div>';
 
 document.write(trtd);
}


if (i==2) {
var trtd = '<div class="fl"><ul><li><a class="link-othernews" href="'+posturl+'" title="'+removeHtmlTag(postcontent,sumPost)+'...">'+posttitle+'</a></li>';
 
 document.write(trtd);

}


if ((i>2)&&(i<numposts-1)) {
 var trtd = '<li><a class="link-othernews" href="'+posturl+'" title="'+removeHtmlTag(postcontent,sumPost)+'...">'+posttitle+'</a></li>';
 
 document.write(trtd);
}

if (i==numposts-1) {
 var trtd = '<li><a class="link-othernews" href="'+posturl+'" title="'+removeHtmlTag(postcontent,sumPost)+'...">'+posttitle+'</a></li></ul></div></div>';
 
 document.write(trtd);
}
 j++;
}

}

//]]>
</script>

» Tùy chỉnh code:

summaryPost = 247; Là phần mô tả của bài viết bên trái. Đây là số lượng ký tự mô tả được phép hiện thị.
showRandomImg = true; Cho phép lấy ngẫu nhiên một hình ảnh trong bài viết từ album picasa để làm ảnh đại diện cho bài viết của bạn. Do vậy các hình ảnh bạn phải tải trực tiếp lên blog của bạn nha.
thumbwidth = 100; Là chiều rộng của hình ảnh Thumbnail bên trái (tức hình ảnh lớn nhất).
thumbheight = 60; Là chiều cao của hình ảnh Thumbnail bên trái (tức hình ảnh lớn nhất).
otherthumbwidth = 60; Là chiều rộng của hình ảnh Thumbnail bên phải (tức hình ảnh nhỏ hơn).
otherthumbheight = 60; Là chiều cao của hình ảnh Thumbnail bên phải (tức hình ảnh nhỏ hơn).
sumPost = 147; Là số ký tự của tiều đề bài viết hiển thị trong tiện ích. Bạn nên chỉnh lại cho phù hợp vì nhiều khi để số ký tự tiêu đề dài quá sẽ ảnh hưởng đến bố cục của trang web của bạn.
home_page = "http://namkna.blogspot.com/"; Là URL trang web của bạn.
numposts = 6; Là số bài hiển thị tối đa trong một box nhãn.

6- Tìm đoạn mã sau:

<b:section class='main' id='main' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>

- Thêm đoạn code dưới vào sau nó (Nếu không tìm thấy đoạn code trên Bạn cũng có thể thêm vào tiện ích HTML/Javarscip bên dưới bài đăng):

<!-- Nhãn 1 -->
<div class="folder">
<div class="folder-title">
<div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="http://namkna.blogspot.com/search/label/Blogspot%20Templates?max-results=5">Templates</a></div>
<div class="folder-activeright fl"></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Blogspot-tips?max-results=5">Blogspot Tips</a> |
<a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Blogspot%20Comments%20Emoticons?max-results=5">Emoticons</a> |
<a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Blogspot%20Menu?max-results=5">Menu</a> | 
<a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Recent%20post%20Home?max-results=5">Future</a>
</div>

<div class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7t_VhIOpzsDTnwmgDscs2QN_15k9qQl4HQr4SEKk8wsD7IWKwINUste-uPpHZ_T7fRj55t3sD1VfaT2y3NMNm46-7UYCiBRB4uabECqk80BMuOfmx6DLWWRzY39ga-Mv5OGT-IpyR1AFB/"; 
document.write("<script src=\""+home_page+"/feeds/posts/default/-/Label 1?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<div class="folder-bottom"></div>
</div>

<!-- Nhãn 2 -->
<div class="folder">
<div class="folder-title">
<div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="http://namkna.blogspot.com/search/label/Blogspot%20Templates?max-results=5">Templates</a></div>
<div class="folder-activeright fl"></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Blogspot-tips?max-results=5">Blogspot Tips</a> |
<a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Blogspot%20Comments%20Emoticons?max-results=5">Emoticons</a> |
<a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Blogspot%20Menu?max-results=5">Menu</a> | 
<a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Recent%20post%20Home?max-results=5">Future</a>
</div>

<div class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7t_VhIOpzsDTnwmgDscs2QN_15k9qQl4HQr4SEKk8wsD7IWKwINUste-uPpHZ_T7fRj55t3sD1VfaT2y3NMNm46-7UYCiBRB4uabECqk80BMuOfmx6DLWWRzY39ga-Mv5OGT-IpyR1AFB/"; 
document.write("<script src=\""+home_page+"/feeds/posts/default/-/Label 2?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<div class="folder-bottom"></div>
</div>

» Tùy chỉnh code:

Lần lượt thay Label 1, Label 2 thành tên nhãn bạn muốn hiển trị trên trang chủ trong blog của bạn nha.
Bạn cũng có thể thay đổi hình ảnh đại diện cho các bài viết không có hình ảnh bằng cách thay đổi hình ảnh màu xanh nằm trong thẻ imgr[0].
Bạn cũng có thể tùy chỉnh lại các tiêu đề ở phần menu trên mỗi box lại cho phù hợp với trang web của bạn nha.

Nếu muốn thêm một box bạn chỉ cần thêm đoạn code bên dưới vào cuối cùng của đoạn code trên:

<!-- Nhãn 2 -->
<div class="folder">
<div class="folder-title">
<div class="folder-activeleft fl"></div>
<div class="folder-active fl"><a class="link-folder" href="http://namkna.blogspot.com/search/label/Blogspot%20Templates?max-results=5">Tip Blogger</a></div>
<div class="folder-activeright fl"></div>
<div class="subfolder fl">
<a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Blogspot-tips?max-results=5">Blogspot Tips</a> |
<a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Blogspot%20Comments%20Emoticons?max-results=5">Emoticons</a> |
<a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Blogspot%20Menu?max-results=5">Menu</a> | 
<a class="link-subfolder" href="http://namkna.blogspot.com/search/label/Recent%20post%20Home?max-results=5">Future</a>
</div>

<div class="folder-titleright fr"></div>
</div>
<div class="folder-content" id="tdHomeFolder2">
<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi7t_VhIOpzsDTnwmgDscs2QN_15k9qQl4HQr4SEKk8wsD7IWKwINUste-uPpHZ_T7fRj55t3sD1VfaT2y3NMNm46-7UYCiBRB4uabECqk80BMuOfmx6DLWWRzY39ga-Mv5OGT-IpyR1AFB/"; 
document.write("<script src=\""+home_page+"/feeds/posts/default/-/Label n?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
</div>
<div class="folder-bottom"></div>
</div>

7- Lưu mẫu lại:

Bây giờ hãy quan trở lại trang chủ của bạn để xem thành quả của bạn nha. Nếu gặp bất cứ khó khăn nào khi áp dụng hãy cho mình biết mình sẽ hỗ trợ các bạn.

Nhận xét

Đỗ Trựclúc 21:08:00 GMT+7 Thứ Năm, 7 tháng 3, 2013
Code bị lỗi rồi anh ơi
Trả lờiXóa
Trả lời
Blogmanhhailúc 21:57:00 GMT+7 Chủ Nhật, 5 tháng 5, 2013
MÃ NÀY LỖI BỊ LỖI RỒI BẠN À
Trả lờiXóa
Trả lời
Blogmanhhailúc 22:00:00 GMT+7 Chủ Nhật, 5 tháng 5, 2013
http://namkna.blogspot.com/2013/03/recent-posts-magazine-for-homepage.html?showComment=1367765860192#c7564301068666926478
BẠN KIỂM TRA LAI ĐI MÌNH LÀM MẤY LẦN TOÀN BÁO LỖI CÚ PHÁP?
Trả lờiXóa
Trả lời
thaithuanlúc 22:47:00 GMT+7 Thứ Sáu, 21 tháng 6, 2013
Bỏ là được
Trả lờiXóa
Trả lời
thaithuanlúc 22:48:00 GMT+7 Thứ Sáu, 21 tháng 6, 2013
Bỏ </b:if> là được
Trả lờiXóa
Trả lời
Tran Hoang Phuclúc 14:04:00 GMT+7 Thứ Sáu, 5 tháng 7, 2013
tôi làm như vậy nhưng nó hiện ở dưới các bài viết trên trang chủ,làm sao để đẩy lên trên vậy namkna.bạn xem giúp mình nhé ,và còn một vấn đề nữa là khi click vào thì ở nhãn vẫn xuất hiện các mục đấy bạn a!
Trả lờiXóa
Trả lời
Unknownlúc 10:53:00 GMT+7 Thứ Bảy, 12 tháng 10, 2013
Hiện tại Namkna đã cập nhật lại bài viết này cho các bạn rồi các bạn có thể tiến hành làm đê trải nghiệm một giao diện mới bắt mắt và đẹp hơn trong blog của các bạn nha,
Trả lờiXóa
Trả lời
Khonggianvietlúc 15:14:00 GMT+7 Thứ Ba, 25 tháng 2, 2014
Mình copy code vào nhưng khi lưu thì báo lỗi và con trỏ chuột chỉ đến chỗ "LỖI Ở ĐÂY" như trong đoạn code dưới. Help me! thanks.

script language="JavaScript"
imgr = new Array();
imgr[0] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg";
document.write("script src=\ LỖI Ở ĐÂY ""+home_page+"/feeds/posts/default/-/Label 1?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\">\/script");
Trả lờiXóa
Trả lời

Thêm nhận xét

Recent posts dạng báo trí cho trang chủ của blogger

» Những cập nhật nâng cao mới của tiện ích Recent posts dạng báo trí ở trang chủ dành cho blogger:

» Cách tạo Recent posts dạng báo trí giống trang vnexpress.net cho trang chủ của blogger

Bạn có thể thích những bài đăng này

Nhận xét

CÔNG TY TNHH EXPRESSNO1