Site Tasarım Kodları Webmaster Sitesi
  Resimli Manset Silider Yapimi
 
This is an example of a HTML caption with a link.
  


İster ana sayfanızda izterseniz sabit olarak sitenizin en üstünde kullanabileceğiniz sitenizi fazla kasmayan bir silider buldum ve sizlerle paylaşmak istedim 
  Siliderde ister linkli resim ister linksiz resim istersenizde resim üstünde linkli yazı kullanabilirsiniz resimler sayfanızın boyutuna göre otomatik boyutlanır yani sitenizin üstünde kullanırsanız büyük olur sayfalarınızda kullanırsanız sayfanızın boyutu kadar olur ekstra boyutlandırma gerektirmez.



  Silider için kullanmanız gereken Kodlar ;




Tasarımın üzerine ;


<script type="text/javascript" src="http://zonguldakliyiz.biz/silider/demo/scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="http://zonguldakliyiz.biz/silider/jquery.nivo.slider.js"></script>
<link rel="stylesheet" href="http://zonguldakliyiz.biz/silider/themes/default/default.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://zonguldakliyiz.biz/silider/themes/light/light.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://zonguldakliyiz.biz/silider/themes/dark/dark.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://zonguldakliyiz.biz/silider/themes/bar/bar.css" type="text/css" media="screen" />
<link rel="stylesheet" href="http://zonguldakliyiz.biz/silider/nivo-slider.css" type="text/css" media="screen" />


Bu kodlar sabittir ve olduğu gibi sitenize yapıştırın
 



Siliderin Görünmesini istediğiniz yere ;
ana sayfanızda görünmesini istiyorsanız ana sayfanızın en üstüne sitenizin en üstünde görünemsi içinse tasarımın üstüne eklediğiniz yukarıdaki kodların hemen altına koyabilirsiniz..


<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="https://img.webme.com/pic/k/kodlarbul/toystory.jpg" data-thumb="https://img.webme.com/pic/k/kodlarbul/toystory.jpg" alt="" /> 
 <a href="http://inbir.net">
<img src="https://img.webme.com/pic/k/kodlarbul/up.jpg" data-thumb="https://img.webme.com/pic/k/kodlarbul/up.jpg" alt="" title="This is an example of a caption" />
</a>  
<img src="https://img.webme.com/pic/k/kodlarbul/walle.jpg" data-thumb="https://img.webme.com/pic/k/kodlarbul/walle.jpg" alt="" data-transition="slideInLeft" /> 
<img src="https://img.webme.com/pic/k/kodlarbul/nemo.jpg" data-thumb="https://img.webme.com/pic/k/kodlarbul/nemo.jpg" alt="" title="#htmlcaption" /></div>
<div id="htmlcaption" class="nivo-html-caption"><strong>This</strong> is an example of a <em>HTML</em> caption with <a href="http://inbir.net">inbir net</a>.
</div>
</div>
 
Bu kodlardaki yazıları ve resimleri sitenize göre değiştiriniz resimlerin boyutları birbiriyle uyumlu olması gerekir 





Tasarımın altına ;


  <script type="text/javascript">
    $(window).load(function() {
        $('#slider').nivoSlider();
    });
    </script>


bu kodlarıda değişiklik yapmadan ekleyin 

silideri uzun bi süre kullanmayı düşünüyorsanız yukarıdaki css ve js dosyalarının bir yedegini alın derim suan ucretsız bı hostıngde barındırılıyor pek güven olmaz bi aksilik olursa yedeklerinizi kullanabilirsiniz ...





DÜZELTME ; bütün kodları sırasıyla aynı yere ( siliderin görünmesini istediginiz yere ) koyun , aksi halde bazı tarayıcılarda düzgün öalışmadıgı göründü ...






Bu sayfa hakkında yorum ekle:
İsmin:
E-mail adresin:
Mesajınız:

 
  bugun 32 ziyaretçi (83 klik) kişi kodlarbuldu  
 
=> Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=
Copyright ©KODLARBUL ( YsF®2009 )Tüm Hakları saklıdır..