CSS3 Pagination dan Multiple-Columns

Assalamu'alaikum wr.wb.

A. Pengertian 

   Pagination adalah proses membagi dokumen ke dalam diskrit halaman , baik halaman elektronik atau halaman yang dicetak.

 Multiple-Columns berguna untuk mempermudah dalam mendefinisikan beberapa kolom teks seperti koran.

B. Latar Belakang

 

     Latar belakang dari pembuatan pagination dan multiple columns ini dimaksudkan untuk memperindah dan mempermudah user jika akan melihat halaman lain melalui link yang dimasukkan ke dalam pagination. Multiple columns digunakan mempermudah dalam mendefinisikan beberapa kolom teks seperti koran.

C. Alat dan Bahan

• Laptop
• Sublime Text (Text-Editor)
• Browser

D. Tujuan 

• Untuk mempelajari pengertian dan penerapan dari sintaks serta macam-macam css3 pagination
• Untuk mempelajari dan menerapkan sintaks dan maacam-macam css3 multiple columns.

E. Tahap Pelaksanaan

    1. Pagination

         Sintaks dasar dari pembuatan pagination itu sebagai berikut. Pembuatan dari pagination ternyata menggunakan Unordered tetapi menggunakan tambahan berupa css. Penulisan sintaks dibawah ini terdapat di bawah head yang diapit dengan sintaks <styles></styles>

         ul.pagination {
             display: inline-block;
             padding: 0;
             margin: 0;         }

         ul.pagination li {display: inline;}

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

•  Dibawah ini merupakan contoh dan macam-macam dari pagination :

a. Pagination Sederhana  

    Dibawah ini merupakan pengcodingan dari pagination sederhana.

 - Keterangan :

• ul.pagination : berfungsi untuk membuat daftar dengan penanda simbol.
• li : berfungsi untuk menambah daftar isi dari tag <ul></ul>.
• display : berfungsi untuk menentukan suatu elemen ditampilkan.
• margin : berfungsi untuk memberikan spasi diluar element.
• padding : berfungi untuk memberikan spasi didalam element.
• float : berfungsi untuk membut layout.
• text-decoration : berfungsi memberikan efek dekorasi dalam suatu teks.

Pemanggilan dari sintaks yang diapit <style></style>

Sintaks penuh dari penerapan coding untuk membuat simple pagination

Hasil dari pengcodingan diatas

b. Pagination dengan efek active dan hover  

    Dibawah ini merupakan pengcodingan dari pagination dengan efek active dan hover.

 -Keterangan :

• ul.pagination : berfungsi untuk membuat daftar dengan penanda simbol.
• li : berfungsi untuk menambah daftar isi dari tag <ul></ul>.
• display : berfungsi untuk menentukan suatu elemen ditampilkan.
• margin : berfungsi untuk memberikan spasi diluar element.
• padding : berfungi untuk memberikan spasi didalam element.
• float : berfungsi untuk membut layout.
• text-decoration : berfungsi memberikan efek dekorasi dalam suatu teks. 
• backround-color : digunakan untuk memberikan warna pada latar belakang dari pagination.
• hover : digunakan  untuk mengubah warna setiap link halaman saat menggerakkan mouse di atas.
• font-size : digunakan untuk merubah ukuran dari pagination yang dibuat.
• color : digunakan untuk memberikan efek berwarna dari tulisan.
• backround-color : digunakan untuk memberikan warna pada latar belakang dari pagination.
• hover : digunakan  untuk mengubah warna setiap link halaman saat menggerakkan mouse di atas.
• active : digunakan untuk memberikan efek sorot/fokus pada kolom pagination.

Pemanggilan dari css yang ditulis diatas tadi

Gambar 1

Gambar 2. Gambar 1 dan 2 merupakan sintaks penuh dari border pagination

Hasil pengcodingan

• Hasil dari pengcodingan diatas yang memberikan efek warna kuning pada tulisan dan jika kursor di arahkan ke angka akan memberikan efek warna coklat. Itu merupakan penerapan dari sintaks hover.

c. Pagination  Hoverable dengan transisi

    Dibawah ini merupakan pengcodingan dari pagination hoverable dengan transisi.

 - Keterangan :

