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

Bài viết này mình sẽ lại giới thiệu cho các bạn một ứng dụng khác nữa của jQuery cho tiện ích Recent posts. Với hiệu ứng ẩn hiện mô tả bài viết (ảnh thumbnail và phần tóm tắt) khi ta click chuột vào thanh header tương ứng của bài viết đó.

Hình ảnh minh họa

Bắt đầu thủ thuật :

1. Vào Thiết kế

2. Vào Chỉnh sửa 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://mothuthuat.com/codeblogspot/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 ở trên thành link bên dưới:

http://mothuthuat.com/codeblogspot/j-post-fix.js

* Toàn bộ file của thủ thuật : http://www.mediafire.com/?9utryhpoommdxja

Chúc các bạn thành công.

Phan Dũng