TIỆN ÍCH BÀI VIẾT VỚI HIỆU ỨNG RƠI TỪ TRÊN XUỐNG

Để gắn tiện ích bài viết mới có kèm ảnh với hiệu ứng "rơi" từ trên xuống, các bạn cần làm các bước sau:

Đầu tiên, bạn đăng nhập Blog > chọn Thiết kế > chọn Thêm tiện ích > Thêm HTML/Javacript, sau đó dán tất cả các code này và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/AVvXsEifeAcfk0KZ9auZZWpivvn2T_3eEPpHcX_Xyr25A3pkaYzwSbAE7M9szRyloWW70u5MeRgxI70Sj639lDdgN2tkJXI28vLi6mvoS6dMb164hLjWOpljxyKv8YO8LwgBEOi075cNWxSJTVgw/); /* 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/66348944/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.dungheineken.blogspot.com/"; //địa chỉ blog của bạn

</script>

<div id="spylist"><script src="http://dl.dropbox.com/u/66348944/recent_post_spy.js" type="text/javascript"></script></div>

Sau đó, bạn thay đổi địa chỉ Blog của bạn và bạn có thể thay đổi các tùy chỉnh như trên code đã chú thích để chọn cho mình một tiện ích đẹp nhất nha. Cuối cùng bấm lưu lại và quay trở lại Blog xem kết quả. 

Ở code trên thì thủ thuật này sẽ hiển thị tất cả các bài ở Web/Blog, nếu muốn thủ thuật chỉ hiển thị ở một nhãn nhất định, bạn thay thế dòng code cuối cùng (màu đỏ) thành đoạn code như sau:

  

https://dl.dropbox.com/u/66348944/recent_label_spy.js

Với mã code ở trên thì chúng ta sẽ có tiện ích giống như thế này:




Xem thử