• transition : berfungsi untuk membuat animasi pada hover jika kursor diarahkan maka akan berubah gaya. 
• color : digunakan untuk memberikan efek berwarna dari tulisan.
• ul.pagination : berfungsi untuk membuat daftar dengan penanda simbol.
• li : berfungsi untuk menambah daftar isi dari tag <ul></ul>.
• display : berfungsi untuk menentukan suatu elemen ditampilkan.
• margin : berfungsi untuk memberikan spasi diluar element.
• padding : berfungi untuk memberikan spasi didalam element.
• float : berfungsi untuk membut layout.
• text-decoration : berfungsi memberikan efek dekorasi dalam suatu teks. 
• backround-color : digunakan untuk memberikan warna pada latar belakang dari pagination.
• hover : digunakan  untuk mengubah warna setiap link halaman saat menggerakkan mouse di atas.

Pemanggilan dari sintaks css yang ditulis diatas tadi

Gambar 1

Gambar 2. Gambar 1 dan 2 merupakan sintaks penuh dari border pagination

• Hasil dari pengcodingan diatas akan menghasilkan efek jika kursor di arahkan arah angka.

d. Pagination Border

    Dibawah ini merupakan pengcodingan dari pagination menggunakan border dalam penerapannya.

 - Keterangan :

• border : berfungsi untuk memberikan efek pembatas dalam pagination.
• ul.pagination : berfungsi untuk membuat daftar dengan penanda simbol.
• li : berfungsi untuk menambah daftar isi dari tag <ul></ul>.
• display : berfungsi untuk menentukan suatu elemen ditampilkan.
• margin : berfungsi untuk memberikan spasi diluar element.
• padding : berfungi untuk memberikan spasi didalam element.
• float : berfungsi untuk membut layout.
• text-decoration : berfungsi memberikan efek dekorasi dalam suatu teks. 
• backround-color : digunakan untuk memberikan warna pada latar belakang dari pagination.
• hover : digunakan  untuk mengubah warna setiap link halaman saat menggerakkan mouse di atas.
• color : digunakan untuk memberikan efek berwarna dari tulisan. 

Pemanggilan dari penulisan sintaks css yang kita buat diatas tadi.

Gambar 1

Gambar 2. Gambar 1 dan 2 merupakan sintaks penuh dari border pagination

Hasil dari pengcodingan

• Hasil dari pengcodingan tersebut terletak pada angka 5 terdapat border warna kuning.

e. Pagination Size

    Dibawah ini merupakan pengcodingan dari pagination menggunakan size dalam penerapannya.

- Keterangan :

• ul.pagination : berfungsi untuk membuat daftar dengan penanda simbol.
• li : berfungsi untuk menambah daftar isi dari tag <ul></ul>.
• display : berfungsi untuk menentukan suatu elemen ditampilkan.
• margin : berfungsi untuk memberikan spasi diluar element.
• padding : berfungi untuk memberikan spasi didalam element.
• float : berfungsi untuk membut layout.
• text-decoration : berfungsi memberikan efek dekorasi dalam suatu teks. 
• backround-color : digunakan untuk memberikan warna pada latar belakang dari pagination.
• hover : digunakan  untuk mengubah warna setiap link halaman saat menggerakkan mouse di atas.
• color : digunakan untuk memberikan efek berwarna dari tulisan.
• font-size : digunakan untuk merubah ukuran dari pagination yang dibuat.

Pemanggilan sintaks css yang diapit oleh sintaks <style></style>

Gambar 1

Gambar 2. Gambar 1 dan 2 merupakan sintaks penuh dari border pagination

• Hasil dari pengcodingan tersebut terdapat perubahan dari ukuran huruf pagination yang lebih besar. Didalam pengcodingan diatas kita merubah fontnya menjadi 20 px.

f.  Navigasi Pagination

    Dibawah ini merupakan penerapan dari pagination berupa navigasi dalam penerapannya.

  - Keterangan :

• ul.pagination : berfungsi untuk membuat daftar dengan penanda simbol.
• li : berfungsi untuk menambah daftar isi dari tag <ul></ul>.
• color : digunakan untuk memberikan efek berwarna dari tulisan
• display : berfungsi untuk menentukan suatu elemen ditampilkan.
• margin : berfungsi untuk memberikan spasi diluar element.
• padding : berfungi untuk memberikan spasi didalam element.
• float : berfungsi untuk membut layout.
• text-decoration : berfungsi memberikan efek dekorasi dalam suatu teks. 
• backround-color : digunakan untuk memberikan warna pada latar belakang dari pagination.
• hover : digunakan  untuk mengubah warna setiap link halaman saat menggerakkan mouse di atas.
• font-size : digunakan untuk merubah ukuran dari pagination yang dibuat.

Gambar 1

Gambar 2. Gambar 1 dan Gambar 2 merupakan coding penuh dari pembuatan dari pagination navigasi

• Hasil dari pengcodingan diatas, gambar yang diatas merupakan pagination bukan button. Memiliki border yang berwarna kuning.

