Thư viện

Trải nghiệm

Thứ Bảy, tháng 3 02, 2013

Recent post cho trang chủ blogger style 2

Mẫu recent post mới để trang trí cho trang chủ của blog. Tiện ích đơn giản, load nhanh và dễ áp dụng. Gồm: khung bài viết mới nhất tổng quát trên cùng, và các khung bài viết mới nhất cho từng nhãn bên dưới. Blog của bạn sẽ mang phong cách Magazine (báo trí), travel (du lịc) hoặc chuyên nghiệp hơn.

Chia sẻ:
Recent post cho trang chủ blogger
Ảnh minh họa thủ thuật (Bấm vào hình để xem ảnh gốc nha)
Hôm nay namkna giới thiệu thêm cho các bạn một mẫu recent post mới để trang trí cho trang chủ của blog. Tiện ích đơn giản, load nhanh và dễ áp dụng. Tiện ích bao gồm một khung bài viết mới nhất tổng quát trên cùng, và các khung bài viết mới nhất cho từng nhãn bên dưới. Blog của bạn sẽ mang phong cách Magazine (báo trí), travel (du lịc) hoặc chuyên nghiệp hơn.

»Một số đặc điểm nổi bật của Recent post hompage Magazine style 2?

- Giao diện đẹp, bắt mắt.
- Khả năng tùy biến cao thông qua CSS và đoạn scipts mở (chưa mã hóa - endcode)
- Sử dụng 1 file javascripts duy nhất cho tất cả các nhãn nhằm hạn chế ảnh hưởng tới tốc độ load của blog khi sử dụng scripts.

Hãy xem demo hoặc ảnh minh họa đẻ thấy rõ hơn nha.:

View demo

» Bước 1: Ẩn bài viết ở trang chủ

-Việc ẩn bài viết ở trang chủ để tiện ích recen post hoạt động độc lập giúp blog của bạn nhìn chuyên nghiệp hơn.
- Để ẩn bài viết ở trang chủ bạn tham khảo bài viết sau:

» Bước 2: Thêm Recent post home page

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 mã bên dưới vào trước thẻ </head>
<script type='text/javascript'>
 //<![CDATA[
imgr = new Array();
imgr[0] = "http://4.bp.blogspot.com/-bYxmodqjTjs/UTKV-js5u2I/AAAAAAAAJRA/gsPnqwsEESY/s1600/noimage-namkna-blogspot-com.png";
showRandomImg = true;

aBold = true;

summaryPost = 140;
summaryPost1= 80; 
summaryTitle = 35; 

