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

[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 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

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 đề 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.