Membuat Website HTML CSS Sederhana Part 11 / 11 – Last But Not Least

Setelah mempelajari langkah2 awal dan info dasar sebelum membuat website di Part 1, Part 2, Part 3, Part 4 Part 5, Part 6, Part 7, Part 8, Part 9 dan part 10, sekarang kita lanjutkan ke part terakhir yaitu part 11. Tutorial kali ini akan melengkapi tutorial-tutorial sebelumnya, hanya tambahan saja. Kita akan menambahkan paginasi / pagination pada bagian bawah didaftar blog terbaru (home), hanya berupa tulisan Sebelumnya dan Selanjutnya ditambah tanda panah kanan dan kiri.

Buka file html home / beranda nya kemudian tambahkan kode berikut dibagian bawah setelah post terakhir / post terbawah dihalaman home:

<div class="pagination">
   <li class="kiri"><a href="">&larr; Sebelumnya</a></li>
   <li class="kanan"><a href="">Selanjutnya &rarr;</a></li>
</div>

Tambahkan kode berikut dibawah post terakhir (setelah paragraf terakhir tapi masih didalam class artikelTerbaru). ← disitu artinya panah ke kiri dan → adalah ikon panah ke kanan.

Tentu belum rapih ketika dibuka di browser, tambahkan CSS ini pada file CSS nya:

.buaya .pagination li {
   list-style: none;
   margin: 5px;
}
.buaya .pagination a {
   text-decoration: none;
   color: #fff;
}
.buaya .pagination .kiri {
   float: left;
}
.buaya .pagination .kanan {
   float: right;
}

Kenapa ditulis .buaya sebelum .pagination ? Karena .pagination berada didalam .buaya, supaya lebih spesifik saya tuliskan juga .buaya nya tapi kalo gak mau gak apa-apa. Cuma jaga-jaga aja, siapa tahu ada class pagination lain didalam HTML tersebut jadi bisa dibedakan masing-masing gayanya.

Save dan lihat hasilnya di browser !

Selamat, website HTML sudah selesai. Sekarang kalian sudah paham bagaimana struktur website dan dapat menelusurinya lebih lanjut / membuat situs sesuai yang diinginkan dengan dasar HTML CSS ini.

Terimakasih sudah mengikuti tutorial membuat website HTML CSS Sederhana ini dari part 1 sampai part 11

Mudah kan ? Kalo masih bingung silahkan lihat video tutorial part 11 disini atau klik disini untuk melihat semua video tutorial dari part 1 sampai part 11 atau tinggalkan komentar dibawah untuk bertanya.

Mau download file ?

Setelah menyelesaikan tutorial ini dari awal, dapat download file secara keseluruhan disini (bisa untuk pengguna yang ingin code original dari tutorial ini karena beberapa pengguna mungkin mengalami masalah ketika mengikuti tutorial tanpa melihat code original ini). Password: www.riobermano.com

Apa yang harus saya lakukan selanjutnya ?

Pada tutorial ini hanya mencontohkan satu halaman saja, selanjutnya kalian dapat membuat beberapa halaman yang diperlukan seperti halaman kontak / halaman lainnya. Lihat semua tutorial HTML & CSS di situs ini untuk melengkapi pengetahuan tentang HTML & CSS dan bisa diterapkan juga ke situs yang baru saja dibuat seperti situs di tutorial ini.

Mau membuat website responsive menggunakan Bootstrap ?

Ada juga tutorial membuat website responsive menggunakan framework Bootstrap (setelah membuat website HTML & CSS part 1 sampai part 11 tidak akan sulit mempelajari Bootstrap). Lihat Tutorial membuat website sederhana Bootstrap disini.

Selamat mencoba !