Pro page

40
Nhận xét

[ Yêu cầu ] : Trình diẽn bài viết dạng Slide với jQuery (cập nhật)

| by Phan Dũng | views

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

Theo yêu cầu của Yêu Sức Khỏe (yeusuckhoe.blogspot.com)
[FD's BlOg] - Đây là 1 thủ thuật mà bên BlOg YSK đã có nhờ mình thử nó với blogger từ lâu, nhưng bây giờ mới test và giới thiệu cho mọi người. Ở bài viết này mình sẽ phổ biến thủ thuật ở dạng thủ công, tức là tự add các bài viết theo ý muốn của mình. Còn việc tự cập nhật bài viết mình sẽ test thử sau, nếu thành công sẽ post bài hướng dẫn.

Cập nhật bản auto (tự động cập nhật bài viết) - (7/7/2009)


Xem demo của thủ thuật : LIVE DEMO

Hình minh họa thủ thuật:

☼ Giới thiệu sơ về thủ thuật:
- Thủ thuật sử dung jQuery để hiển thị các bài viết.Có 2 phần, phần bên trái là phần hiển thị, phần bên phải là danh sách các bài viết. Bình thường thủ thuật sẽ tự thay đổi bài viết trong 1 khoảng thời gian nhất định, tùy vào mình cài đặt. Khi nhấp vào 1 bài viết nào trong phần bên phải, thì bài viết sẽ hiển thị ảnh thumbnail lớn vào tiêu đề (hoặc có thể là đoạn mô tả nhỏ về bài viết) ở phần bên trái.

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

<script src="http://data.fandung.com/blog/demo/slide-jQuery/cty_files/jquery.js" type="text/javascript"></script>
<script src="http://data.fandung.com/blog/demo/slide-jQuery/cty_files/jquery-ui.js" type="text/javascript"></script>

<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({
fx: {
opacity: "toggle"
}
}).tabs("rotate", 3000, true);
});
</script>

<style type="text/css">

#featured{
/* width:400px;
padding-right:250px; */
position:relative;
border:1px solid #ccc;
height:252px;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:340px;
list-style:none;
padding:0; margin:0;
width:210px;
}
#featured ul.ui-tabs-nav li{
padding:1px 0; padding-left:13px;
font-size:12px;
color:#666;
}
#featured ul.ui-tabs-nav li img{
float:left; margin:2px 5px;
background:#fff;
padding:2px;
border:1px solid #eee;
}
#featured ul.ui-tabs-nav li span{
font-size:11px; font-family:Verdana;
line-height:12px;
color:#034E8F;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:48px;
color:#333; background:#fff;
line-height:20px;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://data.fandung.com/blog/demo/slide-jQuery/selected-item.gif') left -5px no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:337px;
height:251px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
top:196px;
left:2px;
height:55px;
width:336px;
background:url('http://data.fandung.com/blog/demo/slide-jQuery/transparent-bg.png') repeat;
}
#featured .info h2{
font-size:12px; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0;
overflow:hidden;
}
#featured .info p{
margin:0 5px;
font-family:Verdana; font-size:11px;
line-height:15px; color:#f0f0f0;
}
#featured .info a{
text-decoration:none;
color:#fff;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
#featured .ui-tabs-nav-item img{
height:37px;
width:55px;
}
</style>

- Số 3000 ở trên chính là thời gian thay đổi bài viết, tính bằng ms (mini giây)

4. Save template.
5. Tạo 1 widget HTML/Javascript và dán code của thủ thuật vào.

<div id="featured">

<ul class="ui-tabs-nav">

<li class="ui-tabs-nav-item" id="nav-fragment-1">
<a href="#fragment-1">
<img src="link anh bai viet 1" alt=""/>
<span>{Tieu de bai viet 1}</span>
</a>
</li>


<li class="ui-tabs-nav-item" id="nav-fragment-2">
<a href="#fragment-2">
<img src="link anh bai viet 2" alt=""/>
<span>{Tieu de bai viet 2}</span>
</a>
</li>

<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-3">
<a href="#fragment-3">
<img src="link anh bai viet 3" alt="">
<span>{Tieu de bai viet 3}</span>
</a>
</li>

<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-4">
<a href="#fragment-4">
<img src="link anh bai viet 4" alt="">
<span>{Tieu de bai viet 4}</span>
</a>
</li>

