• Tư vấn điều trị
      bệnh khàn tiếng


    www.trikhantieng.com

    Liên hệ + 0913163316

BlogList111

Việt Nam Gia Phả, nơi lưu trữ Gia Phả của người Việt Nam  Kiến thức Blogspot Ngonluanho: Nhung cau chuyen thap lua-Tin-Cay-Men Vngreenzone Là một nơi chia sẻ kinh nghiệm làm blogger - Nơi tôn vinh tâm hồn blogger Việt

Hiệu ứng trượt nội dung nổi bật sử dụng jQuery UI

17
03/11/2010

Trình chiếu những bài viết nổi bật nhất trong website/webblog của bạn theo một kiểu độc đáo có thể thu hút sự chú ý của người lướt web. Sử dụng kỹ thuật trình chiếu nội dung tự động là một trong những kỹ thuật giúp tiết kiệm không gian web. Việc sử dụng thư viện jQuery UI có thể giúp cho kiểu trình chiếu trở nên mềm mại và đẹp mắt hơn.


Sau đây xin giới thiệu một kiểu trình chiếu như vậy. Xem Demo và thực hiện theo các bước như bên dưới.

1. Đặt phần code sau đây vào trước thẻ </head>. Áp dụng cho cả website và Blogger.
<style type="text/css">
#featured{
width:400px;
padding-right:250px;
position:relative;
border:5px solid #ccc;
height:250px; overflow:hidden;
background:#fff;
}
#featured ul.ui-tabs-nav{
position:absolute;
top:0; left:400px;
list-style:none;
padding:0; margin:0;
width:250px; height:250px;
overflow:auto;
overflow-x:hidden;
}
#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:18px;
}
#featured li.ui-tabs-nav-item a{
display:block;
height:60px; text-decoration:none;
color:#333; background:#fff;
line-height:20px; outline:none;
}
#featured li.ui-tabs-nav-item a:hover{
background:#f2f2f2;
}
#featured li.ui-tabs-selected{
background:url('http://demo.webdeveloperplus.com/featured-content-slider/images/selected-item.gif ') top left no-repeat;
}
#featured ul.ui-tabs-nav li.ui-tabs-selected a{
background:#ccc;
}
#featured .ui-tabs-panel{
width:400px; height:250px;
background:#999; position:relative;
}
#featured .ui-tabs-panel .info{
position:absolute;
bottom:0; left:0;
height:70px;
background: url('http://demo.webdeveloperplus.com/featured-content-slider/images/transparent-bg.png');
}
#featured .ui-tabs-panel .info a.hideshow{
position:absolute; font-size:11px; font-family:Verdana; color:#f0f0f0; right:10px; top:-20px; line-height:20px; margin:0; outline:none; background:#333;
}
#featured .info h2{
font-size:1.2em; font-family:Georgia, serif;
color:#fff; padding:5px; margin:0; font-weight:normal;
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;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>

2. Thiết lập cấu trúc HTML như bên dưới và đặt vào phần thân của trang web nằm giữa 2 thẻ <body>, </body>. Đối với Blogger thì đặt vào một tiện ích HTML/JavaScript.

<div id="featured" >
<ul class="ui-tabs-nav">
<li class="ui-tabs-nav-item ui-tabs-selected" id="nav-fragment-1"><a href="#fragment-1"><img src="images/image1-small.jpg" 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="images/image2-small.jpg" alt="" /><span>Tieu de bai viet 2</span></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-3"><a href="#fragment-3"><img src="images/image3-small.jpg" alt="" /><span>Tieu de bai viet 3></a></li>
<li class="ui-tabs-nav-item" id="nav-fragment-4"><a href="#fragment-4"><img src="images/image4-small.jpg" alt="" /><span>Tieu de bai viet 4</span></a></li>
</ul>
<!-- First Content -->
<div id="fragment-1" class="ui-tabs-panel" style="">
<img src="images/image1.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 1</a></h2>
<p>Noi dung tom tat cho bai viet 1....<a href="#" >Read more</a></p>
</div>
</div>

<!-- Second Content -->
<div id="fragment-2" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image2.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 2</a></h2>
<p>Noi dung tom tat cho bai viet 2....<a href="#" >Read more</a></p>
</div>
</div>

<!-- Third Content -->
<div id="fragment-3" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image3.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 3</a></h2>
<p>Noi dung tom tat cho bai viet 3....<a href="#" >Read more</a></p>
</div>
</div>

<!-- Fourth Content -->
<div id="fragment-4" class="ui-tabs-panel ui-tabs-hide" style="">
<img src="images/image4.jpg" alt="" />
<div class="info" >
<h2><a href="#" >Tieu de bai viet 4</a></h2>
<p>Noi dung tom tat cho bai viet 4....<a href="#" >Read more</a></p>
</div>
</div>
</div>
Trong phần HTML ở trên, các liên kết đánh dấu màu đỏ là liên kết ảnh đại diện, các liên kết đánh dấu màu xanh là liên kết ảnh với kích thước lớn.

Thủ thuật này sẽ khá phức tạp đối với một người mới bước chân vào nghiên cứu CSS, HTML, Javascript, jQuery. Nếu bạn gặp rắc rối, xin vui lòng để lại câu hỏi để Admin gỡ rối nhé.

Theo Webdeveloperplus

* Cập nhật ngày 02/04/2011: Nếu bạn muốn áp dụng một cách tự động cho blogspot thì hãy thực hiện như sau:

Xem Demo.

Bước 1. Đăng nhập Blogger, vào Design >> Edit HTML. Đặt đoạn code sau đây vào trước thẻ </head>.

<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:250px;
}
#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://demo.webdeveloperplus.com/featured-content-slider/images/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:176px;
left:2px;
height:75px;
width:336px;
background:url('http://demo.webdeveloperplus.com/featured-content-slider/images/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:#f00;
font-size:13px;
}
#featured .info a:hover{
text-decoration:underline;
}
#featured .ui-tabs-hide{
display:none;
}
#featured .ui-tabs-nav-item img{
height:37px;
width:55px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" ></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.5.3/jquery-ui.min.js" ></script>
<script type="text/javascript">
$(document).ready(function(){
$("#featured > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
});
</script>
<script src="http://hacodeproject.googlecode.com/files/uislide.js" type="text/javascript"></script>

Lưu Template.

Bước 2. Vào Page Elements, thêm một tiện ích HTML/Javascript và đặt đoạn code sau vào nội dung tiện ích.

<script type="text/javascript">
imgr = new Array();
imgr[0] = "http://goo.gl/NR90r";
showRandomImg = false;
fntsize = 12;
acolor = "#E67C15";
aBold = true;
text = "nhận xét";
showPostDate = true;
summaryPost = 100;
summaryFontsize = 12;
summaryColor = "#000";

numposts =5;
label = "Recent Posts";
home_page = "http://huynh-nhat-ha.blogspot.com/";
</script>

<div id="featured">
<script type="text/javascript">
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>
<script type="text/javascript">
document.write("<script src=\""+home_page+"feeds/posts/default?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>
</div>

Trong đoạn code trên, bạn cần thay huynh-nhat-ha bằng tên blogspot của bạn. Ở trên áp dụng cho cả blogspot, nếu bạn muốn áp dụng cho một nhãn nào đó, thì thay đoạn code được đánh dấu màu đỏ bằng đoạn code bên dưới.

<script type="text/javascript">
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts\"><\/script>");
</script>

<script type="text/javascript">
document.write("<script src=\""+home_page+"feeds/posts/default/-/"+label+"?max-results="+numposts+"&orderby=published&alt=json-in-script&callback=showrecentposts2\"><\/script>");
</script>

Tại tham số label = "Recent Posts"; hãy thay Recent Posts bằng tên nhãn cần áp dụng slide.

{17 bình luậnAdd yours ?}

22:50:00, 18 thg 1, 2011

to thich tien ich nay nhung co cach nao de no tu cap nhat nhung bai viet moi nhat cua blog khong ban chu khong phai la minh phai add thu cong vao the nay

Reply
23:00:00, 18 thg 1, 2011

@poormewhy Có chứ bạn, nhưng bạn hãy chờ mình rảnh chút đã, có thời gian sẽ viết, bạn quay lại sau nhé. Cơm áo gạo tiền chiếm hết thời gian rồi.

Reply
01:03:00, 19 thg 1, 2011

uh minh se quay lai :D ban van dang online tren blog ah vay ma minh khong biet neu co the thi gui mail cho minh biet voi nha tai minh so vao roi ko tim thay bai viet :D

Reply
09:45:00, 14 thg 2, 2011

cau viet tien ich nay de cho no tu dong cap nhat cho tat ca cac bai viet moi nhat di

Reply
01:21:00, 27 thg 3, 2011

sao không thấy bạn viết bài viết này để nó tự cập nhật các bài viết mới nhất của blog thế.mình muốn có tiện ích này trên blog nhưng phải add từng bài vào như thế thì không hay cho lắm.bạn cố gắng viết bài về tiện ích này sử dụng cho những bài viết mói nhât nha .:)

Reply
12:48:00, 27 thg 3, 2011

OK sẽ sớm viết bài mà. Do bận sửa nhà nên chưa tiện viết. Có lẽ trong tuần thôi. :54)

Reply
23:35:00, 28 thg 3, 2011

vậy thì hay quá :55) .thanks Hà trước nha

Reply
13:05:00, 2 thg 4, 2011

hôm hay thứ 7 rồi hà ơi . Hết tuần rồi mà chưa thấy viết bài về tiện ích này vậy

Reply
22:01:00, 2 thg 4, 2011

hà ơi có đó không giúp mình 1 chút được không không thấy có chát box đành nhắn vào đây vậy.tớ tìm được 1 template có hiệu ứng này nhưng khi mình thay vào blog thì nó không hiện thị cái ảnh to mà chỉ hiển thị ảnh nhỏ ở bên trái và mình phải chọn 1 nhãn cố định chứ nó không tự đăng những bài mới đăng của blog đây là linh template http://www.mediafire.com/?kj97ojwk19jm0y9

Reply
22:13:00, 2 thg 4, 2011

sao vậy kìa không giúp tui à :-s

Reply
22:16:00, 2 thg 4, 2011

@poormewhy
yahoo cua tui chantinh031188 nếu rảnh thì giúp mình với nha

Reply
23:10:00, 2 thg 4, 2011

Bloggerism luôn giữ lời hứa với bạn đọc. Hy vọng các bạn hài lòng với bài cập nhật 2/4/2011 :51)

Reply
02:24:00, 4 thg 4, 2011

cảm ơn hà nhiều :53) mình làm được rồi

Reply
16:41:00, 6 thg 11, 2011

Bác Hà ơi mình rất muốn áp dụng cái Dome mới cập nhật ngày 2.4 cho Blog của mình, thay cho cái Looped Slider đang dùng, nhưng mình làm hoài nó không được, nó không slide mà chỉ hiện như một Recent Posts bình thường, mong bác giúp với. Mình đã thử nhiều lần kể cả xóa file jquery.min.js vì trùng nhau nhưng vẫn không được. Mong bác giúp cảm ơn nhiều.

Reply
11:49:00, 7 thg 11, 2011

@24h-CafeCòn cái này bác giúp mình luôn với, cảm ơn nhiều. vnsupercar.net

Reply
10:36:00, 12 thg 2, 2012

Hì mình vừa làm cái Featured Content Slider cập nhật tự động bằng BlogList (không dùng JSON - Javascript) như trong bài :4)
Ai thích thì vào đây xem hướng dẫn nhé http://itdl.w3solution.net/2012/02/automatic-content-slider-using-bloglist.html

Reply
12:43:00, 11 thg 8, 2012

de mo cap nhat tieu roi

Reply
Nội quy! Đóng lại Khi bạn viết bình luận, cần tuân thủ một số quy tắc sau:
» Bình luận phải nghiêm túc và không chứa các liên kết quảng cáo.
» Có thể sử dụng các thẻ <b> … </b>,<i> … </i>, <a href="URL..."> ... </a>.
» Yêu cầu thủ thuật tại mục Yêu cầu thủ thuật hoặc hỏi tại mục Hỏi và Đáp.
More →
Chữ đậm Chữ nghiêng Chữ nghiêng 2 Chèn Link Chèn Link Mã hóa code Help ?Nhấn vào biểu tượng hoặc kiểu chữ hoặc chèn link sau đó nhấn nút Chọn rồi copy (Ctrl + C) để paste (Ctrl + V) vào khung viết bình luận. Mã hóa code nếu bạn muốn đưa code vào bình luận.

Chọn Xóa

Next post: Bài đăng Mới hơn

Previous post: Bài đăng Cũ hơn