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

Điểm 4.6/5 dựa vào 87 đánh giá

(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

Chuyên mục:

8 nhận xét

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

    Trả lờiXóa
  2. Đượ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!

    Trả lờiXóa
  3. @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

    Trả lờiXóa
  4. 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!

    Trả lờiXóa
  5. 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!

    Trả lờiXóa
  6. 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.

    Trả lờiXóa
  7. Test admin comment! Sorry vì đã spam! :))

    Trả lờiXóa