Web Sitene Resim Slider Kodu Ekle

Web sitenize ekleyebileceğiniz birbirinden farklı resim slayt kodlarını bu sayfada toplamaya çalıştım.Kodlama veya html gibi konulardan anlamayanlar olabilir, kısaca aşağıdaki kodlarda nerelerde düzenleme yapmanız gerektiğini kısaca anlatmak isterim.

Resim Slayt Kodu Eklemeden Önce Yapılması Gerekenler

Htlm Kodlama Bilmeyenler Resim Slayt Kodunu Eklemeden Önce Yapması Gerekenler

Sitenizde kullanmayı düşündüğünüz alanın boyutunu belirledikten sonra, aşağıda bulunan resim slayt kodlarını sitenizdeki boyutlara göre uyarlayabilirsiniz.Yani genişlik/yatay ( width ), yükseklik/dikey ( height ) yazan yerlere pixcel olarak yazıyorsunuz.

Resim url adresi ve resme tıklanınca hangi sayfaya gideceğini belirlemeye geçebiliriz.
<a href=”RESME TIKLAYINCA AÇILACAK SAYFA LİNKİ” target=”_blank”><img src=”RESİMİN URL ADRESİ” alt=”ALT ETİKETİ EKLE” title=”TİTLE ETİKETİ EKLE” width=”GENİŞLİK” height=”YÜKSEKLİK” /></a>

<a href=  Resime tıklayınca açılmasını istediğiniz sitenin url linkini yazıyorsunuz.Eğer resme tıklanınca yönlendirme yapılmasına gerek yoksa # yapmanız yeterlidir. örn: <a href=”#” target=”_blank”>

Burada bulunan target= tıklanınca sayfa yeni bir pencerede mi açsın yoksa aynı pencerede mi açsın anlamına geliyor. target=”_blank” yeni bir pencerece aç demektir.Eğer aynı pencerede açmasını istiyorsanız target=”_blank” yazısını silebilirsiniz.
<img src=” Resim url adresidir.

Resimlere Alt ve Title Eklemek
Alt ve Title Etiketi kısmı mutlaka doldurulması gerekir.Niçin doldurulması gerektiğini şurada anlattım.
isacoturoglu.com.tr/code/resimlere-alt-ve-title-eklemek.html tıklayın.

Yorum yap

Yorum Kısmına Mesaj Yazın Sitenize Backlink Kazanın

Aşağıdaki resim slayt kodlarını kullanan arkadaşlardan ricam var.Sayfa sonundaki yorum bölümüne site linkinizi yazın, resim kodunu nasıl kullandığınız bilmek isteyenlere fikir vermiş olacağınızı unutmayın.Ayrıca sitenize backlink de kazanmış olacaksınız.

Yatay 700×400 Resim Slider Kodu

Web Sitene Resim Slider Kodu Ekle
Slayt Kodunu test ettik kod çalışıyor.Slayt kodunuz 10 pencereye kadar tek bir satırda, daha sonraki pencereleri ise (ileri / geri simgesi) bir alt satıra geçiyor ve çerçevenin dışına taştığı için şahsen önermiyorum.Nedeni ise hoş durmayacağı için.Tabi size kalmış bir şey.

 


 

Manşet Slider  696×241 Resim Kodu

Manşet Slider 696x241 Resim Kodu

 


 

Yatay Resim Slayt 680×320 Kodu Ekle

Resim Slayt Kodu 680x320

680×320 resim slayt kodunu test ettim.Fare ile resim üzerine gelince Menü1, Menü2… yazılar çıkıyor.Fakat resim url adreslerini değiştirdiğimizde yazı görünmüyor.Sorun nedir tam anlamadım.Bunun haricinde resim slayt kodunda anormal bir durum yok.sorunu çözen olursa lütfen aşağıya yorum yazsın.Veya facebookdan bize ulaşım sağlarmısınız.Şimdiden teşekkür ederim.

 


Yatay 700×400 Resimli Haber Slayt Kodu

Yatay 700x400 Resimli Haber Slayt Kodu

Yatay resimli 700×400 haber slayt kodunun üzerinde biraz değişiklik yaparak web sitenizde kullanabileceğiniz formata getirdim.Eski kodlamada 6 tane resim slaytı yapılabiliyordu, şu an 12 tane resim slaytı oldu.Bazı sayfalarda url  yazı şeklinde çıkıyordu.Bu tür şeyleri hallederek daha kullanışlı oldu.İhtiyacınıza göre sizde değişiklik yapabilirsiniz.Test ettik çalışıyor.
Not: kodu test ederken kod test editöründe hızlıca açılıyor.fakak ama sayfama ekledim açılması zaman aldığı içn kaldırdım.Benim ana sayfada fazla içerikler olduğu için sanırım.Yinede kullanışlı bir kod.

 


