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.
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/AVvXsEiym5ihepUB2lLeW7xpouijIsGCBzL-hp30aHuM8wfwVjb6LkW6FjO2tybLWI1Hho2jOIZ9wB_e1uYTUcm78e7QShNL28VTEcUDmR_0qTZaOGBHvEQCuBvA2iFEoRFRH5CFTurpw5aU5Jg/"/></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/AVvXsEi3Bx54QBpx_tj03ZJn4gz2gLs_Ft2f15ebWazk9Vdi7S7uGn96JmTVEhxiTET483CF09tfmt61i0AFoJxvTPk3pocCNTxPy3myaeJ5c7XcBjbEQOu3ajStFqG8KL5gkvB366FjEYJiNd4/"/></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/AVvXsEgD_99El0V-aCThhQtF4THOhkvx7jqzlR236bSl00KT8XsD2kbOMwy2BWrXvzj_Vl0SC_J3eYk7FtIUstLOz-SKI4d3JlC292TXqoj1c0SM1slpiqalVSQW7NOpYc2nnIGy2QrirqkVDBQ/"/></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/AVvXsEiteL02F3pFFMnEb4Xym4XaKTZWr-OI1x00u4pvu9uHkR-E1Snh9Yzhyphenhyphen5zyVFoEKjxM1IIpLH59AhD1Wk425rGlsHc82fDhwPAD2BLtBBQr0CMo7YZSU9A0sjEeA_PAL-pQ9nRpEGdnPMo/"/></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/AVvXsEgRa5qQuXhny2T5aJ6Pul6zflVxN4nsaZpf_FKHXGsxOslm6bIa-RtzQYUyTKjYKtm-lBeuxFhHJj7G1bA-QmbqduuxYvRld1SQjaRfSH321VRdhO45cPJqffpcRsOsM98daXG8GXPH3eQ/"/></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.
fonte:
traduzido:
Kwicks Slider para o Blogger
Antes, não escrever sobre jQuery Slider e também algumas de vocês perguntaram como fazer um controle deslizante na página inicial assim neste NOCT irá introduzir umSlider é bastante impressionante, é Slider kwicks .
Tipo Slider é comumente encontrada em Wordpress , mas esta poderia ser a primeira vez que vi na Blogger.O conteúdo do Slider é geralmente os lugares que você concordo plenamente, por isso vai atrair um tráfego de qualidade para o seu blog e contribuir para a construção Sitelinks vontade. Como de costume, insira o CSS acima </ b : skin>Guardar, continue com o seguinte:Inserir acima dela:O código acima irá adicionar um HTML / Javascript para o
Tipo Slider é comumente encontrada em Wordpress , mas esta poderia ser a primeira vez que vi na Blogger.O conteúdo do Slider é geralmente os lugares que você concordo plenamente, por isso vai atrair um tráfego de qualidade para o seu blog e contribuir para a construção Sitelinks vontade. Como de costume, insira o CSS acima </ b : skin>Guardar, continue com o seguinte:Inserir acima dela:O código acima irá adicionar um HTML / Javascript para o
seu novo blog, volte para o elemento superior e continuar
a
inserir este adicionar o seguinte parágrafo: pintura de linha você pode editar em conformidade, o tamanho da imagem padrão é600x300 . Espero que tenham gostado Slider isso.