Loading post navigation ...
 
 

Pro page

17
Nhận xét

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

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

[FD's BlOg] - 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 đó.
Xem demo ở đây : LIVE DEMO

Hình ảnh minh họa :


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://data.fandung.com/js/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://www.fandung.com/";

</script>

<div class="accordion">
<script src="http://data.fandung.com/js/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://data.fandung.com/js/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.


Enter your mail address:

17

Max4download

quá tuyệt , với sideshow này ko phải add link , image thủ công :D

Net360VT

Hay quá rất gọn gàng va đẹp mắt. good!thanks FD

Khách (ẩn danh)

Bạn ơi thủ thuật hiện đường dẫn "» Home » Thu Thuat Blog" ở đâu vậy.

fandung

@abc :bạn tham khảo bài viết này :
http://fandung.blogspot.com/2009/05/tao-thanh-navbar-breadcrumb-on-gian-cho.html

share4vnn.tk

điểm 10 cho chất lượng :D

LouLou

đùa nhiều Recent post xịn wá hoa hết cả mắt chẳng biết nên xài cái nào cho blog đây
cảm ơn bác fd nha

Anh2

Cảm ơn Thủ thuật rất rất thú vị. Qúa hay ! Thanks FanDung nhiều nha!

Admin :

hic , tìm mòn mắt ko thấy mã màu của tiêu đề để đổi :(( , Fan Dung help mình với :|

fandung

@Admin : cái tiêu đề màu cam đó hả bạn, code của nó đây :

jacolor = "#E67C15";

Còn nếu là cái tiêu đề màu đen thì bạn thử thêm đoạn code màu vào class này thử xem :

.accordion h3

Admin :

tiêu đề màu đen bạn à . thêm đoạn .accordion h3 vào chỗ nào hả bạn :| , mình ko biết về javacrip :((

fandung

ko fải bạn à, đây là code CSS

ở trong code trên, bạn sẽ thấy đọan code như bên dưới :

.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;
}

Thêm đọan code in đậm vào như bên dưới :

.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;
color: #f00;
}

Bạn thay đổi trị màu theo ý bạn là được

Admin :

đã làm đc thanks :D

Khách (ẩn danh)

sao mình làm y hệt như vậy mà nó không có hiệu ứng trượt nhỉ, toàn hiện tất cả thôi :(

Phan Dũng

@loc8meng2 : bạn thử xem file demo của mình có chạy được ko. Nếu file demo ko chạy thì là do host 110mb.com , do nó load ko đc file JS nên nó mới hiện tất tần tật ra.

Nếu ko load đc file JS thì bạn download gói file JS của mình về, rồi kiếm file tương ứng của thủ thuật, rồi up lên host riêng của bạn.

Còn nếu file demo mà chạy được, còn bạn làm không chạy thì là do lỗi của bạn, bạn thử kiểm tra lại xem nhé.

ChoiBlog.TK

nghe nói google web có cho up file js mà anh Dũng ? sao anh ko hổ trợ bài viết up file js lên đó cho anh em blogger đi ! cảm ơn bài viết này e thấy thật chuyện nghiệp !

Khách (ẩn danh)

Hi,
Tui muon (ảnh thumbnail và phần tóm tắt) duoc hien thi len phia tren khi click chuột vào thanh header tuong ung. Phai sua lam sao ha ban.
Lam

Tăng Doãn Du

Cái này có thể phân trang được ko bác FD? Nếu được thì làm thế nào hướng dẫn với nhé, thanks b nhiều!



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home