Tạo widget Recent Post theo Label bố trí ngang với Thumbnail

Tiện ích Bài viết mới nhất (Recent Posts) có hình Thumbnail hiển thị cùng tiêu đề bài viết theo hàng ngang có hiệu ứng CSS bo tròn góc rất đẹp, mang đến một phong cách mới cho weblog bạn sẽ kích thích người đọc click truy cập vào bài viết với hình hiển thị hấp dẫn thay vì chỉ có những tiêu đề bài viết khô cứng.

Nếu ai muốn hiển thị nó với ảnh nền khác, hoặc style màu khác thì có thể dùng các trình chỉnh sửa hình ảnh để thay đổi lại ảnh nền và màu sắc cho thích hợp.
Sau đây là các bước thực hiện:
1. vào bố cục
2. vào chỉnh sửa code HTML
3. chèn đọan code CSS bên dưới vào trước thẻ đóng </head>

<style type="text/css">
#rc-content {
padding:4px;
background:#efefef;
}
#rc-main {
width:110px; /*không nên thay đổi độ rộng này*/
background:#fff url(dán URL ảnh bạn muốn làm hình nền cho phần thân của tiện ích vào đây) repeat-y;
}
#rc-top {
background:#fff url(dán URL ảnh bạn muốn làm hình nền cho phần đầu của tiện ích vào đây) no-repeat top;
height:3px;
}
#rc-bottom {
background:#fff url(dán URL ảnh bạn muốn làm hình nền cho phần đáy của tiện ích vào đây) no-repeat bottom;
height:3px;
}
.rc-thumbs {
padding:2px 5px 5px 5px;
height:73px;
}
.rc-thumbs IMG {
width:100px;
height:80px;
}
.rc-title {
height:50px;
padding:7px 7px 4px 7px;
line-height:16px;
font-size:11px;
font-weight:bold;
}
.rc-title a {color:#888;}
.rc-title a:hover {color:#444;}
</style>

Các bạn chỉnh sửa dòng code màu đỏ height:50px;.Nếu bị tràn chữ ra ngoài khung như hình dưới đây

4. save template
5. tạo 1 widget HTML/Javascript (Bạn nên đặt tiện ích này ở phần main, không nên đặt ở Sidebar) và dán đọan code của thủ thuật vào :

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://lh3.googleusercontent.com/-51m35YW5u74/UIe8m92BrdI/AAAAAAAAGGY/CpsHqzUYq-g/s191/nothumbnail.gif";
showRandomImg = true;
zaBold = false;
numposts = 5;
label = "Tùy chỉnh Blogspot";
home_page = "http://bongnguoilangle.blogspot.com/&quot;;
</script>
<script src="http://bongnguoilangle.googlecode.com/files/adv-z-rc2-label.js" type="text/javascript"></script>

Code màu đỏ numposts = 5; là số bài viết hiển thị trên tiện ích. Bạn chỉnh lại theo ý mình.
Thay http://bongnguoilangle.blogspot.com/ bằng URL blogspot của bạn.
Thay Tùy chỉnh Blogspot bạn bằng tên Nhãn mà bạn muốn sử dụng tiện ích này.

File javascript adv-z-rc2-label.js ở trên là để hiển thị bài viết của nhãn, nếu muốn hiển thị bài viết cho cả blog thì bạn dùng file js bên dưới :

http://bongnguoilangle.googlecode.com/files/adv-z-rc2-post.js

6.Save widget để hòan thành
Để dễ dàng hơn cho việc chỉnh sửa code CSS, các bạn có thể xem thêm hình minh họa này :

Để rút ngắn tiêu đề bài viết

chỉ cần thay code ở bước 5 như bên dưới là được

<script language="JavaScript">
imgr = new Array();
imgr[0] = "https://lh3.googleusercontent.com/-51m35YW5u74/UIe8m92BrdI/AAAAAAAAGGY/CpsHqzUYq-g/s191/nothumbnail.gif";
showRandomImg = true;
zaBold = false;
numposts = 5;
label = "Tùy chỉnh Blogspot";
summaryTitle = 40;
home_page = "http://bongnguoilangle.blogspot.com/";
</script>
<script src="http://bongnguoilangle.googlecode.com/files/adv-z-rc2-label.js" type="text/javascript"></script>

Tùy chỉnh dòng code này lại : summaryTitle = 40; (đây là code tùy chỉnh số kí tự sẽ được hiển thị ở tiêu đề)
- file javascript ở trên là để hiển thị bài viết của nhãn, nếu muốn hiển thị bài viết cho cả blog thì dùng file js bên dưới :

http://bongnguoilangle.googlecode.com/files/adv-z-rc2-post.js

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

Nguồn tham khảo: nhuttran.blogspot.com
Javascipt: Fandung
Edited by Bóng Người Lặng Lẽ Blogspot