Html, Css ve JQuery ile Haber Galerisi Yapımı (News Gallery)

Bu yazımda news gallery yani haber sitelerini açtığımızda manşet haberlerin bir resim galerisi olarak gösterildiği alanın nasıl yapıldığını anlatacağım.

Haber galerisi yapımı düşünüldüğü kadar zor bir hadise değildir. Web sayfalarımıza haber galerisi eklemek için eklenti aramamıza hiç gerek yok. Html, Css ve Jquery kodları yazarak kendimiz de yapabiliriz.

Yazacağımız kodları kendi bilgisayarınızda uygulayıp bazı yerlerini değiştirerek tarayıcıdaki değişimleri incelemeye çalışın. Böylece kodları çok daha hızlı kavramış olursunuz. 

Kodlarımızı yazdıktan sonra uygulamamız şu şekilde olacak.  

html-haber-galerisi-yapimi-news-gallery

 Not :  Resimlerin boyutunu 800×300 px olarak ayarladım.

Gördüğünüz gibi haber sitelerinde manşet haberlerin gösterildiği galerinin aynısını yapacağız.

 ⇒  Galerinin sol üst köşesinde toplam kaç haber olduğunu ve o an aktif olan haberin kaçıncı haber olduğunu görebiliyoruz.

 ⇒  Galerinin sağında ve solunda olan ok işaretleriyle önceki ve sonraki haberlere geçebiliyoruz.

 ⇒  Aktif olan resmin hemen altında ilgili haberin başlığını yazabiliyoruz.

 ⇒  Son olarak tüm haberlerin resimlerini en altta daha küçük boyutta görebiliyoruz.

Yazacağımız kodlar üzerinde istediğiniz değişiklikleri yaparak kendi web sayfalarınıza uygun hale getirebilirsiniz.

Konuyu daha fazla uzatmadan haber galerilerinin yapımına geçelim. 

 ⇒  img etiketlerinin src niteliklerine kullanmak istediğiniz resimlerin Url‘lerini yazmalısınız.

News Gallery Css Kodları 

News Gallery Jquery Kodları 

Html, Css ve Jquery kodları yazarak haber galerilerinin yapımı bu şekilde.

Umarım sizin için faydalı bir yazı olmuştur.

Şu yazılar da ilginizi çekebilir.

Responsive Menü Yapımı

Css ile Html İletişim Formu (İletişim Sayfası) Oluşturma

Bootstrap 4 ile İletişim Formu (İletişim Sayfası) Oluşturma

Yeni bir yazımda görüşmek üzere.

Kaynaklar

https://www.w3schools.com/

Yorum Yazın