<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-5">
<a href="#fragment-5">
<img src="link anh bai viet 5" alt="">
<span>{Tieu de bai viet 5}</span>
</a>
</li>

</ul>


<div style="" id="fragment-1" class="ui-tabs-panel ui-tabs-hide">

<a style="color: rgb(255, 255, 255);" href="link bai viet 1">
<img src="link anh bai viet 1" alt="" width="337" height="250"/>
</a>

<div class="info">
<h2><a href="link bai viet 1">{Tieu de bai viet 1}</a></h2>
<p></p>
</div>
</div>

<div style="" id="fragment-2" class="ui-tabs-panel ui-tabs-hide">

<a style="color: rgb(255, 255, 255);" href="link bai viet 2">
<img src="link anh bai viet 2" alt="" width="337" height="250"/>
</a>

<div class="info">
<h2><a href="link bai viet 2">{Tieu de bai viet 2}</a></h2>
<p></p>
</div>
</div>

<div style="" id="fragment-3" class="ui-tabs-panel ui-tabs-hide">

<a style="color: rgb(255, 255, 255);" href="link bai viet 3">
<img src="link anh bai viet 3" alt="" width="337" height="250"/>
</a>

<div class="info">
<h2><a href="link bai viet 3">{Tieu de bai viet 3}</a></h2>
<p></p>
</div>
</div>

<div style="" id="fragment-4" class="ui-tabs-panel ui-tabs-hide">

<a style="color: rgb(255, 255, 255);" href="link bai viet 4">
<img src="link anh bai viet 4" alt="" width="337" height="250"/>
</a>

<div class="info">
<h2><a href="link bai viet 4">{Tieu de bai viet 4}</a></h2>
<p></p>
</div>
</div>

<div style="" id="fragment-5" class="ui-tabs-panel ui-tabs-hide">

<a style="color: rgb(255, 255, 255);" href="link bai viet 5">
<img src="link anh bai viet 5" alt="" width="337" height="250"/>
</a>

<div class="info">
<h2><a href="link bai viet 5">{Tieu de bai viet 5}</a></h2>
<p></p>
</div>
</div>

</div>

- Thay đổi các link liên kết, ảnh, tiêu đề của bài viết theo đúng như nội dung bạn muốn hiển thị.

☼ Cập nhật bản Auto, tự động cập nhật bài viết theo từng nhãn, hoặc cho cả blog.
(Cập nhật ngày 7/7/2009)
- Ở phần trên, khi muốn hiển thị chúng ta phải add từng bài viết vào. Hơi mất công 1 chút. Nhưng việc này lại có ích nếu ta chỉ muốn hiển thị 1 số bài viết nổi bật nào đó trong blog của mình.
- Còn ở phần này mình sẽ giới thiệu 1 cách để thủ thuật tự động cập nhật các bài viết cho các bạn. Thực ra đây cũng là thủ thuật Recent posts thôi, nhưng ở đây mình chỉnh sửa file JS lại để áp dụng được cho thủ thuật này.
- Tùy theo yêu cầu của các bạn, có thể lựa chọn cách thủ công hoặc tự động.

Xem demo ở đây : LIVE DEMO

Còn đây là hình ảnh mình đã thực hiện:


- Tương tự như ở phần thủ công, phần này bạn cũng thực hiện các bước tương tự từ bước 1 đến bước 4 như ở trên.
- Đến bước 5 thì code sẽ hoàn toàn khác. Bạn tạo 1 widget HTML/Javascript và dán đoạ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 = false;

fntsize = 12;
acolor = "#E67C15";
aBold = true;


text = "comments";
showPostDate = true;

summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";

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

</script>

<div id="featured">

<script src="http://data.fandung.com/blog/demo/slide-jQuery/auto-jquery/slide-j1.js" type="text/javascript"></script>
<script src="http://data.fandung.com/blog/demo/slide-jQuery/auto-jquery/slide-j2.js" type="text/javascript"></script>

</div>

- Do hiệu chỉnh phần CSS của thủ thuật hơi phức tạp, nên mình khuyên các bạn giữ nguyên bố cục của thủ thuật này là hiện thị 5 bài. Tức là giữ nguyên đoạn code màu đỏ (numposts =5;)
- Các file JS trên là để hiển thị các bài viết của 1 nhãn nào đó, nếu các bạn muốn hiển thị cái bài viết mới của cả blog thì đổi file javascript lại như bên dưới (lưu ý : phải giữ đúng thứ tự của các file javascript)

