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.
|
1 2 3 |
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous"> |
Css kodlarında küçük değişiklikler yaparak kendi tasarımlarınıza uygun sayfalama butonları oluşturabilirsiniz.
Basit Pagination Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="pagination"> <ul> <li><a href="#"><i class="fa fa-angle-left"></i></a></li> <li class="active"><span>1</span></li> <li><a href="#">2</a></li> <li><a href="#">3</a></li> <li><a href="#">4</a></li> <li><a href="#">5</a></li> <li><a href="#"><i class="fa fa-angle-right"></i></a></li> </ul> </div> |
Basit Pagination Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
.pagination ul li { float: left; margin: 0 1px 0 0; background: #909090; list-style: none; } .pagination ul li a, .pagination ul li span { display: block; padding: 0 15px; color: #fff; font-size: 17px; line-height: 38px; text-decoration: none; } .pagination ul li.active { color: #fff; background-color: #4CAF50; } .pagination ul li:hover, .pagination ul li.active { color: #fff; background-color: #4CAF50; } |
Pagination Görünümü
⇒ İsterseniz Css transform özelliği ile farklı görünümler elde edebilirsiniz.
Sağa Yatmış Pagination Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<div class="pagination skew-25"> <ul> <li><a class="skew25" href="#"><i class="fa fa-angle-left"></i></a></li> <li class="active"><span class="skew25">1</span></li> <li><a class="skew25" href="#">2</a></li> <li><a class="skew25" href="#">3</a></li> <li><a class="skew25" href="#">4</a></li> <li><a class="skew25" href="#">5</a></li> <li><a class="skew25" href="#"><i class="fa fa-angle-right"></i></a></li> </ul> </div> |
Sağa Yatmış Pagination Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
.pagination ul li { float: left; margin: 0 1px 0 0; background: #909090; list-style: none; } .pagination ul li a, .pagination ul li span { display: block; padding: 0 17px; color: #fff; font-size: 17px; line-height: 38px; text-decoration: none; } .pagination ul li.active { color: #fff; background-color: #4CAF50; } .pagination ul li:hover, .pagination ul li.active { color: #fff; background-color: #4CAF50; } .skew-25 { -moz-transform: skew(-25deg, 0); -ms-transform: skew(-25deg, 0); -o-transform: skew(-25deg, 0); -webkit-transform: skew(-25deg, 0); transform: skew(-25deg, 0); } .skew25 { -moz-transform: skew(25deg, 0); -ms-transform: skew(25deg, 0); -o-transform: skew(25deg, 0); -webkit-transform: skew(25deg, 0); transform: skew(25deg, 0); } |
Pagination Görünümü
Köşeleri Yuvarlatılmış Pagination Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul class="pagination"> <li><a href="#" class="prev">« </a></li> <li><a href="#">1</a></li> <li> <a href="#" class="active">2</a></li> <li> <a href="#">3</a></li> <li> <a href="#">4</a></li> <li> <a href="#">5</a></li> <li><a href="#" class="next"> »</a></li> </ul> |
Köşeleri Yuvarlatılmış Pagination Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
.pagination { list-style: none; display: inline-block; } .pagination li { display: inline; text-align: center; } .pagination a { float: left; display: block; text-decoration: none; padding: 5px 13px; margin-left: -1px; border: 1px solid transparent; line-height: 1.5; border-color: #ddd; color: #999; background: #fff; } .pagination li:first-child a { -moz-border-radius: 50px 0 0 50px; -webkit-border-radius: 50px; border-radius: 50px 0 0 50px; } .pagination li:last-child a { -moz-border-radius: 0 50px 50px 0; -webkit-border-radius: 0; border-radius: 0 50px 50px 0; } .pagination a:hover { color: #4CAF50; background-color: #eee; } .pagination a.active, .pagination a:active { border-color: #4CAF50; background: #4CAF50; color: #fff; } |
Pagination Görünümü
Butonları Tam Yuvarlak Pagination Html Kodları
|
1 2 3 4 5 6 7 8 9 10 11 |
<ul class="pagination"> <li><a href="#" class="prev">«</a></li> <li><a href="#">1</a></li> <li> <a href="#" class="active">2</a></li> <li> <a href="#">3</a></li> <li> <a href="#">4</a></li> <li> <a href="#">5</a></li> <li><a href="#" class="next">»</a></li> </ul> |
Butonları Tam Yuvarlak Pagination Css Kodları
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 |
.pagination li { display: inline; text-align: center; } .pagination a { float: left; display: block; text-decoration: none; color: #808080; margin-left: 2px; padding: 0; width: 35px; height: 35px; line-height: 35px; -moz-border-radius: 100%; -webkit-border-radius: 100%; border-radius: 100%; } .pagination a:hover { background-color: lightblue; } .pagination a.active, .pagination a:active { background-color: lightblue; } |
Pagination Görünümü
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?
Html ve Css ile Breadcrumb (İçerik Haritası) Yapımı
Html ve Css ile Animasyonlu Arama Kutusu Yapımı
Yeni bir yazımda görüşmek üzere.
 Yapımı){kind=link}