Html ve Css ile Pagination (Sayfalama Butonları) Yapımı

Bu yazımızda, Html ve Css kullanarak pagination (sayfalama butonları) yapımını öğreneceğiz. Pagination’ı özellikle ETicaret siteleri, Blog siteleri gibi birşeylerin (yazı, ürün vb..) listelendiği sitelerde sıklıkla kullanıyoruz.

Örneğimizi Blog sitesi üzerinden verelim. Anasayfada tüm yazılarımızı yayınladığımızı düşünelim. Yazıların sayısı çok fazla olduğunda hepsini tek sayfada listelemek hem kullanıcı dostu bir yöntem değildir hem de performans açısından sitenin yüklenme hızını yavaşlatacaktır. Bu yüzden genelde pagination yani sayfalama butonlarını kullanıyoruz.

Pagination yapımı gerçekten çok kolay. Aslında tek yaptığımız Html ile bir sırasız liste yapısı oluşturup biraz Css kodu yazmak. Html’de listeler konusunda eksikleriniz olduğunu düşünüyorsanız Html Dersleri 6 – Listeleme Etiketleri yazımı inceleyebilirsiniz.

Css kodlarında küçük değişiklikler yaparak kendi tasarımlarınıza uygun sayfalama butonları oluşturabilirsiniz.

Basit Pagination Html Kodları

Basit Pagination Css Kodları

Pagination Görünümü

pagination-css

 ⇒  İsterseniz Css transform özelliği ile farklı görünümler elde edebilirsiniz.

Sağa Yatmış Pagination Html Kodları

Sağa Yatmış Pagination Css Kodları

Pagination Görünümü

pagination-html

Köşeleri Yuvarlatılmış Pagination Html Kodları

Köşeleri Yuvarlatılmış Pagination Css Kodları

Pagination Görünümü

css-pagination-yapimi

Butonları Tam Yuvarlak Pagination Html Kodları

Butonları Tam Yuvarlak Pagination Css Kodları

Pagination Görünümü

pagination-html-css

Html ve Css ile pagination yapımı bu şekilde.

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

Html ve Css ile ilgili eksikleriniz olduğunu düşünüyorsanız, Html ve Css Dersleri ile ilgili yazmış olduğum yazı serilerini inceleyebilirsiniz.

Hiç Css kodu yazmadan Bootstrap class’larını kullanarak pagination yapımını öğrenmek istiyorsanız BOOTSTRAP 4 – PAGINATION (SAYFALAMA BUTONLARI) yazımı okuyabilirsiniz.

Şu yazılarda ilginizi çekebilir.

Html ve Css ile Dikey Çizgi Nasıl Yapılır?

Css ile Toggle Switch Yapımı 

Html ve Css ile Breadcrumb (İçerik Haritası) Yapımı

Css ile Tooltip Yapımı

Html ve Css ile Animasyonlu Arama Kutusu Yapımı

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

Yorum Yazın