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

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://fandung.110mb.com/slide-jQuery/cty_files/jquery.js" type="text/javascript"></script>
<script src="http://fandung.110mb.com/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://fandung.110mb.com/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://fandung.110mb.com/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ị.