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

(Traidatmui.com) – 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.

☼ 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(http://lh4.ggpht.com/_BTztXRwC9ik/TGVMfX25boI/AAAAAAAACxE/ijgYEruq2Yw/vff.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://data-traidatmui.appspot.com/scripts/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 = "Advanced blogger"; //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://www.traidatmui.com/"; //địa chỉ blog của bạn

</script>

<div id="spylist">
<script src="http://data-traidatmui.appspot.com/scripts/recent_post_spy.js" type="text/javascript"></script></div>

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.j ) thành
http://data-traidatmui.appspot.com/scripts/recent_label_spy.js

4. Cuối cùng save lại

Chúc thành công

Xem khác cùng chủ đề

9 nhận xét | Viết lời bình

8/30/2010 06:40:00 SA Trả lời

Anh Dinh ơi! hình như file *.js cho từng nhãn ko hoạt động đc, anh cho em xin cái link khác đc ko?

Admin
8/30/2010 07:53:00 SA Trả lời

Em hãy sử dụng link trên, nó đã hoạt động tốt.

Chào em

Admin
10/24/2010 04:36:00 SA Trả lời

Bạn xem bài viết này nhe!

Thân!

2/08/2011 10:32:00 CH Trả lời

tiện ích nay anh thấy font chữ nó hới có cái gì đó không ổn không, hình như nó hơi bị nhòe ;))

Admin
2/08/2011 11:04:00 CH Trả lời

Đúng là như zậy, nếu em dùng trình duyệt IE thì chữ nó sẽ không rỏ, tuy nhiên đối với Firefox và một số trình duyệt khác thì rất tốt. Điều này a chưa có thời gian khắc phục được.

5/02/2011 06:08:00 SA Trả lời

mình muốn thay màu nền bằng màu thì sao bạn ? ko dùng ảnh nền

Admin
5/02/2011 06:29:00 SA Trả lời

Nếu không muốn dùng ảnh làm nền thì bạn có thể thay thuộc tính background ở trong code css phần #spylist li { trên thành background: #000000; . Phần #000000 chính là mã màu bạn muốn làm nền, bạn có thể xem tại đây

7/31/2012 07:46:00 CH Trả lời

Đình ơi, sao giờ code này nó hết chuyển động bài viết rồi, giờ nó đứng im luôn. Lúc trước thì có nhưng 2,3 hôm nay kiểm tra thì ko thấy nữa. Khắc phục làm sao?
Mình hỏi thêm: Hiện tại mình đang dùng wiget mặc định của blogger là Bài đăng phổ biến. Bây giờ mình muốn cho nó cái hình nền backgroud thì mình thêm đường dẫn backgroud cho nó ở chỗ nào?
Hướng dẫn giúp mình nhé!
Thanks bạn

Admin
8/03/2012 06:01:00 SA Trả lời

Có thể bạn đã thêm thủ thuật nào đó có chứa file jquery.min nên nó không ưa rồi. Bình thường trong temp bạn chỉ cần có 1 file jquery.min mới thì có thể dùng cho các thủ thuật có liên quan jquery

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang