Blogger için kullanabileceğiniz,resimleriniz den video tarzı geçişli slayt oluşturmanız için en kolay yolu.Bu HTML kodu ile blog yazılarınız içerisinde konuya ait resimlerinizi sunabilirsiniz,veya banner tarzı gibi oluşturarak istediğinizi yapabilirsiniz.Bu sizin yaratıcılığınıza kalmış bir şey.
<style> #slideshow {margin:50px auto;position:relative;width:240px;height:240px;padding:10px;box-shadow: 0 0 20px rgba(0,0,0,0.4);} #slideshow > div {position:absolute;top:5px;left:-1px;right:10px;bottom:10px;} </style> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script> <script> $(function() { $("#slideshow > div:gt(0)").hide(); setInterval(function() { $('#slideshow > div:first') .fadeOut(1000) .next() .fadeIn(1000) .end() .appendTo('#slideshow'); }, 3000); }); </script> <div id="slideshow">
<div>
<img alt="" class="icon-action" src="Image URL" /></div>
<div>
<img alt="" class="icon-action" src="Image URL" /></div>
<div>
<img alt="" class="icon-action" src="Image URL" /></div>
</div>
Kod İçerisinde Düzenlenecek Yerler:
*height:240 ve widht:240 yani yükseklik-genişlik değerlerini bu değerlerden ayarlayabilirsiniz.
*Image URL yazan bölüme ise ekleyecek olduğunuz resim linkinin olduğu yerdir.
*Kod içerisinde şu anlık sadece 3 resim ekleme imkanı var,eğer siz bu resimleri 3 değilde 5 yada 10 olsun istiyorsanız o zaman yapacak olduğunuz işlem şöyle olacaktır.
* Yukarıda ki kod sonunda olan resim URL ekleme kodlarını çoğaltarak istediğiniz kadar ekleme şansını elde edersiniz.
Bizi Takip Edin...
Pinterest>>Facebook>>Twitter
© by bilgicafem61
Aşağıda Yorum ve Sorularınızı Bırakın...
Yorum Gönder Blogger Facebook