<script src="http://data.fandung.com/blog/demo/slide-jQuery/auto-jquery/post-slide-j1.js" type="text/javascript"></script>
<script src="http://data.fandung.com/blog/demo/slide-jQuery/auto-jquery/post-slide-j2.js" type="text/javascript"></script>

- Muốn thay đổi màu chữ của tiêu đề bài viết ở phần bên trái, các bạn chỉnh sửa trong đoạn code CSS như bên dưới :

#featured .info a{
text-decoration:none;
color:#f00;
font-size:13px;

- Một vài lưu ý khác về việc hiển thị :

trước tiên hãy xem hình mình họa này
a. Ở phần bên phải :
- trong hình ta thấy phần post summary nằm trong class #featured .ui-tabs-panel .info , hãy điều chỉnh số kí tự của phần summary post để nó không bị tràn ra khỏi khung hiển thị. Nếu muốn mở rộng phần hiển thị này (tăng chiều cao) , bạn hãy thay đổi 2 đoạn code màu đỏ như bên dưới :

#featured .ui-tabs-panel .info{
position:absolute;
top:196px;
left:2px;
height:55px;
width:336px;
background:url('http://data.fandung.com/blog/demo/slide-jQuery/auto-jquery/transparent-bg.png') repeat;
}

- Lưu ý196px + 55px = 251px , với 251px là chiều cao của vùng hiển thị ảnh của bài viết. (trong hình minh họa mình có điều chỉnh hơi khác so với code gốc 175px + 75px = 251px)

b. Phần bên trái :
- Tương tự, phần bên trái sẽ gồm 2 phần, ảnh thumbnailtiêu đề bài viết. Và ta lưu ý là khi tiêu đề của bài viết quá dài thì nó sẽ bị tràn ra khỏi khung hiển thị, như thế sẽ rất xấu. Vì thế hãy mở rộng vùng hiển thị này ra, bảo đảm sao cho tiêu đề dài nhất cũng ko bị tràn.
- Để mở rộng vùng hiển thị này, bạn hãy tìm tới đoạn code CSS như bên dưới :

#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:340px;
list-style:none;
padding:0; margin:0;
width:210px;
}

Thay đổi đoạn code màu đỏ là được.
- Và kích thước ảnh thumbnail ở phần này có thể điều chỉnh ở đoạn code bên dưới:

#featured .ui-tabs-nav-item img{
height:37px;
width:55px;
}

Tuy nhiên mình có lời khuyên, tốt nhất là giữ nguyên như thế, nếu bạn thay đổi nó thì sẽ làm ảnh hưởng nhiểu tới việc hiển thị của tiện ích. Do đó nếu ai thật sự rành về việc canh chỉnh các kích thước trong code CSS thì mới làm việc này.

Tham khảo source từ site ctyhanlamvien
Chúc các bạn thành công.


Enter your mail address:

40

7/7/0
7/09
11:46
Yeusuckhoe

Thủ thuật này tuyệt quá, thanks FD nhều. Cứ xài đỡ , rồi chờ bản cập nhật sau. :D

7/7/0
7/09
11:54
fandung 2

anh thử xem có lỗi gì ko nha, em cũng định hướng đc về bản tự cập nhật bài viết rồi, nhưng chưa test :D

KO biết có chạy đc ko nữa :D

7/7/0
7/09
12:29
Yeusuckhoe 3

Có lỗi thiếu 3 /div cho các fragment, thiếu 1 /div fragment-1, /div fragment-2, /div fragment-3

7/7/0
7/09
12:41
danghienIT 4

Cái này phải thử ngay mới được! =))

7/7/0
7/09
15:26
fandung 5

uh nhỉ, thanks anh YSK :D

7/7/0
7/09
17:50
fandung 6

Đã test thành công thủ thuật này với việc tự cập nhật bài viết.

Ảnh minh họa :

http://img.photo.zing.vn/file_uploads/gallery/w642h/q42008/2009/07/07/05/39961246963660.gif

Giờ mình mắc đi chơi thể thao gòi :D, tối về sẽ post bài sau.

C U again :)

8/7/0
7/09
14:20
mon 7

hay qua'

9/7/0
7/09
00:04
Mecuoi 8

