Setelah selesai memahami Cara Membuat Website Sederhana HTML & CSS Part 2 , sekarang kita lanjutkan ke part 3. Kali ini kita akan membuat bagian / div utama pada website. Tidak berbeda jauh dari sebelumnya, pada bagian ini akan kita bagi menjadi 2 bagian (kanan & kiri) yang mana sebelah kanan akan menampilkan artikel terbaru dan sebelah kiri (lebih kecil) akan dijadikan sidebar / widget.
Kita buat div pertama sebagai kolom utama (keseluruhan yang membungkus 2 kolom kanan kiri tersebut) dan jangan lupa berikan class pada div tersebut misalnya disini saya beri class nya buaya. Sekarang, didalam buaya ini silahkan berikan 2 div lagi yang akan digunakan untuk kanan & kiri.
<div class="buaya"> <div class="widget"></div> <div class="artikelTerbaru"></div> </div><!--akhir class buaya-->
Pada code tersebut terdapat div utama yaitu buaya dan didalamnya mengandung 2 div lagi yaitu class widget dan class artikelTerbaru yang mana kedua 2 div tersebut akan kita buat berdampingan seperti pada tutorial sebelumnya di part 2. Tapi kali ini class artikelTerbaru akan lebih besar ukurannya dibanding class widget yang hanya sebagai sidebar.
Sekarang terapkan code CSS berikut di style.css nya:
Baca Juga:
/* class buaya */
.buaya {
width: 100%;
overflow: hidden;
background-color: #333;
margin-top: 5px;
}
/* class widget */
.buaya .widget {
width: 245px;
float: left;
background-color: #f90;
}
.buaya .widget .artikelTerlaris {
margin: 0 5px;
}
Perhatikan pada .buaya terdapat overflow:hidden lagi, sama seperti pada penjelasan di part 2 ya ? Kemudian jangan lupa atur lebarnya 100%. Seperti biasa, pada bagian yang dikiri yaitu class widget kita terapkan float:left agar mengapung kekiri dan secara otomatis nanti class artikelTerlaris akan ada disampingnya.
Tentukan lebar untuk class widget sesuai keperluan, biasanya sidebar tidak perlu terlealu lebar maka saya terapkan 245px saja. Lalu pada class artikelTerlaris tidak perlu diberikan lebar agar nanti dia menyesuaikan secara otomatis dan bergantung pada isi didalamnya, cukup tambahkan margin kanan-kiri saja agar tidak terlalu nempel.
Pada div pertama didalam buaya akan menjadi sidebar / widget dan div kedua akan menjadi daftar artikel terbaru dan jangan lupa diberi class pada masing-masing div nya misalnya disini saya akan beri nama class widget pada div pertama dan class artikelTerbaru pada div kedua.
Selanjutnya di bagian div class widget akan saya tampilkan 3 widget yaitu artikel terlaris media sosial dan kontak form / Subscribe. Maka silahkan buat 3 div baru didalam class widget masing-masing div diberi class dengan nama yang diinginkan misalnya class artikelTerlaris, class mediaSosial dan class subscribe.
<div class="buaya"> <div class="widget"> <div class="artikelTerlaris"></div> <div class="mediaSosial"></div> <div class="subscribe"></div> </div> <div class="artikelTerbaru"></div> </div><!--akhir class buaya-->
Kalian dapat menyesuaikan nama class sesuai keinginan dan kalian dapat menentukan berapa jumlah widget didalam class widget. Disini saya contoh kan dengan 3 widget didalam class widget dan masing-masing memiliki jenis yang berbeda.
Pada class artikelTerlaris akan saya tampilkan 3 artikel sebagai artikel terlaris lengkap dengan gambar, judul dan kutpian / excerpt.
<h3>Artikel Terlaris</h3> <img src="images/empat.jpg"> <a href=""><h4>Terlaris Satu</h4></a> <p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/> <img src="images/empat.jpg"> <a href=""><h4>Terlaris Dua</h4></a> <p>ey College in Virginia, looked up one of the more obscure Latin words</p><br/> <img src="images/empat.jpg"> <a href=""><h4>Terlaris Tiga</h4></a> <p>ey College in Virginia, looked up one of the more obscure Latin words</p>
Silahkan terapkan kode tersebut didalam div class artikelTerlaris.
Perhatikan pada kode itu terdapat h3 yang fungsinya sebagai judul dari widget artikelTerlaris agar nanti semua pengunjung paham apa maksud 3 artikel yang ada disini. Ada juga a href didalam tag h4 yang diterapkan sebagai judul artikel terlaris agar dapat diisi link dan dapat di klik oleh pengunjung.
CSS dari widget artikel terlaris saya buat seperti ini
.buaya .widget .artikelTerlaris img {
width: 100px;
height: 50px;
float: left;
margin-right: 2.5px;
}
.buaya .widget .artikelTerlaris h3 {
text-align: center;
margin: 10px 0 10px;
}
.buaya .widget .artikelTerlaris a {
text-decoration: none;
color: #000;
}
/* akhir class widget */
Tambahkan code tersebut di CSS untuk style widget class artikelTerlaris. Pada gambar jangan lupa di float:left agar dapat bersampingan dengan excerpt dan jangan lupa dikasih margin supaya tidak terlalu rapat.
Silahkan sesuaikan style yang kalian inginkan untuk widget class artikelTerlaris ini, jangan terlalu terpaku dengan code diatas karena hanya sekedar contoh saja.
Sampai sini, sidebar telah memiliki 1 widget yang diisi dengan 3 artikel terlaris yang dilengkapi gambar, link, judul dan excerpt. Silahkan Save dan lihat hasilnya di browser. (lihat gambar)
Sampai sini masih semangat ? 😀
Kalo masih bingung, silahkan lihat video tutorialnya disini. Kalo yakin sudah paham, silahkan lanjutkan ke part 4.
Maka keseluruhan code HML CSS dari part 1 sampai part 3 akan seperti ini:
Kesimpulan
Pada part 3 ini tidak berbeda jauh dengan part 2 yang membuat 2 kolom didalam div, tapi sedikit perbedaannya yaitu dari ukuran kolom tapi tetap sama menggunakan overflow:hiddern. Dan pastikan excerpt yang dimasukkan tidak terlalu panjang agar terlihat rapih seperti pada gambar diatas, tapi terserah sih 😀