Loading post navigation ...
 
 

Pro page

11
Nhận xét

Tiện ích Recent posts tích hợp hiệu ứng từ jQuery

| by Phan Dũng | views

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

[FD's BlOg] - Lần trước mình có test 1 cái jQuery cho tiện ích Recent posts, tuy là có chạy, nhưng không ổn định. Và lần này mình lại test một hiệu ứng khác của jQuery, và lần này đã thành công. Hiệu ứng jQuery này mình khai thác từ template Tribune trong 1 lần giải đáp thắc mắc cho 1 blogger.


Thủ thuật này cũng tương tự như cái hiệu ứng lần trước mà bạn LouLou có nhờ mình. Nhưng cái jQueryLoulou nhờ mình hơi khó nên chưa áp dụng được cho tiện ích Recent posts. Tuy nhiên bạn LouLou vẫn có thể dùng cái này, nó hoàn toàn tương tự.

Và bài viết này được xuất bản cũng nhờ sự gợi ý của anh YSK (Yêu Sức Khỏe).

Các bạn có thể xem demo ở đây: http://data.fandung.com/js/RecentPosts-jQuery/test.html

Hình ảnh minh họa :
Ở tiện ích này, vì 1 số lí do nên mình sẽ không cho phép hiển thị comment và ngày đăng, nên mọi người không cần thắc mắc hoặc yêu cầu show nó ra.

Một vài thông tin về tiện ích này :
- Hiển thị ảnh thumbnail là chính
- Tiêu đề bài viết và phần tóm tắt bài viết sẽ hiển thị khi ta đưa chuột vào ảnh.
- Có button cho phép di chuyển qua lại giữa các bài viết.

☼ Bây giờ ta bắt đầu thủ thuật:
- Vào bố cục
- vào chỉnh sửa code HTML
- Chèn đoạn code bên dưới vào trước thẻ đóng </head>

// Code JS
<script src='http://data.fandung.com/js/RecentPosts-jQuery/jquery-1.2.6.min.js' type='text/javascript'></script>
<script src='http://data.fandung.com/js/RecentPosts-jQuery/jquery-ui-personalized-1.5.2.packed.js' type='text/javascript'></script>
<script src='http://data.fandung.com/js/RecentPosts-jQuery/hover.js' type='text/javascript'></script>
<script src='http://data.fandung.com/js/RecentPosts-jQuery/glide.js' type='text/javascript'></script>
<script src='http://data.fandung.com/js/RecentPosts-jQuery/superfish.js' type='text/javascript'></script>

<script type='text/javascript'>
jQuery(function(){
jQuery('ul.sf-menu').superfish();
});
</script>

<script type='text/javascript'>
featuredcontentglider.init({
gliderid: "glidercontent",
contentclass: "glidecontent",
togglerid: "togglebox",
remotecontent: "",
selected: 1,
persiststate: true,
speed: 300,
direction: "leftright",
autorotate: true,
autorotateconfig: [10000, 1] //if auto rotate enabled, set [milliseconds_btw_rotations, cycles_before_stopping]
})
</script>

// Code CSS
<style type='text/css'>

#glidercontent{
margin:0px 0 5px 0px;
font-family:Arial;
}

