İsaCoturBlog

Resim Slayt Kodlari

Web Sitene Resim Slider Kodu Ekle

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.
isacotur.tr.gg/Resimlere-Alt-ve-Title-Eklemek.htm tıklayın.

HTML KOD TEST EDİTÖRÜ

HTML KOD TEST EDİTÖRÜ

Aşağıda beğendiğiniz resim slayt kodunun nasıl çalıştığını test etmeniz ve üzerinde değişiklikler yapabilmek için tıklayın  isacotur.tr.gg/Kod-Test-Editor.htm

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 700x400 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  696x241 Resim Kodu

Manşet Slider  696x241 Resim Kodu



Yatay Resim Slayt 680x320 Kodu Ekle

Resim Slayt Kodu 680x320

680x320 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 700x400 Resimli Haber Slayt Kodu

Yatay 700x400 Resimli Haber Slayt Kodu

Yatay resimli 700x400 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 1120x630 Resim Slayt Kodu

Büyük 1120x630 Resim Slayt Kodu

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



Yatay Resim Slider kodu ekleme 550x310

Yatay Resim Slider kodu ekleme

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



Yatay Resim Slider Kodu Ekle

Yatay resim slider kodu ekle


Manşet Silder 570x320 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 700x400Px


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="https://img.webme.com/pic/i/isacotur/Google_1sirada_cikmak.png" width="100" height="75" border="0" align="center"/><span><img src="https://img.webme.com/pic/i/isacotur/Google_1sirada_cikmak.png" 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.



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



Bu sayfa hakkındaki son yorum:
Yorumu gönderen: Doğukan Şah ALTAN, 11.05.2017, 04:15 (UTC):
Sitenizden aldığım kodları web siteme eklemek istiyorum ama hata veriyor bana yardım edebilir misiniz acaba? Team weawer üzerinden veya skype üzerinden lütfen.İyi Çalışmalar.

Yorumu gönderen: Murat Aras , 10.05.2017, 23:43 (UTC):
Sizin slaytları kullanmak istiyorum ama bir şey soracağım. Ben anasayfada yeni gönderi yapıldığı zaman o gönderinin slayta geçmesini istiyorum nasıl yapabilirim?

Yorumu gönderen: ahmet al, 18.01.2017, 19:13 (UTC):
Emekler için çok teşekkürler. Kodların hepsi çalışıyor

Yorumu gönderen: Yaşar kiraz, 15.01.2017, 23:39 (UTC):
Sağ tık neden çalışmıyor hocam?

Yorumu gönderen: admin, 13.11.2016, 03:11 (UTC):
Resim slaylarını incelerken kod test editörümüzü kullanmak ister misiniz?
İşte Yenilenen kod test editörü linkimiz:
http://isacotur.tr.gg/Kod-Test-Editor.htm

Yorumu gönderen: Admin, 22.02.2016, 17:16 (UTC):
Sayın ziyaretçimiz "ibarem"
-kodu isteğiniz üzerine üzerinde çalışıp http://isacotur.tr.gg/KOD-TEST-ETME.htm sayfasında test ederek 12 tane resim eklenebilecek şekilde tekrardan hazırlayıp mail olarak gönderiyorum.
Kod sitenizde yayınlanınca linkini gönderirseniz görmek isterim.(Admin)

Yorumu gönderen: ibarem, 19.02.2016, 21:53 (UTC):
Öncelikle emekleriniz için çok teşekkürler.Bir sorum olacaktı.
Yatay Resim Slider kodu ekleme 700x300
bu başlıkta verilen slider saysını nasıl artırabiliriz?

Yorumu gönderen: napolyon29, 01.05.2015, 16:02 (UTC):
hocam en alttaki resmi yanyana birkactane acabilmek için ne yapmamız gerekıyor ?

Yorumu gönderen: Admin, 02.10.2014, 10:32 (UTC):
sayfa sonunda bulunan 5 sn bekle 2. resme geç kodu yeniden düzenlenmiş olup bu gibi acil durumlarda sayfa altında bulunan "Sosyal Ağlarda Bizi Bulun" linkinde *İLETİŞİM* tıklayarak veya https://www.facebook.com/isacoturtrgg smj bırakabilirsiniz.

keyifli çalışmalar dilerim.

Yorumu gönderen: mustafa, 29.09.2014, 21:26 (UTC):
en alttaki kod ve en alttaki slayt birbiriyle mi ilişkilidir?



Bu sayfa hakkında yorum ekle:
İsmin:
Mesajınız:

Sosyal Medyada Bizi Bulun

  •  
  • Linkedin instagram Pinterest foursquare

    Hediye Fabrikası Gelir Ortaklığı Reklamı

  • Gencay kete blog logo
  • ulticanpro blog logo


  • E-Posta Abonesi 231 Takipci

  • e-posta aboneliği
           
       
       
  • => Sen de ücretsiz bir internet sitesi kurmak ister misin? O zaman burayı tıkla! <=