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://traidatmui-tips.googlecode.com/files/mootools.js"></script>
<script type="text/javascript" src="http://traidatmui-tips.googlecode.com/files/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ố 3000 trong 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.
Comments[ 0 ]