"Thủ thuật tạo tab nội dung với hiệu ứng slider"

(Traidatmui.com) – Hôm nay mình xin chia sẽ cùng các bạn một thủ thuật làm cho các nội dung tự động thay đổi theo một thời gian nhất định. Với hiệu ứng slider thì các nội dung bạn thiết lập trong khung sẽ tự động thay đổi không cần phải click chuột. Hơn nữa, bên dưới khung nội dung còn có thanh phân trang sẽ giúp bạn có sự chọn lựa nội dung dễ dàng. Và thủ thuật để thực hiện khá đơn giản.
Xem demo bên dưới

1. Đăng nhập vào tài khoản blogger
2. Vào thiết kế và chọn chỉnh sửa HTML
3. Bạn chèn file script bên dưới sau thẻ <head>
<script src='http://data-traidatmui.appspot.com/scripts/content_slider.js' type='text/javascript'/>

4. Tiếp đến bạn thêm code css vào trước thẻ ]]></b:skin>
.sliderwrapper{
position: relative;
overflow: hidden;
border: 10px solid #000099;
border-bottom-width: 6px;
width: 400px; /*Độ rộng của khung*/
height: 250px; /*Chiều cao của khung*/
}

.sliderwrapper .contentdiv{
visibility: hidden;
position: absolute;
left: 0;
top: 0;
padding: 5px;
background: #ddd; /*màu nền của khung chứa các nội dung bên trong */
width: 390px; /*Độ rộng của khung chứa các nội dung bên trong */
height: 100%;
filter:progid:DXImageTransform.Microsoft.alpha(opacity=100);
-moz-opacity: 1;
opacity: 1;
}

.pagination{
width: 400px; /*Độ rộng của thanh phân trang bên dưới nội dung*/
text-align: center;
background: #000099; /*Màu nền của thanh phân trang bên dưới nội dung*/
padding: 5px 10px;
}

.pagination a{
padding: 0 5px;
border:1px solid #fff;
text-decoration: none;
color: #00007D; /*Màu text của thanh phân trang bên dưới nội dung*/
background: #ddd; /*Màu nền của text thanh phân trang bên dưới nội dung*/
}

.pagination a:hover, .pagination a.selected{
color: #fff;
background: #3333cc;
}

Bạn hãy dựa vào các dòng text hướng dẫn trong code (dòng màu xanh) để tùy chỉnh lại cho phù hợp, sau khi xong việc chỉnh sửa bạn có thể xóa các dòng text đi.
5. Save template lại và trở lại phần tử trang thêm 1 HTML/Javascript
6. Bước này bạn sẽ thiết lập phần nội dung, bạn hãy dán code bên dưới vào phần tử HTML vừa thêm ở bước 5
<div id="slider1" class="sliderwrapper">

<div class="contentdiv">
Nội dung 1
</div>

<div class="contentdiv">
Nội dung 2
</div>

<div class="contentdiv">
Nội dung 3
</div>

<div class="contentdiv">
Nội dung 4
</div>

</div>

<div id="paginate-slider1" class="pagination"></div>

<script type="text/javascript">

featuredcontentslider.init({
id: "slider1", //id of main slider DIV
contentsource: ["inline", ""], //Valid values: ["inline", ""] or ["ajax", "path_to_file"]
toc: "#increment", //Valid values: "#increment", "markup", ["label1", "label2", etc]
nextprev: ["Previous", "Next"], //labels for "prev" and "next" links. Set to "" to hide.
revealtype: "click", //Behavior of pagination links to reveal the slides: "click" or "mouseover"
enablefade: [true, 0.2], //[true/false, fadedegree]
autorotate: [true, 3000], //[true/false, pausetime]
onChange: function(previndex, curindex){ //event handler fired whenever script changes slide
//previndex holds index of last slide viewed b4 current (1=1st slide, 2nd=2nd etc)
//curindex holds index of currently shown slide (1=1st slide, 2nd=2nd etc)
}
})

</script>

Bạn hãy thay các dòng text màu đỏ đậm trong code thành những nội dung mà bạn muốn đưa vào tiện ích này
7. Sau khihoàn tất việc thiết lập nội dung bạn save lại và xem kết quả.

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

Xem khác cùng chủ đề

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

9/28/2010 03:19:00 SA Trả lời

admin oi....neu minh muon thay so 1 2 3 4 do bang chu co dc ko.....chi ho voi....thx truoc nha.....

Admin
9/28/2010 04:23:00 SA Trả lời

Được bạn ah. Nếu bạn muốn thay các số phân trang thành text bạn chỉ việc làm như sau:
Bạn tìm đến dòng toc: "#increment", trong code <script type="text/javascript">
---------------------etc------------------
</script> ở bước 6.
Và thay dòng code vừa tìm được ở trên thành dòng code bên dưới.
toc: ["ND1", "ND2", "ND3","ND4"],
Các ND1, ND2,ND3... là nhãn của từng nội dung của bạn, bạn thay chúng tương ứng với nội dung của mình.

Thân!

9/28/2010 08:12:00 SA Trả lời

@Traidatmui cảm ơn nhiều nhé.....mình muốn hỏi t́ip đc ko nhỉ...hic....nếu muốn để tab ở phía trên thì làm thế nào?>>>>>>mong rằng sẽ có ngừơi giúp minh...:-D

Admin
9/29/2010 12:20:00 SA Trả lời

Nếu bạn muốn để phần thanh phân trang (nhãn) lên trên phần nội dung bạn chỉ việc di chuyển code <div id="paginate-slider1" class="pagination"></div> lên phía trên code
<div id="slider1" class="sliderwrapper">
ở bước 6.

Thân!

9/29/2010 01:23:00 SA Trả lời

thx.....:-bd

12/19/2010 04:48:00 SA Trả lời

Chào bạn,
Thủ thuật rất hay, nhưng khi ta click vao những số bên dưới xong rồi thì nó sẽ không tự động auto play nữa. Có cách nào để nó vẫn tiếp tục auto play khi ta click vào nó không hả bạn Trai Đất Mũi?
Đang chờ reply của bạn!

Admin
12/19/2010 06:50:00 SA Trả lời

Không bạn ah,đó là cách trình diễn của thủ thuật này.Bạn đã click vào một mục nào đó là muốn xem nội dung đó, nếu nó autoplay thì sao xem được nó. Nếu muốn autoplay thì bạn phải reload lại.

12/19/2010 08:02:00 CH Trả lời

Test admin comment! Sorry vì đã spam! :))

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