Indonesia

Tutorial CSS

Tutoriak CSS3

CSS Tingkat Lanjut

Referensi CSS

CSS Responsif

CSS - Pengaturan Halaman: Panduan untuk Pemula

Hai teman-teman, para bintang desain web masa depan! Hari ini, kita akan melihat dunia yang menakjubkan dari CSS pengaturan halaman. Jangan khawatir jika Anda belum pernah menulis baris kode sebelumnya – saya akan menjadi panduan ramah Anda dalam perjalanan yang menarik ini. Pada akhir tutorial ini, Anda akan dapat membuat pengaturan halaman yang indah dan berfungsi seperti seorang profesional!

CSS - Pagination

Apa Itu Pengaturan Halaman?

Sebelum kita memulai, mari bicarakan apa sebenarnya pengaturan halaman itu. Bayangkan Anda membaca buku. Daripada semua teks dipadatkan ke dalam satu halaman yang tak berakhir, itu dibagi menjadi bagian yang mudah ditangani – itu pengaturan halaman di dunia fisik. Di situs web, pengaturan halaman membantu membagi daftar panjang konten (seperti hasil pencarian atau artikel blog) ke halaman yang terpisah. Itu seperti memberikan pengguna Anda tombol "ganti halaman" virtual!

Sekarang, mari kita genggam lengan dan mulai!

Langkah 1: Tambahkan Markup HTML

Pertama-tama, kita perlu menciptakan struktur dasar pengaturan halaman kita. Pahami ini sebagai membuat kerangka desain kita.

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">4</a>
<a href="#">5</a>
<a href="#">&raquo;</a>
</div>

Dalam contoh ini, kita menciptakan <div> dengan kelas "pagination". Di dalamnya, kita memiliki beberapa <a> tag (tautan) yang mewakili nomor halaman kita. &laquo; dan &raquo; adalah karakter khusus untuk panah kiri dan kanan – keren, kan?

Langkah 2: Definisikan Kelas CSS

Sekarang kita memiliki kerangka, mari kita tambahkan beberapa gaya! Kita akan mulai dengan beberapa CSS dasar untuk memberikan bentuk pengaturan halaman kita.

.pagination {
display: inline-block;
}

.pagination a {
color: hitam;
float: left;
padding: 8px 16px;
text-decoration: none;
}

Ini adalah apa yang dilakukannya:

  • display: inline-block; membuat wadah pengaturan halaman kita berperilaku seperti elemen inline tapi memungkinkan kita menyetel lebar dan tinggi.
  • Kita menggaya semua <a> tag di dalam div pengaturan halaman kita.
  • float: left; membuat tautan kita rata kiri.
  • padding memberikan ruang sekitar teks kita.
  • text-decoration: none; menghapus garis bawah dari tautan kita.

Langkah 3: Gaya Tautan Pengaturan Halaman

Marilah kita membuat tautan pengaturan halaman kita menjadi lebih menarik!

.pagination a.active {
background-color: #4CAF50;
color: putih;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

Kode ini melakukan dua hal menarik:

  1. Itu menggaya halaman "aktif" (halaman saat ini) dengan latar belakang hijau dan teks putih.
  2. Itu menambahkan efek hover ke semua tautan lain, mengubah warna latar belakang saat Anda melewati mouse di atasnya.

Pengaturan Halaman CSS Sederhana

Selamat! Anda telah menciptakan pengaturan halaman sederhana dan berfungsi. Tetapi mengapa berhenti di sini? mari kita jelajahi beberapa variasi yang menarik!

CSS Pengaturan Halaman Aktif dan Dapat Di-hover

Ingin membuat pengaturan halaman Anda lebih interaktif? Cobalah ini:

.pagination a {
transition: background-color 0.3s;
}

.pagination a.active {
background-color: #4CAF50;
color: putih;
}

.pagination a:hover:not(.active) {
background-color: #ddd;
}

Properti transition menambahkan efek perubahan warna halus saat hover di atas tautan. Itu seperti magis!

CSS Tombol Aktif dan Dapat Di-hover yang Berbentuk Bulat

Marilah kita memberikan tombol kita beberapa busur:

.pagination a {
border-radius: 5px;
margin: 0 4px;
}

border-radius melengkungkan sudut tombol kita, sedangkan margin menambahkan ruang antara mereka. Tidak itu terlihat keren?

CSS Efek Transisi Hover

Ingin menambahkan sesuatu yang menarik? Cobalah efek skala halus ini:

.pagination a {
transition: transform 0.3s;
}

.pagination a:hover {
transform: scale(1.1);
}

Sekarang tautan Anda akan sedikit tumbuh saat dihover. Itu seperti mereka mencoba untuk diklik!

CSS Pengaturan Halaman dengan Bendera

Marilah kita menambahkan beberapa bendera untuk membuat pengaturan halaman kita tampak lebih menonjol:

.pagination a {
border: 1px solid #ddd;
}

Garis ini menambahkan bendera abu-abu di sekitar setiap tautan. Itu menunjukkan bagaimana perubahan kecil bisa membuat perbedaan besar!

CSS Bendera Bulat

Ingin mempermulus bendera itu? Marilah kita bulatkan mereka:

.pagination a {
border-radius: 50%;
}

Ini mengubah tombol kotak kita menjadi lingkaran sempurna. Bagaimana itu menarik?

CSS Jarak Antara Tautan

kadang-kadang, kita butuh sedikit ruang tambahan:

.pagination a {
margin: 0 4px;
}

Ini menambahkan jarak kecil antara setiap tautan, memberikan pengaturan halaman Anda rasa ruang yang lebih luas.

CSS Ukuran Pengaturan Halaman

Salah satu ukuran tidak cocok untuk semua. Mari kita belajar bagaimana mengatur ukuran:

.pagination a {
font-size: 22px;
padding: 10px 20px;
}

Coba eksperimen dengan nilai ini untuk menemukan ukuran yang sempurna untuk desain Anda!

CSS Pengaturan Halaman Terpusat

Ingin membuat pengaturan halaman Anda duduk rapi di tengah halaman?

.pagination {
text-align: center;
}

Baris ini menengahkan seluruh blok pengaturan halaman Anda. Magic!

CSS Pengaturan Halaman dengan Tombol Sebelum dan Sesudah

Marilah kita menambahkan beberapa tombol navigasi:

<div class="pagination">
<a href="#">&laquo; Sebelum</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">Sesudah &raquo;</a>
</div>
.pagination a:first-child,
.pagination a:last-child {
background-color: #f1f1f1;
font-weight: bold;
}

Ini menambahkan tombol "Sebelum" dan "Sesudah" dan menggaya mereka berbeda.

CSS Pengaturan Halaman dengan BreadCrumb

Ingin menunjukkan pengguna Anda di mana mereka berada dalam urutan halaman? Cobalah ini:

<div class="pagination">
<a href="#">&laquo;</a>
<a href="#">1</a>
<a href="#" class="active">2</a>
<a href="#">3</a>
<a href="#">&raquo;</a>
<p>Halaman 2 dari 3</p>
</div>
.pagination p {
margin-left: 10px;
display: inline-block;
}

Ini menambahkan indikator teks yang menunjukkan halaman saat ini dan total halaman.

CSS Pengaturan Halaman dengan Daftar

Akhirnya, mari kita coba pengaturan halaman dengan gaya daftar:

<ul class="pagination">
<li><a href="#">&laquo;</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="#">&raquo;</a></li>
</ul>
.pagination {
list-style-type: none;
padding: 0;
}

.pagination li {
display: inline-block;
}

Ini menciptakan tata letak pengaturan halaman yang bersih dan berdasarkan daftar.

Dan itu dia, teman-teman! Anda telah belajar tentang pengaturan halaman CSS. Ingat, kunci untuk menguasai teknik ini adalah latihan. Jadi, cobalah eksperimen dengan gaya ini, campur dan gabungkan mereka, dan buat desain pengaturan halaman Anda sendiri. Siapa tahu? Anda mungkin menciptakan hal yang besar dalam desain web!

Semoga Anda senang mengoding, dan may your pages always be perfectly paginated!

Credits: Image by storyset

Tutorial Sebelumnya:
CSS - Tombol
Tutorial Selanjutnya:
CSS - Variabel