Mình muốn làm thanh menu giống trang vnexpress.net , thì làm thế nào hả bạn fan dũng. Cám ơn trước nghen.

9/7/0
7/09
07:45
fandung 9

@Mecuoi : chắc đc, để mình thử :D

9/7/0
7/09
11:31
keosoft90 10

hi bro mình muốn nhờ bro tối ưu hoá để slide chỉ hiển thị slide bên trái, ko muốn hiển thị cột các thumbail

9/7/0
7/09
16:32
fandung 11

@keosoft90 : cái khung của nó là như vậy, không chỉnh được bạn. nếu bỏ phần bên trái có thể slide ko chạy.

10/7/
7/09
09:50
keosoft90 12

hi, tai em lam thi no cu bi tran ra ngoai khung hien thi, nen ko dep

10/7/
7/09
14:59
Phan Dũng 13

@keosoft90 : em mở rộng nó ra, như anh hướng dẫn ở trên đó (width:210px;) đó, em mở rộng ra thì tiêu đề không bị tràn nữa

11/7/
7/09
07:47
Tiếng Khmer Online 14

Còn một hạn chế thì phải, khi nhấp chuột vào link bên phải thì không có tác dụng chỉ nhấp vào hình thì mới đến được bài viết thôi. Mong tác giả sớm bổ sung! Thanks!

11/7/
7/09
09:55
fandung 15

@Trai miền Tây : cám ơn ý kiến của bạn, nhưng đó ko phải là hạn chế, mà đó chính là thủ thuật của tiện ích này.

Như bạn thấy, khi ta nhấp vào link bên trái, mấu chốt của việc click vào link này không phải là để đưa bạn tới liên kết đó, mà muốn show chi tiết vài viết ở bên phải. Và bên phải sẽ có link liên kết đưa ta tới bài viết đó.

Nếu như bạn nói, khi nhấp vào link bên trái mà có tác dụng thì tiện ích này mất tác dụng, mất tác dụng tức là khi ta click vào link thì nó đã nhảy sang trang trang đích, không còn ở trang hiện hành, tức là không cho thấy được việc show chi tiết của bài viết ở bên phải.

Và cái cuối cùng là nếu dẫn link cho phần bên trái thì có vẻ hơi thừa, do phần bên phải đã có tới 2 liên kết tới bài viết rồi. 1 là liên kết nằm trong ảnh, 2 là liên kết nằm ở tiêu để trong phần mô tả của bài viết.

14/7/
7/09
09:54
LouLou 16

