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.
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://aassas.googlecode.com/files/jquery%20min.js" type="text/javascript"></script>
<script src="http://aassas.googlecode.com/files/jquery-ui%20min.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('#') 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. Bạn tạo 1 widget HTML/Javascript và dán đoạn code bên dưới vào rồi thay đổi nội dung và đường dẫn link theo như ý muốn của bạn.
<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="http://fishers-men.blogspot.com/2010/11/kutless-what-faith-can-do-lyrics.html"><img src="http://i227.photobucket.com/albums/dd76/bamboopeaceful/Faith1.jpg" alt="" /><span>Kutless - What Faith Can Do ( Lyrics )</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="http://fishers-men.blogspot.com/2010/11/co-phai-tien-la-tat-ca.html"><img src="http://haydanhthoigian.files.wordpress.com/2010/05/free-dom.jpg" alt="" /><span>Có phải "Tiền" là tất cả!</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="http://fishers-men.blogspot.com/2010/11/mot-nguoi-ban-ung-nghia.html"><img src="http://japanest.com/tin/tin/wp-content/uploads/2010/06/best-friends24.gif" alt="" /><span>Một người bạn đúng nghĩa!</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="http://fishers-men.blogspot.com/2010/10/cuoc-chien-trung-ong-theo-kinh-thanh.html"><img src="http://thanhkinhthanhoc.net/images_tkth/TienTri.png" alt="" /><span>Cuộc chiến Trung Đông theo Kinh Thánh</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="http://fishers-men.blogspot.com/2010/11/ngai-chang-bao-gio-bo-ban.html"><img src="http://www.tinlanh.ru/images/stories/site/authors/SmithWigglesworth.jpg" alt="" /><span>Ngài không bao giờ bỏ bạn!</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="http://i227.photobucket.com/albums/dd76/bamboopeaceful/Faith1.jpg" alt="" />
<div class="info" >
<h2><a href="http://fishers-men.blogspot.com/2010/11/kutless-what-faith-can-do-lyrics.html" >Kutless - What Faith Can Do ( Lyrics )</a></h2>
<p>Now faith is being sure of what we hope for and certain of what we do not see.....<a href="http://fishers-men.blogspot.com/2010/11/kutless-what-faith-can-do-lyrics.html" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://haydanhthoigian.files.wordpress.com/2010/05/free-dom.jpg" alt="" />
<div class="info" >
<h2><a href="http://fishers-men.blogspot.com/2010/11/co-phai-tien-la-tat-ca.html" >Có phải "Tiền" là tất cả!</a></h2>
<p>Ngày nay có rất nhiều người trai trẻ giàu có, là những người may mắn trên con đường mình và có số tài sản khá lớn. Một số là Cơ Đốc nhân và một số thì không. Nhưng chẳng sớm thì muộn tất cả họ đều phải trả lời câu hỏi mà người trai trẻ nầy đã đặt ra với Chúa Jesus: “Tôi phải làm chi cho được hưởng sự sống đời đời?” (Mác 10:17)....<a href="http://fishers-men.blogspot.com/2010/11/co-phai-tien-la-tat-ca.html" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://japanest.com/tin/tin/wp-content/uploads/2010/06/best-friends24.gif" alt="" />
<div class="info" >
<h2><a href="http://fishers-men.blogspot.com/2010/11/mot-nguoi-ban-ung-nghia.html" >Một người bạn đúng nghĩa</a></h2>
<p>Một người bạn là người mà bạn yêu quý, là người mà bạn quan tâm đến họ và nghĩ đến họ ngay cả khi họ không ở bên cạnh bạn.
Bạn nhớ đến ngay người đó khi bạn nhìn thấy một thứ họ có thể thích và bạn biết rõ thứ gì họ thích vì bạn rất hiểu họ.....<a href="http://fishers-men.blogspot.com/2010/11/mot-nguoi-ban-ung-nghia.html" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://thanhkinhthanhoc.net/images_tkth/TienTri.png" alt="" />
<div class="info" >
<h2><a href="http://fishers-men.blogspot.com/2010/10/cuoc-chien-trung-ong-theo-kinh-thanh.html" >Cuộc chiến Trung Đông theo Kinh Thánh</a></h2>
<p>Các tôn giáo và tín ngưỡng trong thế gian không ít thì nhiều đều có khái niệm về sự tận thế. Môn nghiên cứu về sự tận thế gọi là eschatology trong Anh ngữ, bắt nguồn từ tiếng Hy-lạp: ἔσχατος(eásxatov /es'-khat-os/) có nghĩa là sự cuối cùng. Chúng tôi dịch eschatology là "Chung Thời Học" tức là bộ môn thần học về những điều sẽ xảy ra trong "những ngày cuối cùng....<a href="http://fishers-men.blogspot.com/2010/10/cuoc-chien-trung-ong-theo-kinh-thanh.html" >read more</a></p>
</div>
</div>
<!-- Fifth Content -->
<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://www.tinlanh.ru/images/stories/site/authors/SmithWigglesworth.jpg" alt="" />
<div class="info" >
<h2><a href="http://fishers-men.blogspot.com/2010/11/ngai-chang-bao-gio-bo-ban.html" >Ngài không bao giờ bỏ bạn!</a></h2>
<p>Lòng chân thành có thể níu giữ được Ngài, sự yếu đuối có thể níu giữ được Ngài. Khi chúng ta yếu đuối là chúng ta mạnh mẽ (2 Cô-rinh-tô 12:10)......<a href="http://fishers-men.blogspot.com/2010/11/ngai-chang-bao-gio-bo-ban.html" >read more</a></p>
</div>
</div>
</div>
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="http://fishers-men.blogspot.com/2010/11/kutless-what-faith-can-do-lyrics.html"><img src="http://i227.photobucket.com/albums/dd76/bamboopeaceful/Faith1.jpg" alt="" /><span>Kutless - What Faith Can Do ( Lyrics )</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-2"><a href="http://fishers-men.blogspot.com/2010/11/co-phai-tien-la-tat-ca.html"><img src="http://haydanhthoigian.files.wordpress.com/2010/05/free-dom.jpg" alt="" /><span>Có phải "Tiền" là tất cả!</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="http://fishers-men.blogspot.com/2010/11/mot-nguoi-ban-ung-nghia.html"><img src="http://japanest.com/tin/tin/wp-content/uploads/2010/06/best-friends24.gif" alt="" /><span>Một người bạn đúng nghĩa!</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="http://fishers-men.blogspot.com/2010/10/cuoc-chien-trung-ong-theo-kinh-thanh.html"><img src="http://thanhkinhthanhoc.net/images_tkth/TienTri.png" alt="" /><span>Cuộc chiến Trung Đông theo Kinh Thánh</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-5"><a href="http://fishers-men.blogspot.com/2010/11/ngai-chang-bao-gio-bo-ban.html"><img src="http://www.tinlanh.ru/images/stories/site/authors/SmithWigglesworth.jpg" alt="" /><span>Ngài không bao giờ bỏ bạn!</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="http://i227.photobucket.com/albums/dd76/bamboopeaceful/Faith1.jpg" alt="" />
<div class="info" >
<h2><a href="http://fishers-men.blogspot.com/2010/11/kutless-what-faith-can-do-lyrics.html" >Kutless - What Faith Can Do ( Lyrics )</a></h2>
<p>Now faith is being sure of what we hope for and certain of what we do not see.....<a href="http://fishers-men.blogspot.com/2010/11/kutless-what-faith-can-do-lyrics.html" >read more</a></p>
</div>
</div>
<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://haydanhthoigian.files.wordpress.com/2010/05/free-dom.jpg" alt="" />
<div class="info" >
<h2><a href="http://fishers-men.blogspot.com/2010/11/co-phai-tien-la-tat-ca.html" >Có phải "Tiền" là tất cả!</a></h2>
<p>Ngày nay có rất nhiều người trai trẻ giàu có, là những người may mắn trên con đường mình và có số tài sản khá lớn. Một số là Cơ Đốc nhân và một số thì không. Nhưng chẳng sớm thì muộn tất cả họ đều phải trả lời câu hỏi mà người trai trẻ nầy đã đặt ra với Chúa Jesus: “Tôi phải làm chi cho được hưởng sự sống đời đời?” (Mác 10:17)....<a href="http://fishers-men.blogspot.com/2010/11/co-phai-tien-la-tat-ca.html" >read more</a></p>
</div>
</div>
<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://japanest.com/tin/tin/wp-content/uploads/2010/06/best-friends24.gif" alt="" />
<div class="info" >
<h2><a href="http://fishers-men.blogspot.com/2010/11/mot-nguoi-ban-ung-nghia.html" >Một người bạn đúng nghĩa</a></h2>
<p>Một người bạn là người mà bạn yêu quý, là người mà bạn quan tâm đến họ và nghĩ đến họ ngay cả khi họ không ở bên cạnh bạn.
Bạn nhớ đến ngay người đó khi bạn nhìn thấy một thứ họ có thể thích và bạn biết rõ thứ gì họ thích vì bạn rất hiểu họ.....<a href="http://fishers-men.blogspot.com/2010/11/mot-nguoi-ban-ung-nghia.html" >read more</a></p>
</div>
</div>
<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://thanhkinhthanhoc.net/images_tkth/TienTri.png" alt="" />
<div class="info" >
<h2><a href="http://fishers-men.blogspot.com/2010/10/cuoc-chien-trung-ong-theo-kinh-thanh.html" >Cuộc chiến Trung Đông theo Kinh Thánh</a></h2>
<p>Các tôn giáo và tín ngưỡng trong thế gian không ít thì nhiều đều có khái niệm về sự tận thế. Môn nghiên cứu về sự tận thế gọi là eschatology trong Anh ngữ, bắt nguồn từ tiếng Hy-lạp: ἔσχατος(eásxatov /es'-khat-os/) có nghĩa là sự cuối cùng. Chúng tôi dịch eschatology là "Chung Thời Học" tức là bộ môn thần học về những điều sẽ xảy ra trong "những ngày cuối cùng....<a href="http://fishers-men.blogspot.com/2010/10/cuoc-chien-trung-ong-theo-kinh-thanh.html" >read more</a></p>
</div>
</div>
<!-- Fifth Content -->
<div id="fragment-5" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="http://www.tinlanh.ru/images/stories/site/authors/SmithWigglesworth.jpg" alt="" />
<div class="info" >
<h2><a href="http://fishers-men.blogspot.com/2010/11/ngai-chang-bao-gio-bo-ban.html" >Ngài không bao giờ bỏ bạn!</a></h2>
<p>Lòng chân thành có thể níu giữ được Ngài, sự yếu đuối có thể níu giữ được Ngài. Khi chúng ta yếu đuối là chúng ta mạnh mẽ (2 Cô-rinh-tô 12:10)......<a href="http://fishers-men.blogspot.com/2010/11/ngai-chang-bao-gio-bo-ban.html" >read more</a></p>
</div>
</div>
</div>
0 Comments