Cập nhật bản Auto, tự động cập nhật bài viết theo từng nhãn, hoặc cho cả blog.

- Ở phần trên, khi muốn hiển thị chúng ta phải add từng bài viết vào. Hơi mất công 1 chút. Nhưng việc này lại có ích nếu ta chỉ muốn hiển thị 1 số bài viết nổi bật nào đó trong blog của mình.
- Còn ở phần này mình sẽ giới thiệu 1 cách để thủ thuật tự động cập nhật các bài viết cho các bạn. Thực ra đây cũng là thủ thuật Recent posts thôi, nhưng ở đây mình chỉnh sửa file JS lại để áp dụng được cho thủ thuật này.
- Tùy theo yêu cầu của các bạn, có thể lựa chọn cách thủ công hoặc tự động.

Xem demo ở đây : LIVE DEMO

Còn đây là hình ảnh mình đã thực hiện:

- Tương tự như ở phần thủ công, phần này bạn cũng thực hiện các bước tương tự từ bước 1 đến bước 4 như ở trên.
- Đến bước 5 thì code sẽ hoàn toàn khác. Bạn tạo 1 widget HTML/Javascript và dán đoạn code bên dưới vào:

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";


showRandomImg = false;


fntsize = 12;
acolor = "#E67C15";
aBold = true;




text = "comments";
showPostDate = true;


summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";


numposts =5;
label = "Film";
home_page = "http://fandung.blogspot.com/";


</script>


<div id="featured">


<script src="http://fandung.110mb.com/slide-jQuery/slide-j1.js" type="text/javascript"></script>
<script src="http://fandung.110mb.com/slide-jQuery/slide-j2.js" type="text/javascript"></script>


</div>

- Do hiệu chỉnh phần CSS của thủ thuật hơi phức tạp, nên mình khuyên các bạn giữ nguyên bố cục của thủ thuật này là hiện thị 5 bài. Tức là giữ nguyên đoạn code màu đỏ (numposts =5;)
- Các file JS trên là để hiển thị các bài viết của 1 nhãn nào đó, nếu các bạn muốn hiển thị cái bài viết mới của cả blog thì đổi file javascript lại như bên dưới (lưu ý : phải giữ đúng thứ tự của các file javascript)

<script src="http://fandung.110mb.com/slide-jQuery/post-slide-j1.js" type="text/javascript"></script>
<script src="http://fandung.110mb.com/slide-jQuery/post-slide-j2.js" type="text/javascript"></script>

- Muốn thay đổi màu chữ của tiêu đề bài viết ở phần bên trái, các bạn chỉnh sửa trong đoạn code CSS như bên dưới :

#featured .info a{
text-decoration:none;
color:#f00;
font-size:13px;

- Một vài lưu ý khác về việc hiển thị :

trước tiên hãy xem hình mình họa này

a. Ở phần bên phải :
- trong hình ta thấy phần post summary nằm trong class #featured .ui-tabs-panel .info , hãy điều chỉnh số kí tự của phần summary post để nó không bị tràn ra khỏi khung hiển thị. Nếu muốn mở rộng phần hiển thị này (tăng chiều cao) , bạn hãy thay đổi 2 đoạn code màu đỏ như bên dưới :

#featured .ui-tabs-panel .info{
position:absolute;
top:196px;
left:2px;
height:55px;
width:336px;
background:url('http://fandung.110mb.com/slide-jQuery/transparent-bg.png') repeat;
}

- Lưu ý là 196px + 55px = 251px , với 251px là chiều cao của vùng hiển thị ảnh của bài viết. (trong hình minh họa mình có điều chỉnh hơi khác so với code gốc 175px + 75px = 251px)

b. Phần bên trái :
- Tương tự, phần bên trái sẽ gồm 2 phần, ảnh thumbnail và tiêu đề bài viết. Và ta lưu ý là khi tiêu đề của bài viết quá dài thì nó sẽ bị tràn ra khỏi khung hiển thị, như thế sẽ rất xấu. Vì thế hãy mở rộng vùng hiển thị này ra, bảo đảm sao cho tiêu đề dài nhất cũng ko bị tràn.
- Để mở rộng vùng hiển thị này, bạn hãy tìm tới đoạn code CSS như bên dưới :

#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:340px;
list-style:none;
padding:0; margin:0;
width:210px;
}

Thay đổi đoạn code màu đỏ là được.
- Và kích thước ảnh thumbnail ở phần này có thể điều chỉnh ở đoạn code bên dưới:

#featured .ui-tabs-nav-item img{
height:37px;
width:55px;
}

Tuy nhiên mình có lời khuyên, tốt nhất là giữ nguyên như thế, nếu bạn thay đổi nó thì sẽ làm ảnh hưởng nhiểu tới việc hiển thị của tiện ích. Do đó nếu ai thật sự rành về việc canh chỉnh các kích thước trong code CSS thì mới làm việc này.

Tham khảo source từ site ctyhanlamvien

Chúc các bạn thành công.