cái này cũng hay mờ đẹp nữa
bắt đầu bực bác fD rùi đây, toàn thủ thuật show đẹp ko bít chọn cái nào X( X( X(

14/7/
7/09
10:43
Phan Dũng 17

@LouLou : :D

30/7/
7/09
16:56
Quang Minh 18

Hay quá, nhưng có thể nào làm giống như trang http://khonggianit.vn/ dc ko?

30/7/
7/09
20:49
fandung 19

@Quang Minh : sẽ test :D

30/7/
7/09
21:03
Phan Dũng 20

@Quang Minh :sẽ test

30/9/
9/09
19:14
ucmasnb 21

Anh Dũng ơi có thể ẩn nó ở trang chủ và cho nó hiện khi đọc bài viết không anh >?<

13/10
0/09
01:31
Cafe Sound 22

Thủ thuật hay quá, nhưng blog mình cho vô nó có vẻ k hợp, thanks FD

5/1/1
1/10
21:19
Khách (ẩn danh) 23

Thực ra nguồn gốc code này ở đây các bạn nè:
http://www.ajaxprojects.com/ajax/tutorialdetails.php?itemid=637

11/4/
4/10
19:52
salomit.tk 24

Vui Lòng Xem lại File http://fandung.110mb.com/slide-jQuery/post-slide-j2.js
và mấy file đó giúp tớ cái

8/10/
0/10
02:54
Khách (ẩn danh) 25

mấy file js die rồi bạn ơi, cho mình xin file dc ko bạn! thanks nhìu!

8/11/
1/10
16:49
Fishers Of Men 26

cho minh dc hoi la cai file .js cua fandung sao vay ?

29/11
1/10
22:35
Khách (ẩn danh) 27

toàn bộ link die hết rồi bác phandung update lại giúp anh em đi

29/11
1/10
22:43
Viet Trinh 28

Nguồn gốc chính là ở đây http://webdeveloperplus.com/jquery/featured-content-slider-using-jquery-ui/

Nhưng cái quan trong là bác phandung đã mang về đây và dịch lại thành tiếng việt + hướng dẫn chi tiết anh em nào không rành về lập trình như tôi cũng có thể hiểu các bước làm

26/5/
5/11
23:23
Hồ Vũ Tuấn Anh 29

không có cách gì hiển thị hơn 5 bài à
numposts > 5 đều vô tác dụng

27/5/
5/11
00:19
Phan Dũng 30

@Hồ Vũ Anh Tuấn : mình có nói trong bài hướng dẫn rồi mà bạn, do điều chỉnh CSS hơi khó, nên trong file JS mình chỉ cho hiển thị 5 bài thôi. Nếu bạn muốn hiển thị nhiều hơn 5 bài thì bố cục của thủ thuật bị vỡ

27/5/
5/11
00:36
Phan Dũng 31

@Trinh : bạn nói sai rồi, mình ko hề tham khảo bài viết từ website bạn đưa.

Thứ 1, trong bài viết mình có trích dẫn là có tham khảo source từ website ctyhanlamvien.com tức là mình lọc đã lọc code từ side này hoàn toàn bằng tay.

Thứ 2 - đây là thủ thuật yêu cầu, và người yêu cầu cũng giới thiệu trang web ctyhanlamvien.com để mình tạo slide giống như của họ.

Thứ 3 - trang web bạn đưa ko hề có hướng dẫn cho việc áp dụng slide này cho tiện ích recentposts của blogger. Mà cái chính của thủ thuật này là việc áp dụng nó cho tiện ích recent posts. Không ai lại tạo slide này bằng tay cả.

Như vậy bạn lấy cơ sở nào bạn để nói là mình lấy bài viết của họ về và dịch chứ.

PS: Tuy bạn comment cũng đã lâu, nhưng mình cũng phải comment đính chính lại cho đúng.

14/6/
6/11
16:25
6 mét vuông 32

bác Fan ơi! sao ảnh lớn bên trái của em nó chạy ra khỏi khung rồi đi qua bên góc dưới bên phải của widget luôn! làm sao bây giờ. Hình như nó lớn quá

9/7/1
7/11
12:51
Thanh Nguyễn 33

Có cách nào để rút gọn tiêu đề của dòng bên phải không vậy bác! Tiêu đề các bài viết của e thường hơi dài nên nó tràn ra xấu quá!

29/8/
8/11
11:54
Ác Quỷ™ 34

sao ảnh to bên cạnh không hiện vậy

18/11
1/11
20:20
duong duyen van 35

Bạn ơi. Bạn có thể share cho mình 2 file js post-slide-j1.js vs post-slide-j2.js được không. Mình chỉ mới bắt đầu với lập trình js và đang vọc thử blogspot. Bạn share cho mình được học hỏi thêm nhé. Mình cần lắm...Cảm ơn bạn! Vanduong061@yahoo.com

7/12/
2/11
10:21
Vịnh 36

Anh Dũng ơi! Chỉ em sửa lỗi font chữ khi blog xem ở trình duyệt IE và Firefox dùm em với? (http://mienphitheme.blogspot.com/)

7/12/
2/11
10:22
Vịnh 37

À! Nếu được chỉ em sửa lỗi hiển thị trang tĩnh luôn nha! Em cảm ơn anh nhiều!...

16/12
2/11
03:31
Điện Tử ChipKool 38

bài viết slice này giống recent post yahu,lâu lắm rồi chip ko dùng,chỉ cần thay đổi thời gian ,xóa boder là oke.hehehe

9/2/1
2/12
01:39
TinTucVip.Net 39

Mình thấy Dũng code ra plugin (m gọi vậy cho dễ) này rất hay đó, mà mình test thử thấy chỉ làm được 1 lable, Dũng hãy chỉ mình tự động lấy tất cả nhãn được ko

label = "Film";
Giờ muốn all lable luôn thì ghi sao bạn
Mình viết cách bằng dấu (,) lỗi
Viết ra từng dòng củng lỗi
Thanks Dũng

9/2/1
2/12
19:43
Unknown 40

mình muốn làm giống trang này có được ko bạn http://yume.vn/



☺ 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

Newer Posts Older Posts Home