Thư viện

Trải nghiệm

Thứ Ba, tháng 3 05, 2013

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

Recent posts dạng báo trí cho trang chủ của blogger, với giao diện giống trang báo vnexpress.net hiện nay. Sử dụng một file js duy nhất load nhanh.

Chia sẻ:
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://lh6.googleusercontent.com/-5feF4IxeRV4/T4Ws0eBvUAI/AAAAAAAABFU/WW2IUii-eMo/h120/catalog_header_bg-namkna-blogspot-com.gif) repeat-x}
.folder-active{height:24px; padding:4px 10px; background:url(https://lh5.googleusercontent.com/-ef97scIg448/T4Wsn9dIKGI/AAAAAAAABFM/ecAARVMA2ZU/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://lh4.googleusercontent.com/-fQAf6rjbhlE/T4WtDSH9ZxI/AAAAAAAABFc/fYK7tGZ5JvM/h120/parent_child_spc-namkna-blogspot-com.gif) no-repeat}
.folder-content{width:500px; background:#fff url(https://lh6.googleusercontent.com/-IZoHVkFKOsw/T4WtOEIYIGI/AAAAAAAABFk/OBpkpWbD8bc/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://lh4.googleusercontent.com/-zgTX2eYGQhM/T4WtZj_YIaI/AAAAAAAABFs/3Vn-lR9r1E8/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] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg"; 
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] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg"; 
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] = "http://lh5.ggpht.com/_BTztXRwC9ik/TGj60EKEdrI/AAAAAAAAC1w/JKGAdpKYyk8/images.jpg"; 
    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.

11 nhận xét:

  1. MÃ NÀY LỖI BỊ LỖI RỒI BẠN À

    Trả lờiXóa
  2. 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
  3. Trả lời
    1. Không thay thế được bài đăng mới nhất trên Trang Chủ. Hu Hu

      Xóa
  4. 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
  5. 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
  6. 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
    1. Do mục comment ko cho phép thẻ nên trước script mình bỏ ngoặc nhọn đi nhé. Mình coppy y nguyên nhé chỉ thay nhưng mục label, link, những mục có thể tùy chỉnh.

      Xóa
    2. Nếu chèn thẳng vào mẫu thì bạn phải mã hóa đoạn script có dạng:

      document.write("<script src=\""+home_page+"/feeds/posts/default/-/Label 1?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script> CÔNG CỤ MÃ HÓA CODE VÀ GIẢI MÃ COSDE CHO BLOG/WEB

      Sử dụng công cụ mã hóa của mình nha

      Xóa