Assallamuallaikum Wr Wb..

css.png


Artikel Sebelumnya = Cara Mengedit Css Bagian Content


Cara Mengedit Css Bagian Pagination Link

Selamat malam kawanku, bagaimana kabar kalian nih? Semoga baik-baik saja iya?

Pada kesempatan kali ini saya akan melanjutkan tutorial belajar mengedit css ke tahap selanjutnya yaitu Cara Mengedit Css Bagian Pagination Links setelah sebelumnya telah sampai pada tahap content, di tahap kali ini saya akan membahas di bagian pagination links. Pagination links itu apa mari kita pelajari lebih dalam lagi di bawah ini !!

Pagination Links adalah selector yang mengatur tempat atau wadah jumlah page (Halaman) yang ada di suatu situs, pagination links berperan sebagai penompang dua selector pengikut lainnya seperti #pagination-links a dan #pagination-links span.

Letak dari selector #pagination-links sendiri secara umum berada tepat di bawah artikel yang paling terakhir di mode homepage, namun posisi ini bisa saja berubah tergantung desain yang telah di rancang oleh creator css tersebut. Penulisan Pagination Links di dalam kode css secara umum seperti di bawah ini !!

#pagination-links { margin:2px 4px;padding:5px;text-align:center;background:#ffffff; } #pagination-links span { margin:2px;padding:4px 3px;background:#3296d7;border:1px solid #222;display:inline-block;color:#fff;text-shadow:0 1px #000;font-weight:bold; } #pagination-links a { margin:2px;padding:4px 3px;background:#f1d407;display:inline-block;border:1px solid #d0b20d;color:#222;font-weight:bold; }


Keterangan :
1. #pagination-links adalah selector yang mengatur alas atau dasar jumlah page di blog.
2. #pagination-links span adalah selector yang mengatur jumlah page yang sudah di klik atau bisa di anggap link mati jumlah page.
3. #pagination-links a adalah selector yang mengatur link aktif jumlah page yang ada di blog.

Sebagai contoh hasil dari kode di atas bisa kalian lihat di tautan berikut ini Preview !!

Seperti yang kalian lihat di halaman preview tersebut bahwa selector Pagination Links memiliki background berwarna putih, lalu selector #pagination-links span memiliki background berwarna biru laut, border berwarna dark atau abu-abu tua, dan selector #pagination-links a memiliki background kuning keemasan, border berwarna gold tua beserta jarak antara link satu dengan lainnya tidak terlalu jauh, dan jarak antara batas elemen ke dalam tidak terlalu dalam.. Hasil tersebut merupakan hasil yang telah saya desain di dalam kode css atau seperti kode yang telah saya tulis di atas !!

Agar kalian lebih mudah untuk memahaminya, saya akan menjelaskan semua property yang saya tulis di atas !!


Baca Juga = Cara Mengedit Css Bagian Top Content


1. Background adalah property untuk mengatur warna latar belakang suatu elemen.
2. Margin adalah property untuk mengatur jarak luar antara elemen satu dengan elemen lainnya.
3. Padding adalah property untuk mengatur jarak dalam suatu elemen, intinya adalah padding mengatur elemen dari batas elemen mengarah ke dalam.
4. Text-align adalah property untuk mengatur posisi konten text berada di left, center, right, atau justify (rata kiri dan kanan).
4. Border adalah property untuk mengatur garis pembatas di suatu elemen.
5. Text-shadow adalah property untuk mengatur bayangan text.
6. Font-weight adalah property untuk mengatur tebal tipisnya suatu text di dalam kontent. Font-weight mempunyai nilai value diantaranya bold dan normal.
7. Display adalah property untuk mengatur bentuk dari suatu elemen, property display memiliki nilai value diantaranya, block, table, inline-block, dan inline-table. Penjelasan tentang display akan saya jabarkan di artikel selanjutnya.
8. Color adalah property untuk mengatur warna text atau huruf yang ada di dalam suatu elemen.

Kode yang saya tulis di atas bisa kalian gunakan untuk mengkreasikan tampilan selector Pagination Links di blog kalian, cuma kalian tinggal mengedit bagian propertynya saja dan kode di atas adalah kode sederhana yang biasa di gunakan. Kalian bisa menambahkan atau mengurangi property di atas sesuai keinginan kalian, oke !!


Baca Juga = Cara Mengedit Css Bagian Header

Demikian yang dapat saya sampaikan tentang Cara Mengedit Css Bagian Pagination Links, semoga apa yang saya sampaikan ini bisa membantu anda untuk belajar mengedit css dan mampu mengkreasikannya. Dan saya meminta maaf jika penyampaiannya sulit di mengerti dan tidak ada screenshootnya, saya hanya bisa menyediakan halaman previewnya saja.
Terima Kasih...!!

Wassallamuallaikum Wr Wb..