Kategori : CSS
Bi takım resimleri belli aralıklarla kendiliğinden geçmesini sağlayan bir kod istiyorsak yardımımıza sliderler yetişiyor. Çünkü kolay yapısı, zengin geçişleri ile bizleri cezbediyor. Bugün bir slider paylaşıyorum. Eski sitemde paylaştığım bir slider. Düzenlemesini çok kolay bir şekilde yapabiliyorsunuz. Bazı sliderler vardır. Hangi resmi koyarsanız koyun hep büyük gösterir. Tabii bilginiz varsa ayarlarından düzenleyebilirsiniz fakat bilmeyenler için tam bir işkence. Bu sliderin diğer sliderlerden farkı ise resimlerinin boyutu belirlenebiliyor olması. Aşağıdaki önizlemede 3 tane resim yaptım. Boyutları 250x125. Her birinde benim logom var ancak arkaplan renkleri birbirinden farklı. Film siteniz, blogunuz, oyun siteniz varsa bu slider tam size göre.

Önizleme

Sitene Ekle

<!--ozgurgorgulu.blogspot.com | Sitene Gelişmiş, Kaliteli Slider Ekle | Başlangıç--><script type="text/javascript">var pic_width=250; /*Genişlik*/ var pic_height=125; /*Yükseklik*/ var button_pos=6; var stop_time=6000; /*Değişim süresi. Her saniye için 1000 arttırın*/ var show_text=0; var txtcolor="fff"; var bgcolor="000"; var imag=new Array(); var link=new Array(); var text=new Array(); imag[1]="https://lh5.googleusercontent.com/-9zAosDlzRr8/USpv6Nwax2I/AAAAAAAAD_w/sJQrCm17pOw/s250/kaliteli_slider_ornek_1.jpg"; link[1]="http://ozgurgorgulu.blogspot.com/"; text[1]="Özgür Görgülü"; imag[2]="https://lh6.googleusercontent.com/-RvO7WrqqCTs/USpv6MzP-gI/AAAAAAAAD_4/Db35FtTVMlE/s250/kaliteli_slider_ornek_2.jpg"; link[2]="http://ozgurgorgulu.blogspot.com/"; text[2]="Özgür Görgülü"; imag[3]="https://lh6.googleusercontent.com/-PABtFpNZAvs/USpv6DEDh9I/AAAAAAAAD_0/Tu8eh0vHAjo/s250/kaliteli_slider_ornek_3.jpg"; link[3]="http://ozgurgorgulu.blogspot.com/"; text[3]="Özgür Görgülü"; var swf_height=show_text==1?pic_height+0:pic_height; var pics="", links="", texts=""; for(var i=1; i<imag.length; i++){ pics=pics+("|"+imag[i]); links=links+("|"+link[i]); texts=texts+("|"+text[i]); } pics=pics.substring(1); links=links.substring(1); texts=texts.substring(1); document.write('<img src="//img2.blogblog.com/img/video_object.png" style="background-color: #b2b2b2; height: '+ swf_height +'px; width: '+ pic_width +'px; " class="BLOGGER-object-element tr_noresize tr_placeholder" id="BLOGGER_object_1" data-original-id="BLOGGER_object_1" />'); </script><!--ozgurgorgulu.blogspot.com | Sitene Gelişmiş, Kaliteli Slider Ekle | Bitiş-->

Açıklamalar

Kodda bulunan var pic_width bölümü resminizin genişliğini, var pic_height ise yüksekliğini belirler.

var stop_time bölümündeki rakam değişim süresini belirler. Bir saniye arttırmak ya da azaltmak için 1000 ekleyin veya çıkarın.

Bunu E-postayla GönderBlogThis!X'te paylaşFacebook'ta Paylaş