Kwicks Slider for Blogger

/
Kwicks Slider
Trước giờ chưa viết bài nào về jQuery Slider và cũng có một số bạn hỏi cách làm một Slider ở trang chủ nên trong bài này Noct sẽ giới thiệu một Slider khá ấn tượng, đó là Kwicks Slider.


Loại Slider này thường thấy ở Wordpress, nhưng có thể đây là lần đầu tiên bạn thấy nó trên Blogger. Nội dung trên Slider thường là các bài đăng mà bạn tâm đắc, như vậy sẽ thu hút thêm 1 lượng traffic cho blog của bạn và góp phần xây dựng Sitelinks theo ý muốn.

Như thường lệ, chèn đoạn CSS sau phía trên </b:skin>
#slider{height:300px;margin:auto;padding:20px 0;width:900px;position:relative}
#slider h2{display:none}
.kwicks_container{width:900px;margin:0 auto}
#top .kwicks{list-style:none;position:relative;margin:0;padding:0;width:900px;height:300px;z-index:2}
#top .kwicks li{display:block}
.kwicks li{display:block;float:left;overflow:hidden;padding:0;cursor:pointer;width:180px;height:300px;z-index:2}
.kwicks li a{outline:none;display:block;z-index:100;cursor:pointer;text-decoration:none;color:#FFF}
li#kwick{-moz-box-shadow:0 0 10px #333;-webkit-box-shadow:0 0 10px #333;box-shadow:0 0 10px #333}
.kwicks a:hover,.kwicks #active{color:#f1f1f1}
.slider{background:#222;filter:alpha(opacity=80);opacity:0.8;-moz-opacity:0.8}
.slider{width:570px;position:absolute;display:block;bottom:0;left:0;z-index:2;padding:5px 15px;font-size:12px;line-height:1em;cursor:pointer}
.sliderheading{display:block;font-size:15px;margin:10px 0}

Lưu lại, tiếp tục tìm đến đoạn sau:
<div id='content-wrapper'>
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.4.2/jquery.min.js' type='text/javascript'/>
<script src='http://noctland.googlecode.com/files/jquery.easing.1.3.js' type='text/javascript'/>
<script src='http://noctland.googlecode.com/files/jquery.kwicks-1.5.1.js' type='text/javascript'/>
<b:section id='slider' maxwidgets='1' showaddelement='no'>
<b:widget id='HTML90' locked='true' title='Slider' type='HTML'/>
</b:section>
</b:if>

Đ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 này đoạn sau:
<div class="kwicks_container">
<ul class="kwicks">

<li id="kwick">
<a href="URL">
<span class="slider">
<span class="sliderheading">Post Title 1</span></span>
<img width="600" height="300" src="https://lh6.googleusercontent.com/-V6TdXvxi-1g/TeCSSwaS9vI/AAAAAAAAAzs/wmwS6qCWjqA/1.jpg"/></a></li>

<li id="kwick">
<a href="URL">
<span class="slider">
<span class="sliderheading">Post Title 2</span></span>
<img width="600" height="300" src="https://lh5.googleusercontent.com/-gGcmlMvrrsI/TeCSTRabN6I/AAAAAAAAAzw/HyAPyENI2W0/2.jpg"/></a></li>

<li id="kwick">
<a href="URL">
<span class="slider">
<span class="sliderheading">Post Title 3</span></span>
<img width="600" height="300" src="https://lh3.googleusercontent.com/-QqxebYnx5O8/TeCSTfxVLSI/AAAAAAAAAz0/l7TQmx7Co5w/3.jpg"/></a></li>

<li id="kwick">
<a href="URL">
<span class="slider">
<span class="sliderheading">Post Title 4</span></span>
<img width="600" height="300" src="https://lh4.googleusercontent.com/-3E16LON7nOg/TeCSTtY5CKI/AAAAAAAAAz4/_tvs2kkVpUs/4.jpg"/></a></li>

<li id="kwick">
<a href="URL">
<span class="slider">
<span class="sliderheading">Post Title 5</span></span>
<img width="600" height="300" src="https://lh6.googleusercontent.com/-Z-bjOVeHCjs/TeCST2yCAnI/AAAAAAAAAz8/smT343ed0EA/5.jpg"/></a></li>

</ul></div>

Các dòng tô màu bạn có thể sửa lại cho phù hợp, kích thước ảnh theo mặc định là 600x300. Hy vọng bạn sẽ thích Slider này.
Add a Comment

98 comments

Lại 1 thủ thuật hay =d> đẹp quá

5/28/2011 comment-delete

Bác Noct luôn có các thủ thuật hay quá! Tks bác!

Anh Noct có vẻ thích jQuery nhỉ@-). Em chèn cái nào của anh zô cũng bị confict hết anh ơi... :(

5/28/2011 comment-delete

Cái demo anh chèn biết bao hiệu ứng mà có confict gì đâu em :P

5/28/2011 comment-delete

Cái này đẹp quá, thanks b Noct. Để áp dụng cho cái trang incardvisit.com :D

5/28/2011 comment-delete

Chán vãi... làm mãi ko đượcb-(. Thui xài tạm cái PieceMaker vậy :(. Mà giờ này anh Noct chưa ngủ len àh... cho em xin cái YH! đi:-> Tiên liên lạc...

5/28/2011 comment-delete

Trùi ui đẹp quá, nhìn thích mắt thật đấy

5/28/2011 comment-delete

Rất tiếc là mình không thể tìm thấy đoạn mã content-wrapper mà bạn bảo hix. Giúp dùm mình nhé!

5/28/2011 comment-delete

Trong template của bạn thì chèn phía trên đoạn này <div id='container'>

5/29/2011 comment-delete

đẹp quá, cái này thích hợp với các blog chơi ảnh

5/29/2011 comment-delete

đã áp dụng được cho blog! tks a Noct nhiều

5/29/2011 comment-delete

Đẹp quá Noct ơi. Cái này áp dụng làm template là pro luôn rồi. Thật sự là mình mù tịt về jquery nhưng trước sau gì cũng phải tìm hiểu vì nó tiện và đẹp quá.

5/29/2011 comment-delete

Em tưởng bác đã viết bài về slider rồi chứ. Mấy cái slide hình như k hợp với temp của em, bỏ vào trông ngố tàu thế nào ấy b-(

5/29/2011 comment-delete

Đã từng viết bài về Slider nhưng là Flash Slider :D
Slider dùng javascript vẫn tốt hơn là dùng Flash.

5/29/2011 comment-delete

Template của bạn hay quá :D

NAD
5/29/2011 comment-delete

Hình như bộ chuyển đổi màu của bác Noct bị sao rồi! Em nghịch tý mà không được nữa!

Slider của jQuery là nhất, hiệu ứng mượt, phù hợp với 1 bộ phận Template và một bộ phận người dùng. Cái này cho thêm cái script tự động thì good.

Tại sao blog mình IE không chạy được nhỉ ?

5/31/2011 comment-delete

IE chạy bình thường, riêng IE6 thì chưa test.

5/31/2011 comment-delete

Đến xông nhà Blog của Noct đầu tháng đây, chúc blog của bạn phát triển hơn nữa hơn nữa nhé!

6/01/2011 comment-delete

Mình mới tập tành làm blog, nhưng không biết ở mẫu Simple của Blogger đoạn code content-wrapper nằm ở đâu ^^, giúp mình nhé.

6/01/2011 comment-delete

Mẫu mặc định của Blogger sẽ không có dòng đó, và bề rộng của nó cũng không đủ để chứa cái Slider này, bạn hãy thay mẫu khác đi nhé.

6/01/2011 comment-delete

Thanks Bác Noct , em đã áp dụng chạy ok không nặng lắm, cũng không nhẹ tóm lại vừa đủ sài ...!

Bạn upload các file js lên Google Code sẽ thấy nhanh hơn hẳn đấy, Dropbox chỉ là giải pháp tạm thời.

6/01/2011 comment-delete

Ok em sẽ up nó lên code.google nếu không nhiều người dùng quá thì nó lại lặng lâu hơn hiện giờ Thanks Bac Noct....!

Tìm mãi không thấy content-wrapper hay < di v i d='container'> bác chỉ em với

6/04/2011 comment-delete

Em không làm được :-SS

6/04/2011 comment-delete

@iMAX-VN : Blog của bạn có phải imax-vn không nhỉ, nếu đúng thì bạn chèn phía trên <div class='main-outer'>

6/04/2011 comment-delete

Không biết với diễn đàn thì có dùng code này đc ko ta?

Được quá chứ bạn, chỉ cần nối bước 2 và bước 3 lại đồng thời bỏ đi đoạn code của Blogger là ok =d>

6/05/2011 comment-delete

em chỉ việc thay link:https://lh6.googleusercontent.com/-V6TdXvxi-1g/TeCSSwaS9vI/AAAAAAAAAzs/wmwS6qCWjqA/1.jpg bằng link ảnh của em thôi là okie hả anh

6/05/2011 comment-delete

Anh ơi, em chèn code này vào mà nó hiện thị bị lỗi vậy là sao http://truyenhinhthucte.blogspot.com/ :((. Em edit đúng theo hướng dẫn rồi mà. Em dùng theme web source http://www.splashytemplates.com/2010/11/blogger-templates-web-source.html. Anh chỉ em với, em cám ơn nhiều :*

6/06/2011 comment-delete

Có thấy lỗi gì đâu em @-)

6/06/2011 comment-delete

Bác ơi. Em muốn thay đổi kích cỡ ảnh về 500 x 300 thì làm thế nào nhỉ :*? Nếu em thay đổi kích cỡ ảnh trong phần tử trang nó sẽ hiện lên 1 khoảng trống. :((

6/09/2011 comment-delete

Bạn tìm trong jquery.kwicks-1.5.1.js sẽ thấy dòng $('.kwicks').kwicks({ max : 600
Sửa nó lại là được =d>

6/09/2011 comment-delete

Noct thử xem hộ mình blog timeline.p212pro.tk của mình thì thay thế đoạn <div id='content-wrapper'> thành đoạn gì, mình tìm mãi đoạn này mà không thấy đâu cả.

6/11/2011 comment-delete

hohwo đúng rồi đó Blog cảu mình cũng ko có cái đoạn như /bạn May THy hỏi

6/17/2011 comment-delete

Vậy thì cách nhanh nhất là chèn ngay bên dưới <body>.

6/17/2011 comment-delete

không biết có phải xung đột widget không mà cái slide nó bị chừa 1 khoảng, Noct xem giúp nhé hoithanhcalep.org.

6/21/2011 comment-delete

Hình như bạn sửa được lỗi rồi thì phải :D

6/21/2011 comment-delete

mình chỉ tăng chiều rộng hình với cái khung chữ ở dưới lên 100px để lấp khoảng trống thôi..

Mà hình như file jquery.easing.1.3.js của dropbox bị lỗi thì phải?

6/21/2011 comment-delete

Bác noct cho e hỏi làm sao để có thể ẩn đc cái slide ở trang chủ k cho nó hiển thị khi vào đọc bài viết ạ ?

Nếu bạn làm đúng như hướng dẫn thì nó sẽ không xuất hiện khi đọc bài.

6/24/2011 comment-delete

Đã áp dụng nhưng phải chỉnh sửa nhiều lần mới nằm ở vị trí cần thiết :D Cảm ơn đã chia sẽ, rất vui được làm quen :P

6/29/2011 comment-delete

Cho mình hỏi sao mình ko down đc mấy file js up trên dropbox của cậu để up lại lên host riêng của mình nhỉ !?! như mấy file http://dl.dropbox.com/u/11103024/jquery.easing.1.3.js dù dán lên FF hay IDM đều báo lỗi ko down đc !?

6/29/2011 comment-delete

bác cho em hỏi làm sao để cho phần Slider nằm ở dưới cái thanh menu (Home About Contact Log In), của em thì nó nằm ở trên hết trong rất xấu.
bác xem thử web em vnsky.tk.
Sẵn en hỏi luôn làm sao để thay đổi cái màu của cái dropdown menu mà bác hướng dẫn. cám ơn

7/14/2011 comment-delete

Do bạn chèn ngay bên dưới <body> thì nó thế.

7/15/2011 comment-delete

Temp của mình không có đoạn <div id='content... nên không làm tiếp được

8/09/2011 comment-delete

Temp bạn là temp nào ?

8/09/2011 comment-delete

Cám ơn bác Noct nhiều! Em đã thử và thấy chạy rất ổn. Em kết hợp cái temp TechBlog và cái này thấy rất tốt. Cám ơn bác lần nữa nhé! Chúc bác luôn dồi dào sức khoẻ!!!!^^

8/15/2011 comment-delete

@TEDDYLOVELY :Để download bạn không dùng Chonme, Fire Fox hay IDm để Download được. Bạn copy đường dẫn File Js có dạng: http://dl.dropbox.com/u/11103024/jquery.easing.1.3.js rồi dán vào trình duyệt Internet Explorer sau đó nhấn Enter thì sẽ xuất hiện bảng Download. Nếu muốn có hot tạm thì có thể dùng Google Code cũng được load nhanh không giới hạn banwith chỉ giới hạn dung lượng tải lên thôi

8/19/2011 comment-delete

Cảm ơn Noct rất nhiều, Template rất đẹp. Noct có thể giúp mình gắn link cho các menu như : Tech News, Adobe ... (mình đã sửa menu theo nội dung của mình nhưng để gắn link hay đưa nội dung vào thì mình chưa thể làm được.

Noct hướng dẫn gíup mình gắn các hình mình đã đưa lên dropbox thay cho các hình mặc định trong newscast tempalte (Kwichs sider)

8/30/2011 comment-delete

những cái mà bạn thắc mắc đã được bôi đậm và đánh dấu bằng màu ở trong bài đăng này, chỉ việc thay đổi thôi, nó hoàn toàn tương tự nhau.

8/31/2011 comment-delete

Hay thật hihi. hiệu ứng đẹp quá.
có thể trao đổi link text với mình khổng?

blog: http://trust25.blogspot.com

9/04/2011 comment-delete

Có thể nào tăng số lượng link slide không anh?

9/05/2011 comment-delete

@jocker: rất tiếc không thể trao đổi link với bạn được.

@LuckyLuke: được nhưng phải chỉnh sửa trong cả js và css, cái này anh không giúp được vì không có time.

9/05/2011 comment-delete

Đẹp quá xá, không "chôm" về blog mình thì không cam tâm chút nào. Xin hỏi bạn: khi mình chuyển tiện ích HTML có chứa slide trên đến vị trí cuối trang chẳng hạn, thì đầu trang luôn có 1 khoảng trống có kích thước của slide. Xem các comment trên thì có bạn hỏi rồi, và chủ blog cũng trả lời rồi ("Do bạn chèn ngay bên dưới cái thẻ body thì nó thế"), nhưng chưa đưa ra hướng khắc phục :p Mong bạn giúp đỡ.

Bạn add thêm dòng CSS này là được: #slider {display:none}

9/30/2011 comment-delete

Tại sao làm theo anh mà không được nhỉ, nó không ra hiệu ứng jQuerry ma hiện ra như vậy nè: http://phuocblogdemo.blogspot.com/

10/02/2011 comment-delete

@YerrY không dùng cho TechBlog

10/02/2011 comment-delete

Trang này dùng được không? http://tablephones.blogspot.com/

10/02/2011 comment-delete

@YerrY dùng cho các temp mà trong đó không có hiệu ứng jquery nào khác, nếu không sẽ xung đột.

10/02/2011 comment-delete

anh cho e cái YH để e hỏi cho dễ nhé. E chèn như anh hướng dẫn rồi nhưng nó không ra hiệu ứng Jquerry, lạ thật?

10/02/2011 comment-delete

- chào anh , cho em hỏi chút , cái này có thể dùng chung với -
http://www.fandung.com/2009/05/menu-sidebar-main-menu-and-submenu-hieu.html c của fandung không , em cảm ơn .

10/04/2011 comment-delete

Thanks anh nhìu....^^ rất tuyệt

10/05/2011 comment-delete

@xArt! không biết, em tự test thử xem được ko.

10/07/2011 comment-delete

noct ơi sao mình chèn cái slide này ko đc. nó cứ lỗi

10/29/2011 comment-delete

@bimatnho lỗi sao bạn ?

10/31/2011 comment-delete

Hello very good your blog, I congratulate you ..
Could you please tell me because this effect does not work in your template "Perception." When I put it desubica all and have followed all instructions correctly. Please answer me in English, as my official language is Spanish, but if you speak a little English :))

11/18/2011 comment-delete

Anh ơi, sao em chèn được nhưng nó không có hiệu ứng gì hết cả anh à, slider lên bình thường, nhưng hình thì không có hiệu ứng với lại các tiêu đề nội dung anh bị ngắn so với hình nữa anh ah ? anh giúp em với

@Chu Đăng Thiện lỗi ở đâu em ??? xem demo mới giúp được.

12/04/2011 comment-delete

Gửi mail hỏi anh cách làm, lần mò lại thấy, để em thử apply vào trang của em, thank anh:D

12/09/2011 comment-delete

@Noct

Em tìm ra cách rồi anh ạ, chủ yếu là chỉnh trong file css và file script:

.kwicks li{
width: 150px;
height: 300px;
}

$('.kwicks').kwicks({
max : 900,
spacing : 5
});

Cái trên em làm cho 6 hình, thẻ div em để là 900 nên chia cho 6 là 150 thì vừa khớp, 150px là độ dài mà một hình sẽ hiển thị, còn 900px là chiều dài hết cỡ của nó, theo cách này thì muốn add bao nhiêu cũng được, lấy chiều dài đoạn đó chia cho số hình sẽ ra số px cần phải sửa, mọi người thử xem:D

12/09/2011 comment-delete

chà chà. ông anh chơi CSS 3 vào cơ àh. thíc đấy nha

Noct ui,sao cái này bên IE chạy được ,còn cái bên Newscast thì không.Tớ đang định dùng lại Newcast nhưng mát cái Slider này thì tiếc quá

12/23/2011 comment-delete

Hiệu ứng rất đẹp nhưng hơi load hơi chậm.

1/08/2012 comment-delete

Sao hôm nay hiệu ứng đó không chạy nữa rồi. Bạn xem dùm lieutu.blogspot.com

1/11/2012 comment-delete

Làm được rồi, chắc do xung đột file js. Chúc noct có nhiều bài viết hay hơn nữa cho cộng đồng blogspot.

1/11/2012 comment-delete

hix, đẹp thiệt, nhưng hơi tiếc !!
Dùng trên web thường không chạy được trên bất cứ IE nào hết !!

Bạn có cách gì không ??

2/15/2012 comment-delete

này bạn ơi! cái slide này có thể chứa nhiều ảnh hơn nữa không? được thì chỉnh làm sao? chỉnh hơn 5 ảnh là nó lan ra ngoài luôn

3/22/2012 comment-delete

chỉnh bề rộng ảnh trải thì làm sao vậy Noct?
code slide trên hình như dạng thu gọn hả? tại qua mấy blog khác tham khảo thì thấy nó dài loằn ngoằn nhưng có hướng dẫn kĩ. Chuyện chứa nhiều ảnh thì khắc phục được rồi.Còn cái bề rộng ảnh trải thì chưa (do đang xài code cua Noct, ngán xài mấy blog khác quá). Tui nghĩ nếu chỉnh được chắc slide chứa nhiều ảnh hơn. :).
Noct rảnh thì giúp hén! tks!

3/23/2012 comment-delete

ở đây có lẽ là bản full
http://caytamgui.blogspot.com/2011/10/kwicks-slider-for-blogger-tao-slide.html

3/23/2012 comment-delete

Nó cũng ghi nguồn là của Noct nhưng tui so sánh thấy 2 loại code cái dài cái ngắn :l

3/23/2012 comment-delete

Hoan hô, mình làm được rồi :">
Để thay đổi hình thử xem. Cảm ơn bạn Noct nhiều lắm!

5/13/2012 comment-delete

sao em tìm hoài không thấy cụm div id='content-wrapper' vậy? xin hãy chỉ em với

5/24/2012 comment-delete

Theme bác dùng là gì thế, có thể Share đc k. THANKS

Tuyệt quá. Like

6/10/2012 comment-delete

Noct ơi mình làm như hướng dẫn rồi nhưng sau 1 hôm mấy cái ảnh lại đứng yên, ko động đậy được nữa. Bạn xem ở đây này:
http://giveawaysoftprogrammes.blogspot.com/

6/21/2012 comment-delete

xung đột jquery, xóa bớt 2 cái của kwicks với prettyphoto, chỉ chừa lại cái trên cùng.

6/21/2012 comment-delete

anh ơi : ( sao đến đoạn 2 tìm cái "<div id ...." em tìm ko thấy???

6/30/2012 comment-delete

Anh cho em hỏi nó hiện được rồi mà sao ko có hiệu ứng chi hết, a giúp em cái
demo:http://trongnhanits.blogspot.com/

7/04/2012 comment-delete

troll ?

7/05/2012 comment-delete

Phần tử trang ở đây anh nhĩ ?

8/05/2012 comment-delete

Mình thích slider này nhất vì có thể bỏ slider này vào các theme mặc định của blogger đc, chỉ có chút khó khăn là phải tìm chỗ để code cho thích hợp mà thôi, hihi

Slider của mình đứng yên không chạy gì hết bạn. Xem qua giúp mình cái
http://hoi-minhminh.blogspot.com/

9/24/2012 comment-delete

NOCT giúp mình vs. mình chèn mà nó không chạy. bất động thế thui :(( http://www.hungokmen.tk/

Đoạn code ngắn thứ 2 mình không tìm thấy trong code CSS bạn ơi ! :(

Tiếc quá mình thích thuật này,nhưng ở bước thứ 2 mình không tìm ra đoạn code trên để đi tiếp . Hic ! :(

Đă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