numposts = 1; 
numposts1 =5; 
numposts2 =4; 
numposts3 = 6; 
numposts4 = 1; 
numposts5 = 6; 
numposts6 = 10; 
numposts7 = 10; 
numposts8= 6; 



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 showrecentposts1(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();
 if (numposts5 <= json.feed.entry.length) {
  maxpost = numposts1;
  }
 else
       {
    maxpost=json.feed.entry.length;
    } 
 
     for (var i = 0; i < maxpost; 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="'+acolor+'">('+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 = day+ ' ' + m + ' ' + y ;
 if (i==0) {
 var trtd = '<div class="widgetsplitone_left"><a href="'+posturl+'"><img width="278" height="139" class="imagefeatured wp-post-image" src="'+img[i]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h5><div class="contentstyle"><p>'+removeHtmlTag(postcontent,summaryPost)+'(...)</p></div><div class="clear"></div></div><div class="widgetsplitone_right">';      
  document.write(trtd);
           }
 if ((i>0)&&(i<maxpost)) {
 var trtd = '<a href="'+posturl+'"><img class="imagewidgetthumb wp-post-image" height="40" src="'+img[i]+'" width="60"/></a><div class="featuredPost"><b><a href="'+posturl+'">'+posttitle+'</a></b><div class="borderfix"></div></div>';  
 document.write(trtd);
  }    
  j++;
 }
 document.write('</div>');
}

function showrecentposts3(json) {
 j = (showRandomImg) ? Math.floor((imgr.length+1)*Math.random()) : 0;
 img  = new Array();

   for (var i = 0; i < 10; 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="'+acolor+'">('+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 = day+ ' ' + m + ' ' + y ;
 var trtd = '<li><a href="'+posturl+'">'+posttitle+'</a></li>';
 document.write(trtd);


 j++;
}

}

function showrecentposts6(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="'+acolor+'">('+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 = day+ ' ' + m + ' ' + y ;
 
 var trtd = '<a href="'+posturl+'"><img width="266" height="139" class="imagefeatured wp-post-image" src="'+img[i]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h5><div class="contentstyle"><p>'+removeHtmlTag(postcontent,summaryPost)+'(...)</p></div><div class="clear"></div>';      
  document.write(trtd);       
    
     j++;
 }
 
}


//]]>
</script>
5- Thêm đoạn mã bên dưới vào trước thẻ ]]></b:skin>
/* --------Widgets---------------------*/
.widget {
margin: 0px 0px 10px 0px;
overflow: hidden;
}
.widget a,
.widget a:visited {
color: #00CD00;
text-decoration: none;
}
.widget a:hover {
color: #FF7000;
}
.widgetwrap {
padding: 10px;
border-left: 1px solid #F4F4F4;
border-right: 1px solid #F4F4F4;
border-bottom: 1px solid #F4F4F4;
overflow: hidden;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
}
.widgetwrap ul {
list-style-type: none;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.widgetwrap ul li {
background: transparent url(http://2.bp.blogspot.com/-6BVBkiQQO3w/UVBrUttxy2I/AAAAAAAAJes/WF7Y_Z1waI8/s1600/bullet-namkna-blogspot-com.gif) no-repeat 0px 5px;
margin: 0px 0px 4px 0px;
padding: 0px 0px 0px 13px;
}
.widgetwrap li a,
.widgetwrap li a:link,
.widgetwrap li a:visited {
color: #000000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.widgetwrap li a:hover,
.widgetwrap li a:active {
color: #FF7000;
margin: 0px 0px 0px 0px;
padding: 0px 0px 0px 0px;
}
.widgetwrapalt {
padding: 10px;
border: 1px solid #F4F4F4;
overflow: hidden;
border-radius: 3px;
}
.widgetsplitone {
width: 558px;
padding: 0px;
margin: 0px;
overflow: hidden;
}
.widgetsplitone_left {
width: 313px;
padding: 0px;
margin: 0px 10px 0px 0px;
float: left;
}
.widgetsplitone_right {
width: 222px;
padding: 0px;
margin: 0px 0px 0px 10px;
float: right;
}
h3.widget {
line-height: 14px;
font-size: 12px;
font-weight: bold;
font-family: Tahoma;
color: #363636;
letter-spacing: normal;
padding: 5px 11px 5px 11px;
margin: 0px 0px 0px 0px;
display: block;
background: #F5F5F5;
}
h3.widget a,
h3.widget a:visited {
color: #000;
text-decoration: none;
}
h3.widget a:hover {
color: #ccc;
}
.main-w_w_right {
    float: left;
    margin-top: 0px;
    padding: 0;
    width: 290px;
}
Trong đó:
  • width: 558px; Là độ rộng của khung recent comment chính
  • width: 313px; là độ rộng của khung bên trái
  • width: 222px; là độ rộng của khung bên phải.
  • 2 số 313px +222px phải nhỏ hơn 558px
  • width: 290px; là độ rộng của 2 khung dưới cùng (Số này phải nhỏ hơn 558px/2)
  • color: #00CD00; là màu chữ tiêu đề khi chưa dê chuột vào.
  • color: #FF7000; là màu chữ tiêu đề khi dê chuột vào.
  • background: #F5F5F5; là màu nền của phần tên nhãn (phần màu xám trong hình minh họa hoặc blog demo).
  • color: #363636; là mãu chữ của tên nhãn.
  • font-size: 12px; là Font chữ tên nhãn.
  • Hãy sử dụng công cụ lấy mã màu của namkna để thay đổi mã màu của bạn nha: Color conveter.
6- Tìm đoạn mã bài viết như bên dưới:
<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>
- Và dán ngay sau nó đoạn code bên dưới.
<!-- Recent Posts -->
<b:if cond='data:blog.url == data:blog.homepageUrl'>

<div class='widget'><h3 class='widget'>Recent Posts</h3>
<div class='widgetwrap'>    
<div class='widgetsplitone'>
<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</div>

<!-- Nhãn 1 -->
<div class='widget'><h3 class='widget'>Mô tả nhãn 1</h3>
<div class='widgetwrap'>  
<div class='widgetsplitone'>
<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Tên nhãn 1?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</div>


<!-- Nhãn 2 -->
<div class='widget'><h3 class='widget'>Mô tả nhãn 2</h3>
<div class='widgetwrap'>  
<div class='widgetsplitone'>
<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Tên nhãn 2?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</div>

<!--Nhãn 3 -->
<div class='widget'><h3 class='widget'>Mô tả nhãn 3</h3>
<div class='widgetwrap'>  
<div class='widgetsplitone'>
<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Tên nhãn 3?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</div>

<!-- Nhãn 4 -->
<div class='widget'><h3 class='widget'>Mô tả nhãn 4</h3>
<div class='widgetwrap'>  
<div class='widgetsplitone'>
<script>        
document.write(&quot;&lt;script src=\&quot;/feeds/posts/default/-/Tên nhãn 4?max-results=&quot;+numposts1+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts1\&quot;&gt;&lt;\/script&gt;&quot;);
</script>
</div>
</div>
</div>

<!-- Khung them thu cong -->
<div class='main-w_w_right'>
<div class='widget'><h3 class='widget'>Blogger Templates</h3>
<div class='widgetwrap'>    
<script>document.write(&quot;&lt;script src=\&quot;http://namkna.blogspot.com/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts6\&quot;&gt;&lt;\/script&gt;&quot;);</script> 
</div>
</div>
</div>
<div class='main-w_w_right'>
<div class='widget'><h3 class='widget'>Wallpapers</h3>
<div class='widgetwrap'>    
<script>document.write(&quot;&lt;script src=\&quot;http://namkna.blogspot.com/feeds/posts/default?max-results=&quot;+numposts+&quot;&amp;orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts6\&quot;&gt;&lt;\/script&gt;&quot;);</script> 
</div>
</div>
</div>
</b:if>
Trong đó:
  • Thay Mô tả 1,2,3,4 thành mô tả nhãn bạn muốn hiển thị recent post
  • Thay tên nhãn 1,2,3,4 thành tên nhãn bạn muốn hiển thị recent post
  • Thay:  http://namkna.blogspot.com/ thành URL blog của bạn. Nếu muốn bỏ 2 ô cuối cùng bạn chỉ việc xóa phần màu xanh.
7- Lưu mẫu lại và xem kết quả nha.

64 nhận xét:

  1. Chúc mừng năm mới, lâu lắm rùi mới quay về lại với blogspot

    Trả lờiXóa
    Trả lời
    1. Cảm ơn bạn đã ghé thăm. Chúc bạn năm mới an khang thịnh vượng, vạn sự như ý,..

      Xóa
  2. Chào bạn! Cảm ơn bạn đã chia sẻ. Mình vừa áp dụng thủ thuật mới của bạn, code ở bước 6 hình như phải đặt trên đoạn mã đó bạn à!

    Trả lờiXóa
  3. Bạn ơi, nếu muốn tiêu đề bài viết ở khung phải nằm bên cạnh ảnh thu nhỏ chứ không phải ở dưới ảnh và có thể rút ngắn tiêu đề nếu quá dài thì làm thế nào hả bạn!

    Trả lờiXóa
    Trả lời
    1. 1- Đặt trên hay dưới đều được hết bạn ak.
      2- Rút ngắn tiêu đề chỉnh đoạn summaryPost1= 80; với 80 là số ký tự.
      3- Tiêu đề bên phai:Chỉnh lại đoạn mã sau:
      <div class="widgetsplitone_left"><a href="'+posturl+'"><img width="278" height="139" class="imagefeatured wp-post-image" src="'+img[i]+'"/></a><div class="clear"></div><h5 class="posttitle"><a href="'+posturl+'">'+posttitle+'</a></h5><div class="contentstyle"><p>'+removeHtmlTag(postcontent,summaryPost)+'(...)</p></div><div class="clear"></div></div><div class="widgetsplitone_right">';

      Thu nhỏ width và height đồng thời bỏ đoạn <div class="clear"> trong đó.

      Xóa
    2. Chào bạn! Mình chỉnh W-H như bạn HD chỉ thay đổi size ảnh ở khung trái, ở khung phải tiêu đề vẫn bị đẩy xuống dưới ảnh thu nhỏ bạn à!

      Xóa
  4. Bạn sửa thành:

    <div class="widgetsplitone_left"><a href="'+posturl+'"><img width="278" height="139" class="imagefeatured wp-post-image" src="'+img[i]+'"/></a><h5><a href="'+posturl+'">'+posttitle+'</a></h5><div class="clear"></div><div class="contentstyle"><p>'+removeHtmlTag(postcontent,summaryPost)+'(...)</p></div><div class="clear"></div></div><div class="widgetsplitone_right">';

    và thêm đoạn code sau vào trước ]]></b:skin>
    .imagefeatured {float:left}

    Trả lờiXóa
    Trả lời
    1. Chào bạn, qua quấy rầy bạn nữa đây! Những HD của bạn làm thay đổi khung bên trái. Ý mình hỏi khung bên phải. Mình thử thêm .imagewidgetthumb {float:left} thì tiêu đề đã nằm bên cạnh ảnh rồi nhưng ảnh nằm không thẳng hàng mà dòng dưới thụt vào một ảnh so với dòng trên, bạn xem giúp mình nhé!

      Xóa
    2. 1- Khung bên phải thì tiêu đề nằm sẵn bên cạnh hình rồi đó thôi bạn.

      2- Vấn đề: dòng dưới thụt vào một ảnh so với dòng trên => Bạn chụp cho mình hình ảnh hoặc để lại cho mình link của blog bạn đang áp dụng không (Mình qua xem để hướng dẫn cho tiện).

      Xóa
    3. Chào bạn! Thật vui vì sự tận tình của bạn!
      Bạn xem lỗi này https://lh5.googleusercontent.com/-E1-RfJVjx1Q/UTYElCIaJ5I/AAAAAAAABek/FOvu1AoqCSA/s277/untitled.jpg giúp mình nhé!

      Xóa
    4. Mình Namkna!
      bẠN THÊM clear: both; VÀO TRONG
      .imagewidgetthumb {float:left}
      đỂ ĐƯỢC:

      .imagewidgetthumb {clear: both;float:left}

      Xóa
    5. Nếu vẫn chưa được thì thêm cả ddaonj au:

      .borderfix{clear: both;border-bottom:1px dotted #0080ff;padding:3px}

      Xóa
    6. Chào bạn! Thêm cả hai đoạn bạn HD, giờ thì được rồi. Cảm ơn bạn nhiều nhé!
      À, đã có text-decoration: none; sao vẫn còn gạch chân ở dưới tiêu đề, bạn à!

      Xóa
    7. Do đoạn hover link trong blog của bạn thôi.
      THay:
      text-decoration: none
      thành:
      text-decoration: none !important;

      Xóa
  5. Demo thủ thuật, http://demo-namkna-blog.blogspot.com/

    Trả lờiXóa
    Trả lời
    1. Bạn thân mến! Bạn thật tuyệt vời, cảm ơn bạn vì tất cả nhé. Mình sẽ thường xuyên quấy rầy bạn đó!
      Chúc bạn một buổi tối thật vui vẻ!

      Xóa
    2. Cám ơn bạn :)
      Có gì thắc mắc bạn cứ đưa ra. Mình sẽ giúp đỡ trong khả năng của mình :)

      Xóa
  6. chào bạn, nếu thực hiện theo thủ thuật này thì trang chủ sẽ có giao diện như trên, vậy thì các tab ( nới nhóm các nhãn bài viết)nó có bị hiển thị giống như ngoài trang chủ không, hay là hiể thị theo chế độ mặc định trước đó của template

    Trả lờiXóa
    Trả lời
    1. Các phần có dạng search/label sẽ hiển thị như trước khi thực hiện thủ thuật này. Chỉ có trang chủ là thay đổi như trên thôi.

      Xóa
  7. cám ơn bạn nhiều cho mình hỏi thêm xíu.
    1,mình phải sửa trong phần nào để:
    - Đổi màu của chữ tiêu đề từ màu xanh lá qua màu khác
    - Đổi màu của khung (màu xám) qua màu khác
    2,tên nhãn 1,2,3,4 là để nhóm bài viết theo nhãn.còn mình chưa hiểu 2 cột cuối có ý nghĩa như thế nào.mình thay bằng ulr của mình thì nó ra như trong blog của mình:
    http://www.giamsathinhanh.com

    Trả lờiXóa
    Trả lời
    1. 1- Chú ý các mã màu in đậm nha:

      Đổi chũ màu xanh:

      .widget a,
      .widget a:visited {
      color: #00CD00;
      text-decoration: none;
      }
      .widget a:hover {
      color: #FF7000;
      }


      - Đổi màu của khung màu xám:

      h3.widget {
      line-height: 14px;
      font-size: 12px;
      font-weight: bold;
      font-family: Tahoma;
      color: #363636;
      letter-spacing: normal;
      padding: 5px 11px 5px 11px;
      margin: 0px 0px 0px 0px;
      display: block;
      background: #F5F5F5;
      }

      2 phần cuối mình để nếu bạn có nhu cầu liên kết các blog của bạn. Nếu không bạn có thể cho hiển thị theo nhãn bằng cách thay:

      http://namkna.blogspot.com/feeds/posts/default

      thành:

      http://namkna.blogspot.com/feeds/posts/default/-/Tên nhãn của bạn

      Xóa
  8. cảm ơn bạn nhiều nhiều nhé! mình làm được rồi
    mình làm phiền bạn thêm xíu nữa là: font chữ tiêu đề bài viết trong recent comment chính nhỏ hơn so với font chữ tiêu đề bài viết khung bên phải, bạn chỉ cho mình phần chỉnh font chữ tiêu đề bài viết trong recent comment chính nhé

    Trả lờiXóa
    Trả lời
    1. Bạn thêm đoạn code sau trước thẻ: ]]></b:skin>

      .widgetsplitone_left h5{
      line-height: 14px;
      font-size: 12px;
      font-weight: bold;
      font-family: Tahoma;
      }

      Xóa
  9. cảm ơn bạn mình chỉnh được rồi.
    Trang của mình còn bị một vấn đề là không có đường chấm chấm ngăn cách giữa các bài ở khung bên phải, mình thấy ở trang demo của bạn có ngăn cách bằng đường đường chấm.Bạn chỉ mình cách khắc phục nhé
    blog của mình: http://www.giamsathinhanh.com/

    Trả lờiXóa
    Trả lời
    1. Bạn thêm đoạn dưới trước thẻ: ]]></b:skin>

      [pre].borderfix{clear: both;border-bottom:1px dotted #0080ff;padding:3px}[/pre]

      #0080ff là mã màu đường viền
      padding:3px là khoảng cách từ tiêu đề tới các đường viền trên và dưới./.

      Xóa
  10. cảm ơn bạn, chúc bạn buổi tối vui vẻ

    Trả lờiXóa
  11. chào Nam !
    mình muốn đổi cái màu nền của phần header blog của mình từ màu trắng qua màu khác, mà mình tìm trong phần chỉnh sửa Html mãi không thấy, các phần : body background, content-wrapper, footer-widgets-container thì mình đã đổi được rồi, bạn biết thì chỉ mình với nhé

    Trả lờiXóa
    Trả lời
    1. Sủa đoạn:

      #header-wrapper{padding-top:50px;width:960px;margin:0px auto 0px;height: 60px;padding:30px 0;overflow:hidden;}

      Thành:

      #header-wrapper{padding-top:50px;width:960px;margin:0px auto 0px;height: 60px;padding:30px 0;overflow:hidden;background: #f9f8f8;}


      background: #f9f8f8; là mã màu nha.

      Xóa
  12. cám ơn bạn !
    mình đang áp dụng: "thủ thuật Recent post cho trang chủ" của bạn. thì có 1 vấn đề là, nếu mình thêm bất cứ widget nào trong phần main thì widget đó đều nằm lên trên cái "recent post". có cách nào để widget trong phần main nó nằm bên dưới cái recent post không bạn.

    Trả lờiXóa
  13. Ở bước 6 thay vì đán sau đoạn code tìm được hãy dán trước nó nha.

    Trả lờiXóa
  14. cám ơn bạn mình chỉnh được rồi

    Trả lờiXóa
  15. Cách tìm kiếm nội tuyến chuẩn không cần chỉnh, cám ơn bạn

    Trả lờiXóa
  16. ý sorry, mình comment nhầm qua bài này

    Trả lờiXóa
  17. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  18. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  19. chào bạn !
    mình lại vào làm phiền bạn nữa nè.
    Từ lúc mình dùng Recent post cho trang chủ, thì trang mà mình nhóm theo chủ đề (Tag) hoặc các trang bài viết thì cái phần tên bài viết (Title) nó nằm thụt xuống rất sâu so với thanh menu, ví dụ: đường link
    Mình đã tìm mọi cách chỉnh mà không được
    Bạn giúp mình với nha, cám ơn bạn trước nha

    Trả lờiXóa
  20. Bạn dán đoạn code bước 5 vào giữa cặp thẻ sau:

    <b:if cond='data:blog.url == data:blog.homepageUrl'>
    <style>
    dán code bước 5 vào đây
    </style>
    </b:if>

    - sau đó dán nó vào sau đoạn: ]]></b:skin> và lưu lại là oke.

    Trả lờiXóa
  21. hi ! cám ơn bạn
    mình đã làm theo hướng dẫn nhưng nó vẫn vậy bạn à.
    có khi nào là do mình tạo nhiều widget ngoài trang chủ và ẩn đi nên nó bị như vậy không bạn.

    Trả lờiXóa
    Trả lời
    1. bạn mới thay đổi css thì phải. Hôm trước heading là h1 hôm nay là h3.

      Bạn dán đoạn code vào sau đoạn: ]]></b:skin>:

      .post h3 {color:#0080ff;font-size:14px;margin:0}

      Xóa
    2. mình dán đoạn code này vào nó báo lỗi và đoạn code đó nó hiện lên góc trái trên cùng của blog như trong hình: Link hình ảnh nam a

      Xóa
    3. Cái đó không liên quan đến Đoạn code của mình đâu bạn kiểm tra lại xem trong các bài viết mới ở các nhãn của bạn có hình ảnh nào bị xóa hay lỗi không và thay thế nó đi là oke nha.

      Xóa
  22. Cám ơn bạn đã chia sẻ!!
    Bạn có thể cho mình hỏi, làm sao để đưa các nhãn ra trang chủ như thế này Click
    Mình làm theo cách của bạn mà không được

    Trả lờiXóa
  23. Ý mình là hiển thị "Movie Category 1", "Movie Category 1" như trong demo ấy, mình thay bằng các nhãn của mình nhưng ko hiển thị như thế:
    Đây là đoạn đấy:

    <b:widget id='HTML4' locked='false' title='Vector' type='HTML'>
    <b:includable id='main'>
    <div id='maskolis'>
    <script>
    document.write('<span class="index"><a href="/search/label/<data:content/>">See all Movies</a></span>');
    document.write('<h1><a href="/search/label/<data:content/>?max-results=8"><data:title/></a></h1>');
    document.write("<script src=\"/feeds/posts/default/-/<data:content/>?max-results="+numposts2+"&orderby=published&alt=json-in-script&callback=showrecentposts1\"><\/script>");
    </script>

    </div>
    </b:includable>
    </b:widget>

    mình thay =thẻ djv vì không cho hiển thị trên nhận xét.
    Mình thay đoạn bằng các nhãn của mình nhưng không hiển thị như demo,
    Đây là blog của mình: http://vatlieuthietke.blogspot.com/
    Bạn xem giúp mình với, cảm ơn bạn!

    Trả lờiXóa
    Trả lời
    1. Đoạn code bạn đưa ra không lien quan đến thủ thuật này. nếu muốn hiển thị dạng như trang phim đó thì cần áp dụng thủ thuật khác bạn ak,

      Xóa
  24. bạn có thể chỉ mình thủ thuật đấy được không bạn?

    Trả lờiXóa
  25. Admin ơi giúp mình với. Tên miền của mình k hiểu sao k gõ www thì k vào dc. mình đã chỉnh trong cài đặt blogspot rồi nhưng k dc. Bạn kiểm tra giúp mình với. Cám ơn!
    http://tivingon.com

    Trả lờiXóa
    Trả lời
    1. bạn mua domain trong blogspot luôn đúng ko?
      ngày xưa mình cũng nghịch ngợm và bị thế này rồi hihi
      Bây giờ bạn cần vào https://www.google.com/a/cpanel/tivingon.com
      Đấy là nơi quản lý domain của bạn, nó sẽ có một mục chuyển hướng tivingon.com -> www.tivingon.com tích chọn vô đó và save
      thế là ok :)

      Xóa
    2. bạn mua domain trong blogspot luôn đúng ko?
      ngày xưa mình cũng nghịch ngợm và bị thế này rồi hihi
      Bây giờ bạn cần vào https://www.google.com/a/cpanel/tivingon.com
      Đấy là nơi quản lý domain của bạn, nó sẽ có một mục chuyển hướng tivingon.com -> www.tivingon.com tích chọn vô đó và save
      thế là ok :)

      Xóa
    3. Mình mua ở Godaddy.com bạn ơi. :(. cái mục cai đặt trong blog mình đặt như bạn nói rồi :D

      Xóa
    4. Đây là ảnh cấu hình trong quản lý domain của mình
      https://dl.dropboxusercontent.com/u/88654373/Untitled.png

      Xóa
    5. thì mua trong blogspot cũng là Goddady cung cấp mà :D

      Xóa
  26. Chào bạn, cái tiêu đề của bài đăng ở cột bên phải cứ bị đẩy xuống dưới hình ảnh thu nhỏ, bạn chỉ mình chỉnh sao cho nó nằm bên cạnh hình như demo của bạn. Cảm ơn bạn

    Trả lờiXóa
    Trả lời
    1. Bạn thêm đoạn bên dưới vào trước thẻ ]]></b:skin>

      .featuredPost,.featuredPost a{float:left}

      Xóa
    2. Mình đã thêm như bạn hướng dẫn nhưng vẫn không được. Bạn xem giúp blog mình là http://chungtacungthu.blogspot.com

      Xóa
    3. Bạn xóa đoạn này đi nha:

      #0080ff là mã màu đường viền
      padding:3px là khoảng cách từ tiêu đề tới các đường viền trên và dưới./.


      đó chỉ là đoạn chú thích thôi.

      thêm cả đoạn này vào nữa nha:

      .widgetsplitone_right img{float:left}

      Xóa
  27. Anh Nam Tạ ơi, em làm theo giống như anh, nhưng có một lỗi thế này:
    1. Nếu sử dụng thủ thuật ẩn bài viết ở trang chủ, thì nó sẽ ẩn luôn tiện ích recent post độc lập (bản của anh) luôn. một trang trống trơn :(
    2. Nếu bỏ thủ thuật ẩn bài viết ở trang chủ, thì nó hiện cùng lúc cả hai tiện ích recent post (1 của anh google, 1 của anh Nam Tạ).
    Khi nào anh rãnh nhờ anh xem giúp.
    Địa chỉ blog của em: vnreadylife.blogspot.com
    Email: lhngoc91@gmail.com

    Trả lờiXóa
  28. Bạn giúp minh tại sao bai viet cua minh click vao ko thấy gi hết: saigon2res.blogspot.com

    Trả lờiXóa
  29. Nam chỉ giúp mình. muốn hiện thị số bài viết trong phần recen post ở chỗ nào nhỉ? mình tìm mãi không thấy

    Trả lờiXóa