Accordion Slider

/
Hôm nay mình sẽ giới thiệu một loại jQuery Slider mới nhưng lại không mới:


Hẳn bạn đã nhận ra đây chính là một nâng cấp của Kwicks SliderNoct từng đăng trước đây. Hai tính năng sáng giá nhất của Accordion Slider này chính là hỗ trợ VideoLightbox.

Để chèn slider này vào blog thì bạn vào phần HTML của blog tìm đoạn:
     <div id='content-wrapper'>
hoặc bất cứ vị trí nào trong template mà bạn thấy phù hợp, chèn phía trên nó:
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>
<script src='http://noctland.googlecode.com/files/accordion.js' type='text/javascript'/>
<b:section id='slider' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML100' locked='true' title='Slider' type='HTML'/>
</b:section>
</b:if>

Lưu ý nếu trong site của bạn đang dùng các thủ thuật jQuery khác thì hãy xóa dòng màu đỏ. Đoạn code trên sẽ tạo một tiện ích HTML/Javascript mới trên blog của bạn, hãy quay lại Phần tử trang và tiếp tục chèn vào tiện ích mới đoạn code này.

Chỉ việc chỉnh sửa lại nội dung Slider theo ý bạn và kiểm tra kết quả.
Add a Comment

50 comments

wow... slide này đẹp thật đó... thanks

4/19/2012 comment-delete

Gần giống cái ở Newscast nhưng hình như load lâu hơn :D

4/19/2012 comment-delete

Noct vẫn chưa chèn comment phân cấp vào đây à

4/19/2012 comment-delete

Chạy mượt lăm bác à, nhưng "Phần tử trang và tiếp tục chèn vào tiện ích mới đoạn code này." thì nó báo lỗi Not Found Error 404,http://www.blogger.com/post-edit.g?lightbox[width]=600&lightbox[height]=400#accordion

4/19/2012 comment-delete

Nice slide:D

4/19/2012 comment-delete

@NoctCó fix đâu nào, click vào cái link thì lại về cái pài này:-ss :-ss :-ss

rất đẹp và chuyên nghiệp bác ợ! :D

4/20/2012 comment-delete

vEry nice bạn ơi! :D

Bạn cho mình hỏi, Jquery này là 1.7.1 còn mấy cái của mình 1.4.1 vậy mình xóa cái 1.4.1 để cái 1.7.1 có tốt hơn ko?

@Tùng Bitrên lý thuyết là dùng cái nào cũng được, nhưng nên dùng 1.7

4/20/2012 comment-delete

sao mình áp dụng không thành công. slide không hiển thị gì hết.chỉ có màu trắng thôi bạn

4/20/2012 comment-delete

bạn đọc lại phần lưu ý ở trên

4/20/2012 comment-delete

Bác Noct coding ngày càng chuyên nghiệp. Nếu mà được bác + mấy bác cao thủ khác gộp lại một site làm thì chắc khá là bá đạo đây =d>

4/21/2012 comment-delete

Bác cứ nói quá, về coding trên blogger thì mấy ai qua mặt được Tien Nguyen lừng lẫy :D
Em chỉ là xào lại mấy cái thư viện có sẵn thôi.

4/21/2012 comment-delete

