Slider cho Blogspot kiểu thu gọn, mở rộng hình ảnh

By Nguyên Luật → Friday, June 29, 2012

Hôm nay mình xin giới thiệu các bạn một mẫu slider cho Blogspot khá đẹp được viết bởi Noct-land.
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 (hoặc những hình ảnh bạn thích) 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.

Trước tiên các bạn 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 <div id='content-wrapper'> hoặc <div id='container'> (cái này trên mỗi template sẽ khác!)

Chèn phía trên nó đoạn này:

<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à chèn vào tiện ích đó đ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. Hi vọng bạn sẽ thích Slider này.

2 comments to ''Slider cho Blogspot kiểu thu gọn, mở rộng hình ảnh"

ADD COMMENT
  1. Không tìm thấy đoạn ...div id='content-wrapper'> hoặc ...div id='container'>

    ReplyDelete
    Replies
    1. Tùy vào blog bạn à!
      Cho link blog bạn đi. Mình chỉ cho!

      Delete

- Không nói chuyện thô tục thiếu văn hóa,...
- Không spam. Còn lại thì chém gió thoải mái hết! :D
@ Có thể chèn ẢnhVideo Youtube bằng cách paste link trực tiếp