 |
| Blogger Dersleri - Blogger Resimli Slayt Gösterisi |
Blogger Dersleri ile Bloglarda şık bir görünüm elde etmek için ardı ardına geçiş yapan resim slaytlarını sizlere sunuyorum. Özellikle blog içerisinde dikkat çekmek istenilen konuların bannerı gibi kullanmak isteyenler için ideal bir kod dizini. Yayın içerisinde html bölümüne kopyalayarak yada Gadget bölümünde kullanabilirsiniz.
Blogger Resimli Slayt Gösterisi Demo Görünüm :
Blogger Dersleri - Blogger Resimli Slayt Galerisi Kodları
<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>
Blogger Resimli Slayt Gösterisi Üzerinde Yapılacak Değişiklikler
- width:240px;height:240px : Width ve Height olarak belirlenmiş alanlardaki boyutları kendi eklediğiniz resimlere göre değiştirebilirsiniz.
- <img alt="" class="icon-action" src="Image URL" /></div> : İmage url olarak belirlenmiş alana kendi resimlerini eklemelisin.
Yorum Gönder