g. Breadcrumbs

    Breadcrums merupakan versi lain dari pagination yang berfungsi untuk membuat sebuah blog atau website disukai search engine. Dibawah ini merupakan contoh pengcodingan dari breadcrums.

 -  Keterangan :

• breatcrums : merupakan nama class.
• list-style : merupakan gaya yang akan diatur untuk memperindah tampilan dari list.
• color : berfungsi untuk memberikan warna dari font.
• :before : digunakan untuk menambahkan elemen sebelum elemen utama. 
• padding : digunakan untuk memberikan spasi didalam element.
• background-color : digunakan untuk memberi latar belakang dari pagination breatcrums.

   2. Multiple-Columns

          Multiple-Columns ini digunakan untuk membuat beberapan kolom seperti koran. Macam-macam sifat dari multiple-columns yaitu :

• Columns-count : digunakan untuk menentukan jumlah kolom elemen harus dibagi ke dalam.
• Columns-gap : digunakan untuk menentukan kesenjangan antara kolom.
• Columns-rule-style : digunakan untuk menentukan gaya aturan antara kolom.
• Columns-rule-width : digunakan untuk menentukan lebar aturan antara kolom.
• Columns-rule-color : digunakan untuk menentukan warna aturan antara kolom.
• Columns-rule : digunakan untuk setting semua kolom aturan diatas.
• Columns-span : digunakan untuk menentukan berapa banyak kolom elemen harus di span.
• Columns-width : digunakan untuk menetapkan lebar optimal untuk kolom.

Dibawah ini merupakan contoh dari penerapan dari multiple-columns :

i.  Columns-count : digunakan untuk menentukan jumlah kolom elemen harus dibagi ke dalam.

Coding ini terletak di bawah sintaks <head>

- Keterangan :

• -moz- : digunakan untuk mensupport mozila untuk mengakses file tersebut di browser.
• -webkit- : digunakan untuk mensupport opera, safari untuk mengakses file tersebut di browser.

Hasil dari pengcodingan diatas. Hasilnya menjadi 3 kolom.

ii. Columns-gap : digunakan untuk menentukan kesenjangan antara kolom.

Keterangan :

• -moz- : digunakan untuk mensupport mozila untuk mengakses file tersebut di browser.
• -webkit- : digunakan untuk mensupport opera, safari untuk mengakses file tersebut di browser.

Hasil dari pengcodingan diatas

 iii. Columns-rule-style : digunakan untuk menentukan gaya aturan antara kolom.

 Keterangan :

• -moz- : digunakan untuk mensupport mozila untuk mengakses file tersebut di browser.
• -webkit- : digunakan untuk mensupport opera, safari untuk mengakses file tersebut di browser.

iv. Columns-rule-width : digunakan untuk menentukan lebar aturan antara kolom.

Keterangan :

•  -moz- : digunakan untuk mensupport mozila untuk mengakses file tersebut di browser.

• -webkit- : digunakan untuk mensupport opera, safari untuk mengakses file tersebut di browser.

Hasil dari pengcodingan diatas menghasilkan

 v. Columns-rule-color : digunakan untuk menentukan warna aturan antara kolom. Disamping sintak tersebut kita juga bisa menggunakan sintak column-rule :""  solid "".

Keterangan :

• -moz- : digunakan untuk mensupport mozila untuk mengakses file tersebut di browser.
• -webkit- : digunakan untuk mensupport opera, safari untuk mengakses file tersebut di browser.

Hasil dari pengcodingan diatas.

vii. Columns-span : digunakan untuk menentukan berapa banyak kolom elemen harus di span. 

 Keterangan :

• h2 : merupakan format ukuran judul.
• column-span : digunakan untuk membuat sebuah span di dalam columns tersebut.

viii. Columns-width : digunakan untuk menetapkan lebar optimal untuk kolom.

Keterangan :

• width : digunakan untuk mengatur lebar dari columns yang dibuat.

F. Kesimpulan

   Dari penerapan sintaks diatas dapat ditarik kesimpulan bahwa untuk membuat efek suatu objek lebih berbeda menggunakan atribut yang berbeda-beda pula. Dalam membuat pagination saja kita membutuhkan beberapa macam atribut yaitu color, float, background color, hover dan masih banyak lagi. Begitu pula dengan pembuatan dari multiple columns yang menggunakan atribut coloums, colums-ruler dan lain-lain.

G. Referensi

• http://www.w3schools.com/css/ 
• https://en.wikipedia.org/wiki/Pagination

Sekian dan Terimakasih

SMK Bisa!!

Wasalamu'alaikum wr.wb