13 Temmuz 2014 Pazar

Spacegallery Resim Slayt galerisi

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.

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='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
<script src='http://meftun-mede.googlecode.com/svn/trunk/spacegallery.min.js' type='text/javascript'/>
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/AVvXsEhA5nKduepsiPx6CRRZM6ZKvbty_ubIrQhLm-savh-RJJ0QOpxFpKHC1XtvbIOcfDzQddWeLzqmv3r9BxZUGPq3Tyjku0lVHqnWvC_x5gQ8kQnch2tlUFEBl40-Rk1-TZSEtvip8DgHOYtf/s1600/blue.gif) no-repeat center;}
.spacegallery{position:relative;overflow:hidden;width:100;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...

Hiç yorum yok:

Yorum Gönder