Tiện ích "Recent posts" với hiệu ứng trượt từ jQuery



Bắt đầu thủ thuật:
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đọan code bên dưới vào trước thẻ đóng </head>

<script type="text/javascript" src="http://www.webdesignerwall.com/demo/jquery/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function(){

$(".accordion h3:first").addClass("active");
$(".accordion p:not(:first)").hide();

$(".accordion h3").click(function(){
$(this).next("p").slideToggle("slow")
.siblings("p:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});

});
</script>

<style type="text/css">
.accordion {
width: 480px;
border-bottom: solid 1px #c4c4c4;
}
.accordion h3 {
background: #e9e7e7 url(http://www.webdesignerwall.com/demo/jquery/images/arrow-square.gif) no-repeat right -51px;
padding: 7px 15px;
margin: 0;
font: bold 120%/100% Arial, Helvetica, sans-serif;
border: solid 1px #c4c4c4;
border-bottom: none;
cursor: pointer;
}
.accordion h3:hover {
background-color: #e3e2e2;
}
.accordion h3.active {
background-position: right 5px;
}
.accordion p {
background: #f7f7f7;
margin: 0;
padding: 10px 15px 20px;
border-left: solid 1px #c4c4c4;
border-right: solid 1px #c4c4c4;
}
</style>

4. Save template.
5. Tạo 1 widget HTML/Javascript rồi dán code bên dưới vào:

<script language="JavaScript">
imgr = new Array();
imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

jimgwidth = 80;
jimgheight = 80;
jfntsize = 12;
jacolor = "#E67C15";
jaBold = true;

jtext = "Comments";
jshowPostDate = true;

jsummaryPost = 200;
summaryFontsize = 12;
summaryColor = "#000";

numposts = 6;
label = "Film";
home_page = "http://fandung.blogspot.com/";

</script>

<div class="accordion">
<script src="http://fandung.110mb.com/JS-files/recent-post-Jquery/accordion/j-label-fix.js" type="text/javascript"></script>
</div>
- Tùy chỉnh lại những đọan code im đậm cho phù hợp với blog của bạn.(xem các thủ thuật recent posts cơ bản để hiểu rõ hơn)
- Nếu muốn hiển thị bài viết cho cả blog thì đổi link javascript(code màu xanh) ở trên thành link bên dưới:

http://fandung.110mb.com/JS-files/recent-post-Jquery/accordion/j-post-fix.js

Tham khảo hiệu ứng jQuery từ Web Designer Wall
Chúc các bạn thành công.

=============
Theo Fandung

1 comments:

Beben said...

cool, but its just for one label right???
hmmm...

Post a Comment