Loading post navigation ...
 
 

Pro page

27
Nhận xét

Tiện ích Recent posts khá ấn tượng với 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 1 style mới cho tiện ích Recent Posts, đó là sẽ tạo thêm button "Xem thêm" bên dưới, khi click vào button này thì sẽ hiển thị thêm các bài viết khác. Với hiệu ứng hiển thị sử dụng từ jQuery. Ngoài việc hiển thị bài viết, ở thủ thuật này mình cũng giới thiệu khung trang trí mẫu cho tiện ích.
Xem demo : LIVE DEMO


Hình ảnh minh họa :


Ở thủ thuật này, khung trang trí mẫu có kích thước cố định, vì thế nếu muốn hiển thị tốt trên blog của bạn, bạn phải chỉnh sửa các hình ảnh của khung mẫu lại cho phù hợp. (Việc chỉnh sửa đơn thuần là dùng các chương trình đồ họa để tăng hoặc giảm kích thước của ảnh)

Bên dưới là 3 file ảnh của khung trang trí, các bạn có thể download về để chỉnh sửa lại :

http://i342.photobucket.com/albums/o433/bkprobk/head.gif
http://i342.photobucket.com/albums/o433/bkprobk/center.jpg
http://i342.photobucket.com/albums/o433/bkprobk/footer.jpg

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

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

<style type="text/css">
*
{
margin:0;
padding:0;
}


#divContainerRight
{
width:300px;
background:#ffffff url(http://i342.photobucket.com/albums/o433/bkprobk/center.jpg) repeat-y top left;
}

