Geçtiğimiz içeriklerimizde oldukça sağlıklı çalışan bir slider eklentisi paylaşmıştım. Şimdi ise daha basit, sidebar slider tarzında bir eklenti paylaşmak istiyorum. Yani temanızın yan menüsüne ekleyebileceğiniz, oldukça sorunsuz çalışan bir slider eklentisi. Dilerseniz aralıklarla içeriklerinizi ekleyerek, ziyaretçilerinizin web sitenizde dolaşma zamanını artırmayı da düşünebilirsiniz. Aşağıdaki kodları ile HTML/JavaScript Ekle bölümüne eklemeniz yeterli olacaktır.

Blogger Sade ve Basit Slider (Slayt) Eklentisi

<style>
#slider img{width:100%;padding:4px;border:1px solid #ddd}
#slider span {
width:230px;
position:relative;
bottom: 0px;
display: block;
border-top:1px solid #ff9999;
margin:0;
padding: 15px;
color: #222;
background: #ffe6e6;
font-size: 13px;
line-height:20px;
text-align:center;
}
#slider a{color:#222;}
#slider a:hover{text-decoration:none;}
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js' type='text/javascript'/>
<script type="text/javascript">//<![CDATA[
$(function(){
$('#slider div:gt(0)').hide();
setInterval(function(){
$('#slider div:first-child').fadeOut(0)
.next('div').fadeIn(1000)
.end().appendTo('#slider');}, 5000);
});
//]]></script>
<div id="slider">
<div><img src="resim-linki"/><span><a href="link" title="baslik">İçerik Başlığı</a></span></div>
<div><img src="resim-linki"/><span><a href="link" title="baslik">İçerik Başlığı</a></span></div>
<div><img src="resim-linki"/><span><a href="link" title="baslik">İçerik Başlığı</a></span></div>
</div>


Not: Kırmızı alanları kendinize göre güncellemeyi lütfen unutmayın.