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...

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/AVvXsEisLusnRrSesKW0YOLdrXEr2045L9e3E9lpQboPmeXS7N7FA6vaJPFRL5exp_DT0mtmm_mvS9vGNz71Yq9G9nAanG4NTvnOJM3A_WsMT-Etq1PHZ-T9pM2uQi7S9VSNFBc6S-5YjCCDUSw/"/></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/AVvXsEg0qhLFJ5InJ_okTZ3KhGZR9LUbvf8hWmBEoJnUdh3-eHZDJjHvGVYJy5omKU6Y5BPBoJXNsJxxClea8uf3FkFXKT2Kyn3IQJ-R5rfdKqjfN9DFHOY36iN6pSYcCvLvJrocS7jAYXl9-g4/"/></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/AVvXsEgvASEnfpSPGRZ0OI6zR5Ay2B4jUMklpyO0-C01y0jvTFiSeL3x-E-xta4dGO0QeMQ7d5PKtHlLdA6eJWngL3rAfnLsf3TRKUUCPWW1qO98Ub7mROKdXxMDCEGBXOCP9HCmI0-iHaiLlAs/"/></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/AVvXsEjNJfLgr3iNtpxitZ3aoWLxcXAAO9Ge2bhJUeLMGhUNLB1DruXFBgp5P0KmwZmfEsDWsb_3M9flXVFBuKRdtER28iGygz1Huu0_Fh2BuYF62lmAZtLo4oiTplXPV4NMffNiEUcM5CeL3gY/"/></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/AVvXsEgoARsniyLElJRxfGqHyV1vlCrUMCZJuBnHKQA1b3z7BsUmzGL5xqoyrCMhIyWynUnBAaZJzkhs20cZP-DeUgEgvmIf1NW2xxbRjLJaJdnsmfYx-wrymmIe6eBuEuKCp-3R2Rj22lHfE8Q/"/></a></li>

</ul></div>