Recent Post - Thủ thuật Recent post load từ trên xuống cho BLogger
Với thủ thuật blogger cực kỳ chuyên nghiệp này, hỗ trợ hiệu ứng tải trình tự đẹp mắt, chắc chắc quá trình thiết kế website của bạn sẽ trở nên hoàn hảo.
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/AVvXsEitnE2agmdUC050U9WByawXE2K0xLi7m1y5QQlmpTc7Utx6oVDgD3W7did3WJ0QXseG6PYB1GIpFz7puoiTSMmUr29ceo0zQSsIGaPWlSXPdD2jJgcTgF0QtbvodY8WxoLe_K76omoas6Lv/); /* 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://thietkewebplus.googlecode.com/files/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 = "Thủ thuật"; //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.thietkeblogger.net/"; //địa chỉ blog của bạn
</script>
<div id="spylist">
<script src="http://thietkewebplus.googlecode.com/files/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.js ) thành
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://thietkewebplus.googlecode.com/files/recent_label_spy.js
4. Cuối cùng save lại.
Nguồn: In4mau.blogspot.com
Không có nhận xét nào: