"Tạo tab nội dung với hiệu ứng mootools cho blogspot"

(Traidatmui.com) – Tiếp theo thủ thuật tạo tab nội dung cho blogspot, hôm nay mình giới thiệu đến các bạn một thủ thuật tạo tab với hiệu ứng mootools khá đẹp mắt. Với thủ thuật này nội dung trong tab sẽ tự động trình diễn theo một khoảng thời gian định trước. Với tab này bạn có thể ứng dụng cho việc hiển thị hình ảnh, các tiện ích của blogger... Để thấy rõ hiệu ứng của tab này bạn có thể xem phần demo bên dưới.

1. Đăng nhập blogspot
2. Vào thiết kế chọn chỉnh sửa HTML (Edit HTML)
3. Thêm code css bên dưới vào trước thẻ ]]></b:skin>
.qtabs-wrapper {
height: 1%;
}
ul.qtabs {
list-style-position: outside;
list-style-type: none;
float: left;
margin: 0px 0px 0px 0px ;
padding: 0px ;
}
ul.qtabs li {
list-style-type: none;
float: left;
margin: 0 !important;
padding: 0 !important;
cursor: pointer;
}

.qt-content {
position: absolute;
margin: 0px;
padding: 5px 5px 5px 5px;
}

.qthead-round1 ul.qtabs li {
margin-left: 5px;
padding: 0px;
border-top:1px solid #eee;
border-left:1px solid #eee;
border-right:1px solid #eee;
color:#fff;
background:#666;
}
.qthead-round1 ul.qtabs li span {
display: block;
margin: 0;
padding: 4px;
font-weight:bold;

}
.qthead-round1 ul.qtabs li.open {
background:#fff;
color:#0000ff;}
.qthead-round1 ul.qtabs li.open span {
background:transparent;

}
.qthead-round1 ul.qtabs li.hover span {
text-decoration: none
color:#ff0033;
}

div.current-round1 {
clear:both;
color:#000;
border-width: 2px 1px 1px;
border-style:solid;
border-color: #CCC;
width:530px;}

4. Tiếp theo bạn chèn code bên dưới vào sau thẻ <head>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/mootools.js"></script>
<script type="text/javascript" src="http://data-traidatmui.appspot.com/scripts/qtabs.js"></script>

5. Bây giờ bạn save template lại và trở về phần tử trang
6. Thêm 1 HTML/Javascript
7. Thêm code bên dưới vào HTML/Javascript trên
<script type="text/javascript">
window.addEvent('domready', function(){ var t=new QTabs('211', {scrolling:1,duration:1000,transition:'linear',autoplay:1,delay:3000}); })
</script>

<div class="qtabs-wrapper qtwrap-round1" id="qtwrap-211"><div class="qthead-round1">
<ul class="qtabs" id="qtabs-211">
<li id="qtabs211-0" class="qt-first open"><span>Tên nhãn 1</span></li>
<li id="qtabs211-1" class="closed"><span>Tên nhãn 2</span></li>
<li id="qtabs211-2" class="closed"><span>Tên nhãn 3</span></li></ul></div>

<div style="position:relative;overflow:hidden;" id="current-211" class="current-round1"><div class="qt-content">

Nội dung của nhãn 1

</div>

<div class="qt-content" style="visibility:hidden"><div class="latestnews">

Nội dung của nhãn 2

</div>
</div><div class="qt-content" style="visibility:hidden"><div class="latestnews">

Nội dung của nhãn 3

</div></div></div></div>

Chỉnh sửa code:
- Số 3000trong code trên chính là thời gian chuyển đổi giữa các nội dung của các nhãn, nếu bạn muốn nó thay đổi chậm hơn thì có thể tăng con số này lớn hơn, và ngược lại.
- Thay các phần Tên nhãn 1, Tên nhãn 2, Tên nhãn 3 trong code thành nhãn tương ứng nội dung bên trong của bạn.
- Các dòng màu xanh đậm chính là nơi bạn đặt nội dung, bạn có thể đặt nội dung dạng text, ảnh hoặc HTML... tùy ý

8. Sau khi chỉnh sửa xong bạn save tiện ích lại

Chúc bạn thành công

Xem khác cùng chủ đề

3 nhận xét | Viết lời bình

11/13/2010 09:04:00 SA Trả lời

thnak admin thũ thuật hay đấy có dịp sẽ áp dụng thữ thũ thuật này

1/28/2011 10:21:00 CH Trả lời

trong phần " nội dung của nhãn " mình có thể tùy biến cho nó hiển thị thành bài viết mới nhất hoặc bài được xem nhiều nhất không ạ nếu dơợc như vậ thì hay quá,chứ như trên thi nội dung đó là cố dịnh phải không ạ. nếu muốn thay đổi thì phải chỉnh lại HTML/javacrip ạ

1/30/2011 02:00:00 SA Trả lời

tuyệt vời mình làm được rồi nhưng cái autoplay thì hơi vô duyên vì dâng xem nội dung Tab3 thì nó lại chạy về tab 1 làm người ta mất hứng .luôn thể bạn hướng dẫn làm 4 tab cho mình luôn đi :))

Bạn nhập từ: cungly Bạn nhập từ: lleu Bạn nhập từ: kkrong Bạn nhập từ: cuoilon Bạn nhập từ: roile Bạn nhập từ: hehehe Bạn nhập từ: byebye Bạn nhập từ: idontknow Bạn nhập từ: votay more »

Giải pháp bán hàng online Số 1 Việt Nam
Lên đầu trang Xuống cuối trang