Cara Membuat Pagination Active dengan W3.CSS

Terucaplah dengan kata yg manis. Tapi tiada guna berucap manis, jika setiap kata yg kau ucapkan adalah ketidakjujuran. Oke pada kesempatan kali ini saya akan berbagi ilmu kepada kalian tentang bagaimana Cara Membuat Pagination Active dengan W3.CSS.

Tutorial pagination yang sudah-sudah kemarin adalah Basic Pagination dan Pagination Arrows. Nah kali ini saya akan memberitahukan kepada kalian tentang Cara Membuat Pagination Active dengan W3.CSS. Yang dimaksud dengan Pagination Active adalah tombol pagination nya sedang aktif pada halaman tersebut.
Contoh pagination yang aktif sedang di halaman 2,
Penampakan nya seperti ini teman-teman:

Oke langsung saja, pertama-tama silahkan teman-teman buat terlebih dahulu file index.html nya.

Kemudian isi di bagian <head> link library CSS nya.

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">

Setelah itu, isi di bagian <body> tag-tag di bawah ini,

<div class="w3-container">
  <h2>Pagination Active</h2>
  <p>Ini adalah pagination yang sedang aktif pada halaman kedua:</p>

  <ul class="w3-pagination">
    <li><a href="#">&laquo;</a></li>
    <li><a href="#">1</a></li>
    <li><a class="w3-green" 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="#">&raquo;</a></li>
  </ul>
</div>

Bagaimana teman-teman untuk Cara Membuat Pagination Active dengan W3.CSS nya? cukup mudah bukan?

Sekian untuk tutorial kali ini, semoga bermanfaat.

Terima kasih

Cara Membuat Pagination Active dengan W3.CSS

Kategori