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

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.

Xem thử

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiR5uX08NsWaX2JBRmQzggSIrTFKx8F0SvZ3KPtYcV2xHznAWl4etsq52S2cIluyVXeoB7vphxsZEbYXqUcaJBZ0X3ycHUHO124PblObWF2fUiGx19AniuT_Cz0QIHW9WVEKxzpr0eKTHQ//"/></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/AVvXsEgSQhep8SRRI7bnjT8S227GhftylYTeJJd1YwqnaD4kGE3uW5fINDTwL__1uBoo9P42_C_3xT2f5tWmFlfgYBuQZ635b6L8-JcDnY-pxEOGeEfu1IrqdjwK_kZvt4R61MvILu-8lA86TVY//"/></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/AVvXsEgU-ZaYssPonAfD5lsMpjShpfYNW9iSmvnQB53YUvEpDb51LgizyQWXU4EiEbg3z0vLuH50N6IoLvfUFSWcJELqaEewQwn272d-WNMIUvs4q-QHAlWIp_jT2g2dUhTmpLpRJTcNJ71E2uE//"/></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/AVvXsEiGy5hjIN9mYI8jYShKfcfI6EDZwFyKqG0pQ4FZzWc9r_5Z6aPH4ux9ue6kB0TBjCncDO-dTaGgAYC2fXiJ8lt6t17ds6RwzBFw1RZlHBG0QkCYKMuCOYIUUYKg1i_qAiDan0sGPTm-AJ4//"/></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/AVvXsEiIdvp2j3sTDJk6ECUjx3dlkwdb_YUs75sQ6sS__iunxFWVMcaFe470wvolmnA38-lnDywYTW5HkavtM0nZ7CiwP__q_JFp15aD-Aju6G50b8WKSPMVy7vkQxPtXosRGw0ymwcrXnaZW4w//"/></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.

Share This:

Post Tags:

Blogger Blogger widget slider blogger

' rel='author' target='_blank' title='Được đăng bởi Nguyên Luật'>

Nguyên Luật

Website: LuatIT blog

• Social Links:

• Rss
• Facebook
• Twitter
• Google+
• Linkedin
• Youtube