Kali ini kita akan lanjutkan dari tutorial membuat website sederhana HTML CSS sebelumnya (part 3) dengan membuat daftar artikel terbaru (blog) di kolom sebelah kanan. Pada umumnya, daftar artikel / post terbaru sebuah blog itu menampilkan judul, gambar andalan, kutipan / excerpt dan link menuju artikel tersebut.
Pada part 3 kita akan membuat 3 widget di sidebar kiri tapi baru selesai 1 widget saja yaitu widget class artikelTerlaris, kita skip dulu untuk widget-widget lainnya dan kita lanjutkan ke kolom yang sebelah kanan untuk menampilkan daftar pos terbaru agar terlihat rapih dan memastikan kolom sebelah kanan berfungsi dengan baik.
Silahkan masukkan code berikut didalam div class artikelTerbaru:
<a href=""><img src="images/lima.jpg"></a> <a href="https://posciety.com"><h2>Artikel Baru Satu</h2></a> <p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/> <a href=""><img src="images/lima.jpg"></a> <a href=""><h2>Artikel Baru Dua</h2></a> <p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/> <a href=""><img src="images/lima.jpg"></a> <a href=""><h2>Artikel Baru Tiga</h2></a> <p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p>
Perhatikan pada kode diatas terdapat img yang dibungkus a href artinya img ini disisipkan gambar sebagai gambar andalan pos tersebut dan dapat di klik, silahkan tentukan link didalamnya mengarah ke pos tunggal / halaman detail pos tersebut.
Baca Juga:
Ada juga tag h2 yang dibungkus dengan a href yang fungsinya untuk judul dari pos tersebut dan dapat di klik, silahkan tentukan link didalam a href nya menuju ke halaman masing-masing artikel.
Tidak lupa juga tag <p> yang fungsinya untuk excerpt atau kutipan beberapa kata yang diambil dari masing-masing pos.
Disini saya contohkan 3 artikel / pos saja per halaman, silahkan tentukan jumlah pos per halaman sesuai keperluan. Pada daftar artikel terbaru ini tidak ditambahkan link read more karena saya rasa sudah cukup dengan menyisipkan link pada gambar andalan dan judul pos tapi jika ingin menambahkan link read more silahkan aja.
Selanjutnya, terapkan code berikut di style.css:
/* class artikelTerbaru */
.buaya .artikelTerbaru {
width: 650px;
background-color: #f90;
float: left;
margin-left: 5px;
}
.buaya .artikelTerbaru img {
width: 550px;
margin: 5px 50px 0;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}
/* akhir class artikelTerbaru */
Pada class artikelTerbaru ini saya terapkan lebarnya 650px karena lebar keseluruhan adalah 900px dikurangi sidebar 245px dan dikurangi margin-left pada class artikelTerbaru 5px maka total akan sama yaitu 900px seperti header dan menu diatas (sama rata sisinya).
Selanjutnya masalah warna dan ukuran gambar silahkan disesuaikan aja, disini saya contohkan dengan gambar yang lebar dan lumayan besar. Silahkan di Save dan lihat hasilnya di browser. (lihat gambar)
Nah, sampai sini ternyata kolom kiri dan kanan yang ada didalam class buaya berfungsi dengan baik.
Masih bingung ? Lihat : Video Tutorial Cara Membuat Website HTML CSS Dari Nol Hingga Selesai. Sudah paham ? Yuk lanjut ke part 5.
Dari part 1 sampai part 4 ini code HTML CSS kalian harusnya seperti ini:
HTML
<!doctype html> <html> <head> <title>Membuat Website - HTML Rio Bermano</title> <link href="css/style.css" type="text/css" rel="stylesheet"> </head> <body> <header> <img src="images/satu.jpg"> </header> <menu> <li><a href="">Home</a></li> <li><a href="">Download</a></li> <li><a href="">Tutorial</a></li> <li><a href="">Software</a></li> <li><a href="">Design</a></li> <li><a href="">Support</a></li> <li><a href="contoh-halaman.html">Kontak</a></li> </menu> <div class="recomended"> <h1>Artikel Disarankan</h1> <div class="recomendedKiri"> <img src="images/dua.jpg"> <h3><a href="single-post.html">Tutorial Bagi Pemula</a></h3> <p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href="single-post.html"><strong>Baca Selengkapnya</strong></a></p> </div><!--akhir class recomendedKiri--> <div class="recomendedKanan"> <img src="images/tiga.jpg"> <h3><a href="">Hi, There</a></h3> <p>ey College in Virginia, looked up one of the more obscure Latin words, consectetur, from a Lorem Ipsum passage, and the cites of the word. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written in 45 BC. This book is a treatise on the theory of ethics, very popular during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum dolor sit amet..", comes. <a href=""><strong>Baca Selengkapnya</strong></a></p> </div><!--akhir class recomendedKanan--> </div><!--akhir class recomended--> <div class="buaya"> <div class="widget"> <div class="artikelTerlaris"> <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> </div><!--akhir class artikelTerlaris--> <div class="mediaSosial"></div> <div class="subscribe"></div> </div> <div class="artikelTerbaru"> <a href=""><img src="images/lima.jpg"></a> <a href="https://posciety.com"><h2>Artikel Baru Satu</h2></a> <p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/> <a href=""><img src="images/lima.jpg"></a> <a href=""><h2>Artikel Baru Dua</h2></a> <p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p><br/> <a href=""><img src="images/lima.jpg"></a> <a href=""><h2>Artikel Baru Tiga</h2></a> <p>ssage, and the cites of the word in classical literature, discovered the undoubtable undoubtable source. Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus Bonorum et Malorum" (The Extremes of Good and Evil) by Cice</p> </div> </div><!--akhir class buaya--> </body> </html>
CSS
* {margin: 0; padding: 0;}
body {
width: 900px;
margin: auto;
}
header {
width: 900px;
height: 250px;
}
header img {
width: 900px;
height: 250px;
}
menu {
width: 880px;
height: 30px;
background-color: blue;
padding: 10px;
margin-top: 5px;
}
menu li {
list-style: none;
float: left;
margin-right: 20px;
margin-top: 5px;
color: #fff;
}
menu li a {
text-decoration: none;
color: #fff;
}
menu li a:hover {
color: orange;
}
/* class recomended */
.recomended {
width: 100%;
overflow: hidden;
background-color: #a9a9a9;
margin-top: 5px;
}
.recomended h1 {
text-align: center;
}
.recomended .recomendedKiri {
width: 435px;
float: left;
margin: 10px 5px 5px 10px;
}
.recomended img {
width: 150px;
height: 100px;
float: left;
margin: 0 5px 5px 0;
box-shadow: 2px 2px 2px #333;
}
.recomended p {
text-align: justify;
}
.recomended .recomendedKanan {
width: 435px;
margin: 10px 10px 5px 5px;
float: left;
}
.recomended a {
text-decoration: none;
color: #140fcd;
}
.recomended a:hover {
color: #000;
}
.recomended h3 {
color: #140fcd;
}
/* akhir class recomended */
/* 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;
}
.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 */
/* class artikelTerbaru */
.buaya .artikelTerbaru {
width: 650px;
background-color: #f90;
float: left;
margin-left: 5px;
}
.buaya .artikelTerbaru img {
width: 550px;
margin: 5px 50px 0;
}
.buaya .artikelTerbaru h2 {
margin-left: 5px;
}
.buaya .artikelTerbaru p {
margin: 0 5px;
text-align: justify;
}
.buaya .artikelTerbaru a {
text-decoration: none;
color: #000;
}
.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;
}
/* akhir class artikelTerbaru */
Kesimpulan
Pada part 4 ini kita hanya ingin memastikan bahwa kolom sebelah kanan didalam class buaya berfungsi dengan baik makanya kita lewatkan widget-widget lain yang akan diterapkan di sidebar kiri. Semua berfungsi dengan baik, maka pada tutorial berikutnya kita akan kembali lagi menambahkan widget-widget lain di sebelah kiri.
Selamat mencoba !