Bài mới nhất có ảnh thumbnail cuộn lên từ Jquery cho blogspot
Thủ thuật này chỉ hiển thị tiêu đề bài viết cùng với ảnh mô tả thu nhỏ của bài viết đó. Nó được tích hợp hiệu ứng từ thư viện Jquey  tạo sự chuyển động của các ô bài viết rớt từ trên xuống mượt mà và đẹp mắt. Vê cơ bản nó giống với tiện ích bài viết mới nhất có ảnh thu nhỏ và mô tả dạng chuyển động từ dưới lên mà mình đã từng giới thiệu tại đây.

Để thấy rỏ hơn về thủ thuật này thì bạn hãy xem phần demo ở bên dưới hoặc ảnh minh họa bên cạnh.

Xem Demo

☼ Cách thêm tiện ích Bài mới nhất có ảnh thumbnail cuộn lên từ Jquery cho blogspot

1. Đăng nhập tài khoản bloggerBài mới nhất có ảnh thumbnail cuộn lên từ Jquery cho blogspot
2. Chọn Thêm tiện ích và Tạo thêm 1 HTML/Javascripts
3. Thêm code bên dưới vào phân nội dung của tiện ích vừa tạo:
<style type="text/css">
#spylist {
overflow:hidden;
margin-top:5px;
height:450px; /* độ cao của tiện ích*/
}
#spylist ul{
overflow:hidden;
list-style-type: none;
padding: 0px;
}
#spylist li {
border:1px dotted #0000ff;
width:208px; /* độ rộng của tiện ích*/
margin:0px 0px 5px 0px;
padding:2px 1px 2px 2px;
list-style-type:none;
float:none;
height:60px; /* độ cao của mỗi tiêu đề bài viết*/
overflow: hidden;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEisX3WC-fLtS3VjeCpjpFVtoNZvvk61ECdD3IoPIjaoJUDtZC8DT8kNJkYQuoKCLZNqAJcD3UW61DJfS7BwlGSlgyokEtHr2vXWhNFzG9FhT3SpUuh9y4Ea7Zf482m8j650h_7MgBgUd8Fl/s1600/vff-namkna-blogspot-com.png); /* màu nền của tiện ích*/
}
#spylist li a {
text-decoration:none;
color:#0066cc;
font-size:11px;
height:18px;
overflow:hidden;
margin:0px 0px 0px 0px;
padding:0px 0px 2px 0px;
}
#spylist li a:hover{
text-decoration:underline;
color:#ff0000;
}
#spylist li img {
float:left;
margin-right:5px;
border:1px;
}
.spydate{
overflow:hidden;
font-size:10px;
color:#ff0066;
padding:2px 0px;
margin:1px 0px 0px 0px;
height:15px;
font-family:Tahoma,Arial,verdana, sans-serif;
}
.spycomment{
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}
</style>
<script src="http://dl.dropbox.com/u/70549761/jQuery/namkna-blogspot-com/jquery.min.js" type="text/javascript"></script>
<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://img138.imageshack.us/img138/7159/noimage.jpg";
limitspy = 6;
intervalspy = 4000; 
showRandomImg = true;
boxwidth = 255;
cellspacing = 0;
borderColor = "#000000";
bgTD = "#fff";
thumbwidth = 60; 
thumbheight = 60;
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "no"; 
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10;
summaryColor = "";
icon2 = " ";
numposts = 10;
label = "Blogspot Recent post"; 
home_page = "http://namkna.blogspot.com/"; 
</script>
<div id="spylist">
<script src="http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/recent_post_spy.js" type="text/javascript"></script></div>
» Tùy chỉnh code:
  • Lưu ý: Các bạn nên download file js về sau đó Upload lên host riêng để dùng lâu dài. Nếu chưa có host thì bạn có thể tham khảo host miễn phí tại đây.
  • limitspy = 6; Là số bài trình diễn (những bài viết mà bạn luôn luôn nhìn thấy)
  • intervalspy = 4000;  Là tốc độ chuyển đổi bài viết , Đơn vị tính là phần nghìn của giây. Trong trường hợp này là 4 giây chuyển đổi bài viết một lần.
  • thumbwidth = 60; Là độ rộng ảnh thu nhỏ thumbnail.
  • thumb thumbheight = 60; Là độ cao ảnh thu nhỏ thumbnail.
  • text = "no"; Là số comment của bài viết đó. Nếu muốn hiển thị số comment thì bạn thay "no" thành "comments"
  • numposts = 10;  Là số bài viết hiển thị
  • summaryFontsize = 10; //kích thước của chữ trên tiện ích.
  • home_page = "http://namkna.blogspot.com/"; Là địa chỉ blog bạn muốn hiện thị bài viết bạn có thể thay thành địa chỉ blog của bạn hoặc bất kỳ trang nào bạn muốn (chỉ lấy bài của những trang có feed nha) 
  • label = "Blogspot Recent post"; Là nhãn bạn muốn hiện thị bài viết chứa trong đó. Hãy thay phần tô màu thành nhãn của bạn. (nếu hiển thị theo bài viết của toàn blog thì không cần quan tâm phần này).
  • Nếu bạn muốn hiển thị theo từng nhãn thì hãy thay file script trên (recent_post_spy.js ) thành
    http://dl.dropbox.com/u/70549761/File-phu/namkna-blogspot-com/recent_label_spy.js

4. Cuối cùng Lưu tiện ích lại và quay trở lại .
(Fandung)