Thủ thuật bài mới nhất có ảnh thumb hiệu ứng jquery

Trước đây mình có giới thiệu cùng các bạn một tiện ích bài mới nhất có ảnh thumb cùng với hiệu ứng jquery. Và cũng chính là thủ thuật bài mới nhất có ảnh thumb mà mình định giới thiệu với các bạn ở đây. Với bài viết này thì hiệu ứng nó có khác hơn so với thủ thuật trước. Thủ thuật này chỉ hiển thị tiêu đề bài viết cùng với ảnh của bài viết đó dạng ảnh thumb. Hơn nữa thủ thuật này cũng có hiệu ứng khác trước, nếu tiện ích ban đầu là bài viết chạy từ dưới lên thì thủ thuật này sẽ cho bài viết rớt từ trên xuống và có hiệu ứng rất đẹp mắt. Để thấy rỏ hơn về thủ thuật này thì bạn hãy xem phần mô tả ở bên dưới.

Xem Demo

Ảnh minh họa:

☼ Bắt đầu thủ thuật này

1. Đăng nhập tài khoản blogger
2. Tạo thêm 1 HTML/Javascript
3. Thêm code bên dưới vào phần tử trên

<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/AVvXsEgUYwFW2SdFJ_jnPa6goNQSmsJuEdIIKB4X4QfIglxI6pC9WRvGtkK1s4wKVcg0vWwwa_T2kXlQV_gWglZRyYPaoyeE4Yg3vkKloUImrTn76LriZuf-kI4j56QAnTwilhO3nxMQ-Liu47b3/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; //số bài trình diễn
intervalspy = 4000; //tốc độ chuyển đổi bài viết
showRandomImg = true;
boxwidth = 255;
cellspacing = 0;
borderColor = "#000000";
bgTD = "#fff";
thumbwidth = 60; //độ rộng ảnh thumb
thumbheight = 60; //độ cao ảnh thumb
fntsize = 12;
acolor = "#666";
aBold = true;
icon = " ";
text = "no"; //nếu muốn hiển thị số comment thì bạn thay "no" thành "comments"
showPostDate = false;
summaryPost = 40;
summaryFontsize = 10; //kích thước của text
summaryColor = "";
icon2 = " ";
numposts = 10; //số bài viết hiển thị
label = "Blogspot Recent post"; //nhãn bài viết (nếu hiển thị theo bài viết thì không cần quan tâm)
home_page = "http://namkna.blogspot.com/"; //địa chỉ blog của bạn
</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>

Các bạn nên download file js về TẠI ĐÂY sau đó Upload lên host riêng để dùng lâu dài
Chỉnh code: bạn hãy dựa vào các hướng dẫn trên để chỉnh lại cho phù hợp. Bạn hãy lưu ý phải thay địa chỉ trên thành địa chỉ blog của bạn.

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 save lại.

Chủ đề: