Chia sẻ thủ thuật blogspot - blogger

luat1x1

11/21/2011

Trình chiếu hình ảnh jQuery Slider


Trước giờ chưa viết bài nào về jQuery Slidervà cũng có một số bạn hỏi cách làm mộtSlider ở 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ựngSitelinks 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ạiPhầ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/AVvXsEiXK5y0pYSmD9_iBOHFA1ZjwAO8ALaZ8PWEAJJjmA0AeKl0BBgJWBu4_ArARDNAngtadA1S67QYG6Kc4aqcMe4J_o9r3p6Fqj3XtKF47ms_aiSMdr0r_JrUpCIOiAb1yi1qGmaEmID8Pfc/"/></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/AVvXsEhKluPuB5z7V8T0lEdTErdP6kAiHoljprvofMbDLQEIVAI7eRzXd0yoMUYXsoft1CtYKOaP-hHODitSED_s2flTSU7QGjF6NsgC9zO08K7hafg_KdioNjQZCqLBDlPZkEa9UpOUxxsmywo/"/></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/AVvXsEivtlcO_HdBmV-cXhGvoSRO0WJCwF5-bMVgx9ZV80A16k5YdyH5FegFvAhlsDzkh_Evv6-8WVH0NMy-H3BvnYPl3FYNFzPPouZrWQUuM9PfW5Aw0fGYe6Xz4u0AESOKwIvNEJXV2Bad2aI/"/></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/AVvXsEi_etda8dPtl7RL7czeRhbljpWS1G20R0tqM_wSeENgoGPQ25usZ5j8DrKw5oHmGxrjz2slQCpTLgvJk77kmF4_vRc9y3rfnh30A31P8JiStr7xY7085WZ_d9l5AOmA9T8zpi10B6JHMO8/"/></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/AVvXsEjeyTMW5x5w1eK6rtbHLNSsn9ygGkwZRQwHIuheSTIng9d3ejPoKOcMf5j1taquPpfk_KcqPQ7FHnVTKjT0lsBW6KX9dDbOjzzr9mieBGIxdsdoA4KZFZ3qnSYZRC1o0qgpreKwcdIQxUs/"/></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.
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

0 nhận xét

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2011 Luat1x1
Designed by BlogThietKe Cooperated with Duy Pham
Released under Creative Commons 3.0 CC BY-NC 3.0
Posts RSSComments RSS
Back to top