Spacegallery Resim Slayt galerisi
Spacegallery güzel bir 3D efekti ile görüntüler sunan aynı zamanda kullanımı ve özelleştirmek için oldukça kolaydır. Resimler arkadan öne jQuery kullanılarak aktarılıyor. jQuery eklentilere günlük kullandığımız sitelerin birçoğunda rastlamak mümkün. Bunu da hem görsellik yönünden zengin olması hem kullanım kolaylığı hem de kullanılan projelere entegrasyonda kolaylık sağlamasına bağlayabiliriz. Buda jQuery kullanan hoşunuza gideceğini düsündüğüm güzel bir Resim slayt galerisi. İster sidebarınızda, ister resim galerisi olarak, isterseniz yazılarınızda kullanabilirsiniz.
ÖNİZLEME

Spacegallery Resim Slayt galerisi Nasıl Eklenir?


1.Adım Blogger kontrol panelinize giriş yapın > Şablon > HTML'yi Düzenle
2.Adım Ctrl+F yardımı ile </head> kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'></script>
<script src='https://meftunmede.github.io/javascripts/spacegallery.min.js' type='text/javascript'></script>
Not: Önceden jQuery şablonunuzda eklenmiş varsa, o kırmızı çizgiyi jquery.min.js kodunu silin.

3.Adım Şimdi tekrar Ctrl+F yardımı ile ]]></b:skin>  kodunu aratıp bulun ve hemen üstüne aşağıdaki kodları kopyalayıp yapıştırın.

#myGallery{width:100%;height:670px;}
#myGallery img{border:2px solid #52697E;}
a.loading{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgJeSoQhAXdfnPDkwcUp7wALXro_swRflIZnV81y6DFbI3Y19ulI437UN5k811UZKUHgjYJrOsSiNYQI6WGcoekYevz1LYO4geest5Q78oX-1MA5dEV6G7G51cqF3yaHxv8PvzTADbinlfj/s1600/blue.gif) no-repeat center;}
.spacegallery{position:relative;overflow:hidden;width:100px;height:100px;}
.spacegallery img{position:absolute;left:50%;}
.spacegallery a{position:absolute;z-index:1000;display:block;top:0;left:0;width:100%;height:100%;}
4.Adım Değişiklikleri kaydetmek için, şablonu Kaydet düğmesine tıklayın.

5.Adım Son olarak Blogger panelinizden Yerleşim > Gadget Ekle > HTML/JavaScript yolunu takip edin.
Ve aşağıdaki kodları Online HTML Editör ile isteğinize göre ayarlayarak kopyalayıp yapıştırın.
<div class="spacegallery" id="myGallery">
<img src="Resim URL'si"/>
<img src="Resim URL'si"/>
<img src="Resim URL'si"/>
<img src="Resim URL'si"/>
<img src="Resim URL'si"/>
</div>

Resim URL'si: Kullanmak istediginiz resimlerinizin linklerini girin.
670px : Space Galerinizin yükseklik boyutunu blogunuza göre değistirebilirsiniz.
Bu kadar. Herkeze kolay gelsin. Yapamadığınız bir şey olursa "YORUM" kısmında belirtebilirsiniz. iyi bloglamalar...

1 Yorumlar

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

  1. bu kodlar panele göre ben dreamweaver programı ile yapmak istedim olmuyor. dreamweaver içinde paylaşırmısın

    YanıtlaSil

Yorum Gönder

Lütfen yalnızca yazı ile ilgili yorumlar yazın. Yazının konusu dışında iletmek veya sormak istediğiniz bir şey varsa iletişim formunu kullanın. Ve lütfen yorumlara tıklanabilir link yazmayın!

Önceki Makale Sonraki Makale