Yazılar geri dön

Siteye Haber ve Duyuru Akışı Eklemek

Özellikle haber sitelerinin vazgeçilmez öğesi olan akan anons pencereleri sizlere hem dinamik hem de kullanşlı bir sunum imkanı sağlıyor. Bu yapıları sizler de web sitenize kolayca eklemeniz için   awNotices’i hazırladık.

awNotices

HTML5, CSS3 ve jQuery ile hazırlanmış yapı ikon desteği için de Font Awesome’ı kullanmakta. Flat yapıdaki tasarım, değiştirilebilir renk ve icon seçenekleriyle kolay kullanım ve şık tasarımı bir arada sunuyor.

awNotices’in çalışan ve basit örneğini indirmek için aşağıdaki linki kullanabilirsiniz.

HTML Kodları

awNotices’i aktif kılmak için yapmanız gereken tek şey .awNotices classını barındıran bir yapıya link halinde başlıkları girmek. Gerisi kendiliğinden çalışacaktır. Hadi gelin örnek bir yapı oluşturalım.

CSS Kodları

Renk tanımları ve diğerleri için birkaç satır CSS kodu yazmamız gerekiyor. Hazırladığımız örnek Font Awesome‘ın ikonlarını kullandık. Eğer Font Awesome hakkında detaylı bilgi almak isterseniz burayı tıklayın.

Bu ikonları direkt olarak CDN üzerinden sitenize eklemek için de aşağıdaki kodu kullanabilirsiniz.

Son olarak fonksiyonalite için jQuery kodlarımızı ekleyelim.

jQuery Kodları

Öncelikle sayfanızda jQuery tanımlı olup olmadığına bakın. Eğer yoksa Body‘nin bittiği yere, tanımının hemen öncesine jQuery’i ekleyerek devam edelim.

İlk olarak durdur/oynat butonunu, sonrasında da tetikleyici classımızı ekleyelim.

Slider şeklinde çalışan yapıyı aktif kılacak ilk fonksiyonumuzu yazalım.

Artık durdur/oynat butonunun arkasını doldurabilirsiniz. Beraberinde de çalıştırıcı tanımımızı yapalım.

Bu kadar. Web sayfanıza eklemeniz gereken tek JavaScript kodu aşağıdaki olacaktır.

Bu kod her 4.5 saniyede bir değişen haber akışını çalışır kılar.

İçeriği Puanlayabilirsiniz !

Değerlendirmek için yıldıza tıklayın!

Ortalama puan 0 / 5. Oy sayısı: 0

Şimdiye kadar oy yok! Bu gönderiyi ilk değerlendiren siz olun.

Yazılar geri dön