#divContainerRightHead
{
width:300px;
background: url(http://i342.photobucket.com/albums/o433/bkprobk/head.gif) no-repeat top left;
}

#divContainerRightFoot
{
width:300px;
height:6px;
background: url(http://i342.photobucket.com/albums/o433/bkprobk/footer.jpg) no-repeat bottom left;
}


#ulrelateArtist
{
list-style-type:disc;
width:270px;
margin:0 auto;
}

#ulrelateArtist li
{

border-bottom:1px dotted #cccccc;
padding-left:5px;
padding-top:10px;
list-style-position:inside;
color:#00A79B;
}

#ulrelateArtist li a
{
color: #009f92;
font-size: 11px;
font-family:Arial;
text-decoration:none;
}

#ulrelateArtist li a:hover
{
color: #009f92;
font-weight: normal;
text-decoration:underline;
}

</style>

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

<div style="margin: 0pt auto; width: 300px; padding-top: 5px;">

<div style="padding-bottom: 5px;">
<div id="divContainerRight">
<div id="divContainerRightHead" class="clearfix">
<div style="line-height: 28px; color: rgb(255, 255, 255); padding-left: 10px; font-weight: 900; font-size:12px;">&nbsp;
</div>

<script language="JavaScript">
imgr = new Array();

imgr[0] = "http://sites.google.com/site/fdblogsite/Home/nothumbnail.gif";

showRandomImg = true;

aBold = true;

numposts = 10; // số bài viết sẽ hiển thị khi click vào button "Xem thêm"
showposts = 5; // số bài viết sẽ được mặc định hiển thị

home_page = "http://fandung.blogspot.com/";
label = "Love";

</script>

<script src="http://data.fandung.com/blog/demo/jQuery-RP/RP_jQuery-post.js" type="text/javascript"></script>

<div id="ctl00_ContentPlaceHolder1_ucMp3Detail1_ucRelateArtistOnSearch1_divButtonArtistNext" style="margin:0pt auto; width: 270px; text-align: right; cursor: pointer; padding-top: 4px; ">Xem thêm <label style="color:rgb(250, 1, 134);">»</label>&nbsp;</div>
</div>
<div id="divContainerRightFoot"></div>
</div>
</div>

- Nếu muốn hiển thị bài viết theo nhãn nào đó thì các bạn đổi file RP_jQuery-post.js thành file RP_jQuery-label.js.
- Và đây là link của file RP_jQuery-label.js :

http://data.fandung.com/blog/demo/jQuery-RP/RP_jQuery-label.js

- Gợi ý nhỏ khi hiển thị các bài viết từ nhãn, các bạn có thể chú thích thêm ở phần header của khung như hình bên dưới :

- Để làm điều này, các bạn tìm đến đoạn code như bên dưới (trong code của thủ thuật), và thêm vào đoạn code màu đỏ như bên dưới:

<div style="line-height: 28px; color: rgb(255, 255, 255); padding-left: 10px; font-weight: 900; ">&nbsp;Love
</div>


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


Enter your mail address:

27

Lê Công Tiến

Cái này để xem thử có áp dụng cho temp mới của blog Tiến ko nhỉ :D

Khách (ẩn danh)

Anh Dung oi em muon an mot so widget o phan man khi doc bai viet thi phai lam sao

templatespost

anh Dũng có nhiều bài hay wa,em hâm mộ a lắm,giúp e cái phần đếm dowload nha a.thanks a nhiều.:D

templatespost

cái phần chèn trước thẻ /head> lỗi gì vậy anh.

templatespost

cái phần chèn trước thẻ /head> lỗi gì vậy anh.

share4vnn

cái này mà gọi là khá ấn tượng à.. phải gọi là rất ấn tượng chứ.. tuy nhiên em thấy nó to hơn cần thiết.. vì những cái này thường được đặt ở bên sidebar.. mà bác làm to quá :D

fandung

@Thuấn : do mỗi template sidebar có độ rộng khác nhau, nên anh ko thể tùy chỉnh cho phù hợp được, cái này phải để mọi người làm thôi.

Với lại trên đó anh có để là khung mẫu thôi mà. Với lại mấy cái ảnh nền này nó lặp lại tuần tự mà, nên mọi người có thể dùng photoshop để làm chúng ngắn lại, đơn giản thôi.

phattrien@so

Sau môt thời gian mình tự phong cho FD chức danh chuyên gia về recent post/. 6-^

fandung

Cám ơn những lời động viên cua anh Chinh

min HMN

hé hé... sau 1 times bận rộn... và tiếp tục sẽ bận rộn... e đã sắm tên miền cho blog... lại bài nữa hay, để e test thử !

Taiki

Tiện ích này cũng hao hao cái ở blog mình nhưng sao phải dùng đến 3 file .js nhỉ, hơi nặng

fandung

@Taiki : cái tiện ích "các bài đã đăng" ở blog của bạn hình như là cái mình giới thiệu cho mọi người.

Nhưng nó và cái này là 2 cái khác nhau bạn à. tuy là hiệu ứng tương tự. Với lại 2 hay 3 file JS là do mình thôi, ta có thể gộp các file JS thành 1 mà.

Taiki

Thì mình dùng cái Dũng giới thiệu chứ đâu :D, cái đó mình thấy là good nhất, vừa tận dụng được cái file jquery của template.

phattrien@so

À, anh hỏi hơi lạc chủ đề. Như cái phần (title) ở dưới blog của em, cái dòng Home - Hỏi dep- Lien ket đó, anh copy code và paste vào HTML/scrip nhưng cái chữ home toàn bị chuyển xuống dưới cho dù anh đã chỉnh sửa padding của #mf p {

fandung

@phattrien@so : cái này em làm lâu rồi nên cũng ko nhớ nữa, anh cứ vọc thử xem. Anh thử chỉnh sửa thêm padding của footer xem (nếu anh đặt nó ở footer)

sexy darling asia

em xem nội dung mấy file js bác để thừa nhiều hàm vớ vẩn hok cần thiết cho RC post... Bác có thể làm cho file ScriptHandler.js nhỏ gọn hơn hok chứ để 63Kb loát chậm lém hix.... Dù sao thì cũng thanh bác nhiều lần này. Click ads nèo hi hi

MATHVN

Bạn cho mình hỏi: Làm thế nào để tạo được tiêu đề có cả tiếng Việt có dấu và không dấu (nhưng khi hiển thị thì chỉ hiển thị cái có dấu)
Ví dụ như: http://vnexpress.net/GL/The-thao/Bong-da/2009/08/3BA1253E/#
(15 cầu thủ xấu trai nhất ... - 15 cau thu xau trai nhat ...)

fandung

@sexy darling asia : anh cũng đã cố gắng lược bỏ hết các hàm ko cần thiết rồi đó chứ, bỏ nữa nó ko chạy. file ScriptHandler.js nguyên mẫu của nó tới 134KB lận.

@MATHVN : cái này mình cũng ko rõ, chưa có thời gian tìm hiểu

sexy darling asia

em bỏ đc còn 57.5 hi hi.... như cái link xem thêm & thu gọn anh làm tới 3 cái lận. em xoá bớt đi vẫn chạy bt hi hi

fandung

@sexy darling asia : chài, vậy là giỏi rồi, cứ như thế chẳng mấy khi em sẽ pro lên thôi :D

doson

Hãy chỉ mình cách làm css giống như hình này. Thanks nhiều

Link:
http://3.bp.blogspot.com/_harx8r4YZGQ/SowgPUdjshI/AAAAAAAAAB4/lQVTzlaNepQ/s1600-h/8-19-2009+10-53-27+PM.png

fandung

@doson : bạn có thể cho mình link của trang mà bạn đã chụp hình, để mình tham khảo code của họ, chứ mình ko có thời gian ngồi thiết kết và test cho bạn.

P/s :Có phải ý bạn là hướng dẫn tạo cái khung (tức là ko có phần nội dung)

doson

Trang vnexpress.net . cám ơn nghen.

fandung

@doson : đc rồi bạn, mình sẽ hướng dẫn sau

Xzip

3 cai' file hinh` photobucket bij hong? roi lam` dung luon ca? widget roi.Anh cho em xin lai may hinh do di

Eikei 耕平 サダウィ

Cái xem thêm và thu gọn ỏ demo trên bạn có thê tùy biên áp dụng nó như read more ko?

Admin

=))



☺ 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