.glidecontentwrapper{
position: relative; /* Do not change this value */
width: 570px;
height: 300px;
overflow: hidden;
margin:0px 0px 0px 0px;
background:#D9D1CE;
}
.glidecontent{
position:absolute; /* Do not change this value */
padding:0px 10px 0px 10px;
width:540px;
color:#fff;
margin:0px 0px;
height: 330px;
background:#ec03d9 url(http://i36.photobucket.com/albums/e2/alvaris924/zinmagtribune/minibg.pg) no -repeat;
overflow:hidden;
float:left;
}
.glidemeta h2{
margin:5px 0px 5px 0px;
padding:5px 0px;
font-size:18px;
font-weight:bold;
}
.glidemeta h2 a:link, .glidemeta h2 a:visited{
color:#fff;
text-decoration:none;
}
.glidemeta{
height: 85px;
width: 550px;
padding:0px 5px 5px 5px;
position:absolute;
background: url(http://i36.photobucket.com/albums/e2/alvaris924/zinmagtribune/balloon.png);
top:165px;
line-height:14px;
color: #fff;
font-size:12px;
overflow: hidden;
display:none;
border-top:1px solid #000;
}
.gnav{
width: 100px;
height:50px;
z-index:150;
float:right;
padding-right:25px;
}
.glidecontenttoggler{
height:38px;
z-index:150;
width: 570px;
background: url(http://farm3.static.flickr.com/2440/3670445565_757cfaaee8_o.gif);
}
.glidecontenttoggler a{
display: -moz-inline-box;
display: inline-block;
color: #2e6ab1;
font-weight: bold;
text-decoration: none;
}
.glidecontenttoggler a.selected{
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a:hover{
background: #E4EFFA;
color: black;
}
.glidecontenttoggler a.toc{
}
.glidecontenttoggler a.prev{
top:6px;
right:35px;
position:absolute;
display:block;
background:url(http://i36.photobucket.com/albums/e2/alvaris924/zinmagtribune/left.jpg) bottom;
width:36px;
height:25px;
}
.glidecontenttoggler a.next {
float:right;
display:block;
background:url(http://i36.photobucket.com/albums/e2/alvaris924/zinmagtribune/right.jpg) bottom;
width:36px;
height:25px;
position:absolute;
top:6px;
right:5px;
}
.glidecontenttoggler a.next:hover {
background:url(http://farm4.static.flickr.com/3376/3670481633_24740d7c90_o.gif) bottom;
}
.glidecontenttoggler a.prev:hover {
background:url(http://farm3.static.flickr.com/2594/3670481657_5465256487_o.gif) bottom;
}
</style>

- Bây giờ mình sẽ hướng dẫn 1 chút để các bạn có thể tùy chỉnh code CSS.

Trước tiên hãy xem qua hình bên dưới :
- Phần khung bên ngoài chính là id glidecontentwrapper , các bạn có thể thay đổi kích thức của tiện ích ở đây.
- Phần màu đen chính là vùng hiển thị của tiêu đềsummary post. đó chính là id glidemeta. và như trong hình độ rộng của nó là 85px, chiều cao 550px; ngoài ra ta sẽ thấy còn có 1 lệnh top:165px; lệnh này để căn lề trên cho phần màu đen, tức là nó sẽ bị đẩy xuống dưới 1 đoạn là 165px. Và lưu ý : 85px+165px = chiều cao của ảnh thumbnail. Nếu như bạn chỉnh ảnh thumbnail nhỏ lại mà quên chỉnh 2 thông số này, nhất là lệnh top:165px; thì khi đó phần màu đen sẽ bị đẩy sâu xuống dưới, kết quả có thể vùng màu đen không hiển thị được.
- Ngoài ra các bạn có thể tùy chỉnh thêm sao cho hợp lý nhất, mình chỉ có thể hướng dẫn tới đây.

- Save template sau khi đã tùy chỉnh xong

- Và bây giờ hãy tạo 1 widget HTML/Javascript và dán đoạn code bên dưới vào :

<div class='glidecontentwrapper' id='glidercontent'>

<div class='glidecontenttoggler' id='togglebox'>
<a class='prev' href='#'></a>
<a class='next' href='#'></a>
</div>


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

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

showRandomImg = true;

imgwidth = 550;
imgheight = 250;
fntsize = 16;
acolor = "#f00";
aBold = true;

text = "no";
showPostDate = false;

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

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

</script>
<script src='http://data.fandung.com/js/RecentPosts-jQuery/recentposts_jQuery.js' type='text/javascript'></script>


</div>


- Các phần tùy chỉnh bên trên có lẽ đã quá quen thuộc vì thế mình sẽ không đề cập ở đây(nếu không rõ hãy tham khảo các bài viết về tiện ích recent posts ở blog của mình).

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



Enter your mail address:

11

LouLou

hah thanks bác fandung cái này cũng đẹp lắm đó
hơi tiếc là nó ko có chức năng tự play, trong demo em thây' cái nút Next -> biến đâu mất tiu :D
nhìn mấy cái file js choáng wa'', cái jwery UI ~ 200kb còn 1 đống nữa :D
phù thủy blogger :D

LouLou

hehe tông đỏ đen sao hợp theme mình thế nhỉ :D

fandung

uh, hơi nhiều JS. nhưng chỉ có file jquery là 55k thôi, các file khác chưa tới 10k

Yeusuckhoe.blogspot.com

Rất đẹp và công phu. Thanks FD nhiều. ;;)

LouLou

đùa chả hiểu nó xung đột với cái j` mà mất luôn hiệu ứng slide bác zug~ ạh !, em test thử trên blog test thì đc. nhưng bê nguyên sang blog chính thì hok chạy :D
àh mà có j` bác giúp em show cho từng label nhé
1000 x thanks

Khách (ẩn danh)

tiếc là cái này nó ko tự chạy :(

Yeusuckhoe

Nếu xài WinVista + IE mới nhất, thì thấy slide tự chạy. Thử nghiệm thì thành công. tuy nhiên nó xung đột với code "Bài viết liên quan", có lẽ code này giống nhau nên trỏ chuột vào bài liên quan thì ảnh to đùng kích thước rộng 550 xuất hiện. FD thử nghiên cứu chèn hai code này cùng lúc xem. Thanks :D

Phan Dũng

à em hiểu rồi, chắc nó nhầm với code imgwidth=550px; đó anh.

Chỉ cần đổi tên lại là nó sẽ ko xung đột.

Hiệp Cò

Vậy tóm lại là bây giờ nó đã tự động thay đổi chưa :D

Tinh

Của tớ nó tự động kìa nhưng mà do temp có sẵn thôi :-)

Admin

admin oi............hinh nhu cac files .js ko hoat dong roi.......gui cac files .js cho minh down voi......



☺ 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