NOCT xem lại blog mình với, nó bị lệch khung rồi :(

giúp mình với

bạn nên sửa lại nội dung menu, nó không được phép lấn xuống slider.

4/22/2012 comment-delete

Thanks Noct

Nặc danh
4/23/2012 comment-delete

mình sửa rồi vẫn bị, dòng Decscription slider ko hiện lên đc, chỉ hiện đc Title của silder thôi :(

à! đc rồi mình chỉnh cái slider nó cao hơn 1 tí là đc :D. cảm ơn nhé :*

Noct i had a bug or somewhere i do mistake while setup...
take a look while loading slider at the last pic

Nặc danh
4/25/2012 comment-delete

I think you should set each slide's width at 945/8 pixel

4/25/2012 comment-delete

A Noct cho e hỏi cài slider vào template Newcast 1.0 thì Lightbox không ko work nhưng nó mở link luôn.

Nặc danh
4/28/2012 comment-delete

kích thước ảnh phù hợp với slider là bao nhiêu bạn nhỉ:-?
Width x Height =

Noct ơi,sao blog tớ vào nó cứ báo nhiễm url: mal
máy mình cài avast
xem giúp mình với nhé

4/30/2012 comment-delete

Cảm ơn Noct, mình đã làm được rồi, mà không biết cái Slider này mình có thể chèn tối đa là bao nhiêu image và video ?

Nặc danh
5/01/2012 comment-delete

bao nhiêu cũng được, nếu bạn biết cách mày mò

5/01/2012 comment-delete

vấn đề bạn nói không liên quan gì tới nội dung bài này cả, và template Newscast của tôi không có chứa "virus", bạn tự kiểm tra lại xem mình đã thêm vào cái gì trong template.

5/02/2012 comment-delete

Em vừa mới đổi Templates xong, mời bác Noct qua chơi và cho em ý kiến nhé. Thank!^^

NOCT Hello, I am Brazilian and I found your blog and found it very good, and this tutorial you got me interested and decided to do just that but I'm with a doubt. I did everything right but when you open the image to display the "lightbox" opens the image in another tab. What do I do?

you must add Pretty Photo Plugin

5/10/2012 comment-delete

Bạn ơi sao mình click vô liên kết "đoạn code này" trên bài viết của bạn thì nó lại trả lại trang này, code bạn để ở đâu vậy ??

dùng FF hoặc Chrome bản mới nhất

5/16/2012 comment-delete

Lâu lâu mình ko edit gì cho blogspot cả ;)) thấy cái này có vẻ hay đó, mình sẽ thử luôn cho Green

5/22/2012 comment-delete

Bạn ơi cái này mình muốn cho vào cái slide hiện tại trên blog www.green-vietnam.com đuọc không?
Bạn coi giúp mình với

Thanks

5/22/2012 comment-delete

mình chưa hiểu cái jquery.min.js và jquery.js thì có gì khác nhau không bạn ơi
Thanks

5/22/2012 comment-delete

giống nhau cả

5/22/2012 comment-delete

Bác NOCT có thể viết một bài hướng dẫn cài đặt Coin slider như ở trang chủ đc ko ạ.
Nhìn cool quá ạ.

5/24/2012 comment-delete

Hơn 1 tháng rồi chưa có bài mới, anh em Blogger dạo này có vẻ trầm quá :(

NAD
5/25/2012 comment-delete

Liên kết site nhé bác !
URL: http://tanchau123.blogspot.com
Tên: Blog Giải Trí Tổng Hợp

Đã add site bác. Hợp tác vui vẻ !

5/26/2012 comment-delete

rất tiếc là nội dung của 2 blog không cùng chủ đề với nhau nên không thể liên kết với bạn được

5/26/2012 comment-delete

Sax liên kết bạn bè mà đòi hỏi cao thế bác b-)

5/26/2012 comment-delete

Like! :D

5/28/2012 comment-delete

Chào bác nha.thỉnh thoảng sang blog em chơi cho nó đỡ trống vắng.:d

bây giờ mình muốn xóa thì làm sao đây

9/17/2012 comment-delete

Ồ, nay blogger có cái reply vip quá zị

Nặc danh
9/23/2012 comment-delete

anh noct ơi anh cóa yh or facebook hk cho em xin nik anh gửi we yh:nh0ckteenst or facebook:nh0ckface007@gmail.com em có thắc mắc về Sữa chữa dessign mog anh giúp đở tks

10/03/2012 comment-delete

Bạn ơi giúp t với, k biết tại sao khi t chèn slide này lên đầu blog (dưới menu) thì nó tự động co ngắn chiều cao lại. Giúp t với nhé. Cảm ơn bạn trước :)

11/07/2012 comment-delete

Nhận xét này đã bị tác giả xóa.

11/08/2012 comment-delete

Hi Noct,
Muốn có một slider đơn giản như trên blog của Noct thì làm thế nào? Mình đang làm 1 trang web tin tức đơn giản, nếu để slider Accordion này thì nó hơi rối mắt. Thanks

12/29/2012 comment-delete

Đăng nhận xét

- Không chèn liên kết quảng cáo khi đăng nhận xét.
- Nội dung nên liên quan tới chủ đề của bài.
- Use English if you do not understand what we are talking about.

Chèn Emoticons
Top
Copyright © 2011 Noct Blog. Content is licensed under a Creative Commons Attribution-NonCommercial 3.0 License