Bu sitedeki her şey Sevgi ile kodlanmıştır.

Kategori Listesini Göster

Blogger için Basit Slider Eklentisi Yapalım


FacebookTwitterPinterestTumblrYazdır


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.


  1. Yorum bulunmamaktadır.

Bu yazıya yorum göndermek ister misiniz?

Dikkat: Her yorum gönderen kişi, kendi gönderdiği yorumdan sorumlu olmaktadır.
Not: Yazı ile herhangi bir ilgisi bulunmayan yorumların onaylanmadığını belirtmek isteriz.
Yazı Etiketleri
Yukarı Çık