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 jQuery mà Loulou 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
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.
- Phần màu đen chính là vùng hiển thị của tiêu đề và 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.
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
hehe tông đỏ đen sao hợp theme mình thế nhỉ :D
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
Rất đẹp và công phu. Thanks FD nhiều. ;;)
đù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
tiếc là cái này nó ko tự chạy :(
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
à 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.
Vậy tóm lại là bây giờ nó đã tự động thay đổi chưa :D
Của tớ nó tự động kìa nhưng mà do temp có sẵn thôi :-)
admin oi............hinh nhu cac files .js ko hoat dong roi.......gui cac files .js cho minh down voi......
» 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.