Büyük 1120×630 Resim Slayt Kodu

Büyük 1120x630 Resim Slayt Kodu

1120×630 boyutlarında büyük resim slayt kodu birilerinin işine yarayabilir diye ekledim.Kodu test ettim çalışıyor.

 


 

Yatay Resim Slider kodu ekleme 550×310

Yatay Resim Slider kodu ekleme


Bu resim slaty kodunda ana resim ebatı 550×310, yan tarafdaki küçük resim ebatı ise 85×48 olup bu iki ebatlara göre resmi ayarlamayı unutmayınız!


Yatay Resim Slider Kodu Ekle

Yatay resim slider kodu ekle

 


Manşet Silder 570×320 Resim Kodu
Manşet Silder 570x320 Resim Kodu

width=570  : Manşet alanının yüksekliği px
height=320 : Manşet alanının genişliği px
time=8000  : Slayt duraklama süresi
RESİM URL : Eklemek istediğiniz resimlerin URL adresi
# : Resimlere tıklandığında gidilmesini istediğiniz URL adresi
Resim boyutu px ile çerçeve boyutu px uyumlu olmalıdır.

 


 

Resim Slayt Manşet (java versiyonu)
Resim Slayt Manşet

 


Yatay Haber Slider Kodu

Yatay Haber Slider Kodu


Haber Slider HTML Kodu 700x400Px

Haber Slider HTML Kodu 700x400 Px

 

Resmi Sola Kaydırma Kodu

Resmi Sola Kaydırma Kodu

Resim sola kaydırma kodunda, resim hızını ayarlamak için scrollamount=”10″ değeri üzerinde değişiklik yapabilirsiniz.

 

Yukarı Kayan Haber Bandı Resim Kodu

Yukarı Kayan Haber Bandı Resim Kodu

Yukarı Kayan resim kodu genelde sitesinde Duyuru Panosu, Sondakika Haberler gibi içerikler için kullanılıyor.Resim yukarı doğru kaydığından ziyaretçilerin dikkatini çekme özelliğine sahiptir.
Dikkat etmeniz gereken bir husus var.Resim yukarı doğru kaydığı için yükseklik çok küçük veya çok büyük olmama, sitede hoş durması için en az 350px en fazla 550px aralığında bir yükseklik seçmenizi öneririm.Yukarıdaki görseldeki gibi yazıları siyah yerine farklı renklerde yaparak daha hoş bir baher bandı kodu oluşturabilirsiniz.
Bu kodu bir site sahibi arkadaşa destek amaçlı yapmıştım ( www.kildengelenguzellik.tr.gg )

 

Resim Üzerine Fare Gelince Büyüsün Kodu

Resim Üzerine Fare Gelince Büyüsün Kodu

Bu konuda ik farklı kod var ve ikisi de ayrı ayrı ele  alalım.

Fare resim üzerine gelince genişlerek büyüyen kod:

Burada resim normal görünürken ile büyüyünce elde edilecek resim boyutu kodlama içine belirtilmesi yeterlidir.

Bu resim büyütme kodunu eskiden kullanmış ve denemiştim.Bu kod biraz rahmetli olup üzerine düşerseniz güzel çalışmalar çıkarabilirsiniz.Yukarıdaki gibi kurallar aynı olup, birden fazla resim ekleyebiliyorsunuz.Örneğin şu kod dizisi sadece bir resimi ifade etmektedir ve değişiklik yapacağınız alan bu kısımdır.

<a class=”thumbnail” href=”#thumb”>
<img src=”RESİM 1 URL ADRESİ” width=”100″ height=”75″ border=”0″ align=”center”/><span><img src=”RESİM 1 URL ADRESİ TEKRAR” width=”300″ height=”250″ /></span>

 

3 sn Bekle 2. Resme Geç kodu

3 sn Bekle 2. Resme Geç kodu

3 sn bekleyip 2. resme geçme kodunu yerel bir haber sitesi, siyasilerin  bayram mesajı tebriki için kullanmıştı.Tabi  süre üzerinde ve boyutunda değişiklikler yapmıştı.Sizler nasıl değerlendirirsiniz bilemiyorum ama birilerinin işine yarayacak güzel bir resim kodudur.

 

 

resim slayt Yorum yap
Aşağıya yorum yapmadan, site linkinizi bırakmadan ayrılmayın.
Çünkü o yorumlar size odun, su, ekmek hatta backlink olarak geri dönecektir 😉