Bài đăng phổ biến hiệu ứng rơi

Bài đăng phổ biến hiệu ứng rơi
Bài đăng phổ biến là tiện ích sẵn có của blog và cũng có khá nhiều cách tùy biến cho khỏi nhàm chán của các blogger.Sau đây tôi trình bầy 1 cách mà tôi thấy cũng khá bắt mắt đó là tạo hiệu ứng rơi cho tiện ích bài đăng phổ biến.

Để tạo tiện ích popula posts effects fall này trước tiên ta phải thêm tiện ích sẵn có của blog trong phần thêm tiện ích của blog.
Sau đó cần thêm 1 tiện ích mới.Trong tiện ích mới ta dán đoạn code sau vào rồi lưu lại. Và đặt tiện ích mới này ngay trên tiện ích bài đăng phổ biến mà ta vừa lấy ra.
CODE
<style type="text/css" media="screen">

#PopularPosts1 {
overflow:hidden;
margin-top:5px;
padding:0px 0px;
height:400px;

}

#PopularPosts1 ul {
width:280px;
overflow:hidden;
list-style-type: none;
padding: 0px 0px;
margin:0px 0px;
}




#PopularPosts1 li {
width:260px;
padding: 5px 5px;
margin:0px 0px 5px 0px;
list-style-type:none;
float:none;
height:80px;
overflow: hidden;
background:#fff url(https://lh5.googleusercontent.com/-Ikmzc8tEsjc/UXlJftvV3AI/AAAAAAAAYtc/pgLYBEJ3JkI/s211/post.jpg) repeat-x;
border:1px solid #ddd;
}

#PopularPosts1 li .item-title {
color:#A5A9AB;
font-size:1em;
margin-bottom:0.5em;
}

#PopularPosts1 li .item-title a {
text-decoration:none;
color:#4B545B;
font-size:14px;
height:18px;
overflow:hidden;
margin:0px 0px;
padding:0px 0px 2px 0px;
}

#PopularPosts1 li img {
float:left;
margin-right:5px;
background:#EFEFEF;
border:0;
}

#PopularPosts1 li .item-snippet {
overflow:hidden;
font-family:Tahoma,Arial,verdana, sans-serif;
font-size:10px;
color:#262B2F;
padding:0px 0px;
margin:0px 0px;
}

#PopularPosts1 .item-snippet a,
#PopularPosts1 .item-snippet a:visited {
color:#3E4548;
text-decoration: none;
}

#PopularPosts1 .spyWrapper {
height: 100%;
overflow: hidden;
position: relative;
}

#PopularPosts1 {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
}

.tags span,
.tags a {
-webkit-border-radius: 8px;
-moz-border-radius: 8px;
}

a img {
border: 0;
}

-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(function () {
$('.popular-posts ul').simpleSpy();
});
</script>
<script type='text/javascript'>
//<![CDATA[
eval(function(p,a,c,k,e,r){e=function(c){return(c<a?'':e(parseInt(c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!''.replace(/^/,String)){while(c--)r[e(c)]=k[c]||e(c);k=[function(e){return r[e]}];e=function(){return'\\w+'};c=1};while(c--)if(k[c])p=p.replace(new RegExp('\\b'+e(c)+'\\b','g'),k[c]);return p}('(3(e){e.p.q=3(c,d){c=c||4;d=d||r;s 8.l(3(){m b=e(8),9=[],7=c,g=0,2=b.f(\'> 6:t\').2();b.f(\'> 6\').l(3(){9.u(\'<6>\'+e(8).v()+\'</6>\')});g=9.w;b.x(\'<y z="A" />\').B().n({2:2*5});b.f(\'> 6\').C(\':D(\'+(c-1)+\')\').o();3 h(){m a=e(9[7]).n({2:0,i:0,E:\'F\'}).G(b);b.f(\'> 6:H\').j({i:0},k,3(){a.j({2:2},k).j({i:1},k);e(8).o()});7++;I(7>=g){7=0}J(h,d)}h()})}})(K);',47,47,'||height|function|||li|currentItem|this|items||||||find|total|spy|opacity|animate|1000|each|var|css|remove|fn|simpleSpy|4000|return|first|push|html|length|wrap|div|class|spyWrapper|parent|filter|gt|display|block|prependTo|last|if|setTimeout|jQuery'.split('|'),0,{}))
//]]>
</script>

Đơn giản vậy thôi
Nhận xét

Không có nhận xét nào :