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.

 Önemli :  İkonlar için Font Awesome Versiyon 5.3.1’i kullanıyorum. Sizde örnekleri kendi bilgisayarınızda uygularken Html sayfanızın <head> </head> etiketleri arasına aşağıdaki CDN linkini eklemeyi unutmayın. Font Awesome hakkında daha fazla bilgi edinmek için tıklayınız.  

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

E-BÜLTEN ABONELİĞİ

Adını ve E-Posta adresini yazarak Html, Css, Javascript, Jquery, Bootstrap, Web Tasarım, C#, Asp.Net MVC, MSSQL ve daha birçok alanda ders anlatımlarından ve uygulamalı örneklerden anında haberdar olabilirsin.
ABONE OL
close-link