Kwicks Slider for Blogger

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.

Xem demo

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjENJnjeEyt4c8CVfIgcy2G0Xih4LOgj6gVRxHeQ_OxPM_zNwxkqy6tWjQ0z4LTqDAfWDoMIlQ9a-TTqkAaAVea6s0s-DjBwlJMYOezcPtwmLQzI5-rGPd6r_S29oLfO7CSOVvd01gurzE/"/></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6Avzk9U3L9Wjy-d4ja0EKFvVhEV2OgKVaV4IR3nPzWnfw3jFcNR5BCmr_lvxPhWBE7taSeZ5RpaHEAE9klHnq8tEr0Befef3LMZ7OvEk7VrwiovaQoCsrIYipKd5qsm5C7KQVUUxDmko/"/></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKPWNy9RIpSkPqID_7oXpSAb6HUOtdSMHWjMSrXVbpxyGQ8ru708W20T1ahqKaMtS4MX_bIFZ8dwPenShJHmMsm8bCJ1ZOhMmmDOO-he5gEcslDw3uBT5pMt0v7QIrXAdggOgJ7Fk5Los/"/></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiDn6y7AKsMf3QBr1haU2WlGhu9JLL_jN_YKY_QcUz7BqBQK8OMvEnptC6eVwknUsMoWsRxP7P1GbV0vHdb3v_jY8Ro-OWyfmI9whriMywGrtWUNfwsWlZ_B47KUE0V2yB4OECxeKKYWvI/"/></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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpxWOD1afA4YRmKU0rsMFZXkmyQDG8c0PHQr2uQQH-OxCsIKMRie6WO_BxB0QzONfomLF2rCfb897XI-A0G0EBc0LF-f_OTGjFa9rzt_FQWKFIRAB0IfXZrK2IjNb9lZh4Q_D3tvjwsYQ/"/></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.